BLOG
HTML+Javascriptでスマートフォンアプリ開発！[1：はじめてみよう]
こんにちは。
未来工作ゼミのハカセ。よーだです。
思い出したように帰ってきたプログラミング講座です。
Scratchはバリバリ何でもできるけど、スマートフォンアプリ開発はやったことないなぁという小学校四年生以上の君を対象にしています。
アプリケーション開発の環境を整備して、ソフトウェアをスマートフォン上で動かすまでをいくつかの工程に分けながらやってみたいと思います。開発は開発者にやさしいAndroid端末の利用を想定して解説します。
・必要なものと〇期待すること
・メールアドレス
・Googlechromeが動くPC
・Androidスマートフォン（Wifiがつながれば電話回線は必要なし）
〇PC/スマートフォンがWifiなどでインターネットに接続されていること
〇PC/スマートフォンの操作が行えること
開発環境を作ろう
今回の講座ではMonacaというツールの学習用サイトを活用します。
写真：edu.monaca.io より
スマートフォンアプリは色々な方法で作ることができますが、PCにいろいろとインストールしたりと開発環境を作るのが難しいところもあります。
Monacaはアシアル株式会社が提供するオンラインのアプリケーション開発プラットフォームです。SDKやテキストエディタ、デバッガーなどを個別のPCにインストールすることなくブラウザ上で利用できます。
AndroidとiOS両方のアプリ出力に対応しつつ、WEBブラウザと開発用のスマートフォンがあれば開発でき、学習向けであれば無償のFREEプランがあるという点で、最初の学習に向いていると判断しました。
Monaca education アカウント作成
教育版Monacaの公式サイトの右上にあるアカウント作成ボタンからアカウントを作ることができます。開発にはアカウント登録が必須なので公式サイトの手順も参考にアカウントを作成してください。プランはこの講座の内容を試すだけであればFREEプランで十分です。
未成年のひとは保護者の方にアカウントを作ってよいか確認して了解をもらってから作りましょう。
アカウントを作った後、ログインするとダッシュボードの画面になります。
プロジェクトを作ってみよう
ダッシュボードのプロジェクトを作るボタンを押すと作成するプロジェクトのテンプレートが表示されます。
最小限のテンプレートを選びます。
名前は自分で分かりやすいものを付けましょう。説明はとりあえず無くても大丈夫です。
名前を入力したら作成ボタンでプロジェクトが作成されます。
ダッシュボードで作成したプロジェクトを選び、クラウドIDEで開くのボタンを押しましょう。
IDEといわれる画面が表示されました。
うんちく：IDEとは
IDEは統合開発環境と呼ばれるものです。一般的なプログラミングでは、ソースコードを編集するエディタ、アプリを動かす環境に合わせたソフトウェアライブラリ、実行ファイルを作るコンパイラ、パッケージ化するツールなどが必要になります。
これらは個別にインストールして使うこともできますが、毎回こういった環境を作るのは大変なため、それらのツールをまとめて開発環境として提供してくれているものがIDE（統合開発環境）です。広い意味では皆さんが良く使っているScratchエディタもIDEの一種ですね。
MonacaのIDEにはそれぞれのペインに名前が付いています。この講座中も以下の名称で表します。
①メニューバー
②プロジェクトパネル
③コードエディタ
④デバックパネル
⑤プレビュー画面
試しにコードをいじってみよう
それではさっそくコードを編集して改造してみましょう。
コードエディタにはindex.htmlというファイルが開いた状態になっています。これはHTMLという言語で書かれたファイルになります。HTMLは主にWEBサイトの描画に使われる文書の構造を定義する言語です。
むずかしい言い回しですが、たとえばそのページ（文書）のタイトルはなにか、見出しはなにかなどを、＜＞で囲まれたタグと呼ばれる文字列で、かこって表現します。HTMLとjavascriptについては第二回で解説しますので、第一回ではサンプルのコードを参考にしてプログラミングしてみましょう。
うんちく：文字と文字列
普段話している上では気になりませんが、プログラムでは文字と文字列は別なものとして認識されます。文字は「あ」などの一つを指し、文字列は「あかさたな」など複数の文字の集合を意味します。文章も文字列になりますね。本講座ではプログラム的に厳密に文字列という用語を使っていきます。
画面にボタンを追加する
プレビュー画面には文字列が表示されているだけで何も動作させることができないため、まずは画面にボタンを追加してみます。
コードエディタ上で、bodyタグの中に記述されているコードを以下のように書き換えます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<input type="button" value="hello world">
</body>
</html>
ハイライトされた場所にある文字列を書き換えて保存します。保存はCtrl+S（Macの場合は⌘+S）です。
保存するとプレビュー画面の表示がかわり、hello worldと書かれたボタンが表示されます。
MonacaのIDEではコードエディタで編集して保存するとプレビュー画面で簡単な表示や動作の確認ができます。ボタンを試しに押すこともできますが、今は押しても何も起こりません。
ボタンにクリックイベントを追加する
ボタンを押したときに、画面にダイアログを表示する簡単なプログラムを追加してみたいと思います。以下を参考にコードを書き換えてみましょう。
ちなみに「画面に表示したい文字列」となっているところは自由な文字列に書き換えてOKです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
function hello_world() {
alert("画面に表示したい文字列");
}
</script>
</head>
<body>
<input type="button" value="hello world" onclick="hello_world();">
</body>
</html>
書き換えたらコードを保存して、プレビュー画面のボタンをクリックしてみます。うまくいくとブラウザのダイアログでメッセージが表示されます。
デバッガーアプリをインストールしてスマートフォンで動作させる
プログラムを書き換えて動かすことはできましたが、まだPCで確認できただけです。スマートフォン上で動作させてみましょう。
Monacaでは開発中にスマートフォン実機で簡単に動作させるMonacaデバッガーなるアプリを配信していますので、こちらを使ってみます。
まずは教育版Monacaのページから教育版デバッガーをスマートフォンにインストールしましょう。
インストール後、デバッガーを起動するとログイン画面になります。アカウント登録で設定したメールアドレスとパスワードを入力してログインしましょう。
ログインできると、クラウドIDEで作成したプロジェクトを一覧で確認できるはずですので、プロジェクトを選択しましょう。
プロジェクトがロードされると、IDEでプレビューに表示されていた画面になります。ここでボタンをタップしてみましょう。
スマートフォンの画面にダイアログが表示されれば成功です。試しにPCのIDEで画面に表示したい文字列を編集して保存してみましょう。
「ライブリロードを行いました」と表示されてアプリが自動で更新されるはずです。ボタンを押すと表示される文字列も変わります。
このようにして、Monacaデバッガーを使うとPCでアプリを編集。スマートフォン実機で確認がスムーズにできます。
むすび
駆け足ですが、Monacaのアカウント取得から、コードの編集、デバッガーアプリを活用して実機での確認までを行ってみました。
実際にアプリとしてインストールするためには、「ビルド」という作業をしてアプリの実行ファイルを出力する必要がありますが、開発中はデバッガーアプリで十分です。
第二回では、今回なんとなく写してみたHTMLやJavascriptについて少し解説しつつ、詳しい勉強方法について書きたいと思います。
TOP
