はじめに
なぜプログラムを作ることができないのか
・できないと思っている
・めんどうくさい
・勉強したくない
でも、スマホを使っていてこんなふうに感じたことはありませんか
スマホで自分用のアプリがほしいと思う
自分にできるのか知りたい
ここでは、必要なプログラムのインストールを含め、
スマホ用のプログラムを作る手順を説明します。
使用しているパソコンはwin10です。
自分にもできそうだと感じた人はぜひ
プログラムの勉強をして挑戦してください。
またこの内容を八王子市生涯学習センターの教室で説明しております。
よろしければ参加ください。
スマホを操作できる人はスマホのプログラム作りのための基本的な知識をすでに習得していると言えます。
なにができるのか、「この操作でこうなる」というイメージをもつことができるからです。
何ができるかわかっていれば、それをプログラムでどう表現すればいいかを調べるだけです。
製作するプログラム
今回、こんなプログラムを作ってみます。
簡単なメモ帳
作ったメモ帳のプログラムを読み込むと
1.入力日時とともに登録したデータが表示される
2.追加入力すると、保存される
3.修正もできる。
4.検索もできる。
スマホで使用する言語は、
Androidアプリでは Java、JavaScript、C#
iphone (iOS)アプリでは、Objective-C、Swift、JavaScript、C#
などがあるとのことです。
この中で Android、 iphoneの両方に使えて、習得するのが容易なJavaScriptを使って開発してみます。
そもそもプログラムとは入力から出力を生み出すものです。
それぞれの機能について、入力、出力が何かを考えてみます。
また、それを実現するメモリ等の構造を決めます。
システム設計
1.入力日時とともに登録したデータが表示される
入力 ローカルストレージ(データの保存場所)
出力 画面
2.追加入力すると、保存される
入力 キーボード
出力 画面、ローカルストレージ
3.修正もできる。
入力 画面クリック キーボード
出力 画面、ローカルストレージ
4.検索もできる。
入力 キーボード
出力 画面
入力、出力を考えると同時に、ローカルストレージやメモリの記憶の構造、画面を設計します。
この作業は命令をある程度知っていないとできない難しいところです。
今回、ローカルストレージ1件使用、行を改行コードで区切って登録することにします。
メモリでの記憶方法は1行ごとに配列に記憶します。日付とメモを別の配列にします。
画面に1行ごとにidを付けて表示します。idは0000から9999とします。
フリーソフトのインストール
プログラムを入力し、デバック、最終的にスマホで読み込むためには、3つのフリーソフトをインストールする必要があります。
おすすめの3つのフリーソフトを紹介し、インストール方法を説明します。
1.入力のためのメモ帳 terapad
https://www.vector.co.jp/soft/win95/writing/se104390.html
2.デバックを容易にするためのブラウザ chrome
https://www.google.co.jp/chrome/
(インターネットエクスプローラでは一部の命令が動作しません)
3.サーバーへのプログラムのアップロード ffftp
https://www.vector.co.jp/soft/dl/winnt/net/se061839.html
スマホでは、製作したプログラムはサーバーからダウンロードしないと動作しないようです。
契約しているプロバイダーのサーバーに、製作したプログラムをアップロードします。
プログラムの製作
それではプログラムを作っていきます。
全部作ってからデバックする方法もありますが、1つずつ作って、動作確認していく方法が、プラモデルを作っていくようで楽しく、おすすめです。
1.入力日時とともに登録したデータが表示される
まず 配列を表示する部分を作ります。
デバック用として3行のメモを配列に記入しています。
//から右はコメント。動作に関係ありません。
|
var hi=new Array('2018/12/24 10:00','2018/12/24 10:10','2018/12/24 10:20'); var tx=new Array('デバック用メモ','パスワードaaa','生年月日 sxx.xx.xx'); hoji(); function hoji(){ for (var i in hi){ document.write('<div id='+ dddd(i)+'>'+ hi[i] + ' ' +tx[i] +'</div>'); //画面に表示 } } function dddd(n){ return ('0000'+n).slice(-4); // iを 0000のフォーマットに変換 }
|
プログラムはhtml文書内に記入します。
下記がプログラム入力のためのhtmlの標準フォーマットになります。
文字はパソコンで使用するSJISではなく、UTF-8を指定します。
SJISでも動作しますが、UTF-8が一般的に利用されるとのことです。
|
<meta charset="utf-8"> <head> <title></title> <style> </style> </head> <body> <script type="text/javascript"> </script> </body> </html> |
Terapadを使い、
<body>の下に 「こんにちは」と入力し、
c:\prog\test.htm 注 \と表示されていますが ￥を入力します
として、文字コード指定保存により UTF-8Nを指定して保存します。
Chrome を立ち上げます。
URLの入力欄に
\C:\prog\test.htm
と入力します。
下記表示されます。
UTF-8Nを指定せずSJISで保存すると、動作はしますが文字化けします。
作成したプログラムを
<script type="text/javascript" >の下に入力し、
c:\prog\test1.htmとして保存します。
|
<html> <meta charset="utf-8"> <head> <title></title> <style> </style> </head> <body> <script type="text/javascript"> var hi=new Array('2018/12/24 10:00','2018/12/24 10:10','2018/12/24 10:20'); var tx=new Array('デバック用メモ','パスワードaaa','生年月日 sxx.xx.xx'); hoji();
function hoji(){ for (var i in hi){ document.write('<div id='+ dddd(i)+'>'+ hi[i] + ' ' +tx[i] +'</div>'); //画面に表示 } } function dddd(n){ return ('0000'+n).slice(-4); // iを 0000のフォーマットに変換 } </script> </body> </html> |
文字コード指定保存により UTF-8Nを指定して保存します。
URLの入力欄に
\C:\prog\test1.htm
と入力します。
下記のように表示されます。
デバック用に登録した配列が表示されました。
次に配列をローカルストレージに登録するプログラムswrite()、
ローカルストレージを配列に読み込むプログラムsread()
を作成します。
|
function swrite(){ var txt=""; for (var i in hi){ txt += hi[i] + tx[i] +"\n"; //配列をつなぐ 改行\nで区切り } localStorage.setItem("メモ" , txt); //ローカルストレージへの書き込み } function sread(){ hi=[]; //配列消す tx=[]; //配列消す var txt = localStorage.getItem("メモ");//ローカルストレージ読み込み var htx = txt.split("\n"); //\nで区切り配列へ for (var da of htx){ hi.push(da.substr(0,16)); //日時 配列へ追加 tx.push(da.substr(16)); //メモ16文字目から } } |
動作を確認するため、
配列をローカルストレージに登録、ローカルストレージを配列に読み込み、配列の表示を順に実行します。
swrite(); //配列をローカルストレージへの書き込み
sread(); //ローカルストレージを配列へ読み込み
hoji(); //配列の表示
これにより、登録、読み込みの動作を確認できます。
|
var hi=new Array('2018/12/24 10:00','2018/12/24 10:10','2018/12/24 10:20'); var tx=new Array('デバック用メモ','パスワードaaa','生年月日 sxx.xx.xx'); swrite(); //配列をローカルストレージへの書き込み sread(); //ローカルストレージを配列へ読み込み hoji(); //配列の表示 function swrite(){ var txt=""; for (var i in hi){ txt += hi[i] + tx[i] +"\n"; //配列をつなぐ 改行\nで区切り } localStorage.setItem("メモ" , txt); //ローカルストレージへの書き込み } function sread(){ hi=[]; //配列消す tx=[]; //配列消す var txt = localStorage.getItem("メモ");//ローカルストレージ読み込み var htx = txt.split("\n"); //\nで区切り配列へ for (var da of htx){ hi.push(da.substr(0,16)); //日時 配列へ追加 tx.push(da.substr(16)); //メモ16文字目から } } function hoji(){ |
同様に表示されました。書き込まれたローカルストレージが表示されています。
配列をセットする部分を取りさり、本当にローカルストレージに保存されたか確認します。
c:\prog\test2.htmとして保存
|
var hi= new Array(); var tx= new Array(); sread(); //ローカルストレージ配列へ読み込み hoji(); //配列表示 function swrite(){ var txt=""; for (var i in hi){ txt += hi[i] + tx[i] +"\n"; //配列をつなぐ 改行\nで区切り } localStorage.setItem("メモ" , txt); //ローカルストレージへの書き込み } function sread(){ hi=[]; //配列消す tx=[]; //配列消す var txt = localStorage.getItem("メモ");//ローカルストレージ読み込み var htx = txt.split("\n"); //\nで区切り配列へ for (var da of htx){ hi.push(da.substr(0,16)); //日時 配列へ追加 tx.push(da.substr(16)); //メモ16文字目から } } function hoji(){ |
無事 ローカルストレージより読み込み、表示ができました。
ここまでいかがだったでしょうか。
JavaScriptを一通り勉強する場合、下記がおすすめです。
また命令の意味、使い方が知りたければ、
JavaScript 命令 でインターネット検索すると、いくらでもでてきます。