Monaca＋PhoneGapでサクッとはじめるハイブリッドアプリ開発第2回

index.htmlの解説

現段階ではプログラムの記述を行っていないため、ボタンを押しても反応はしません。実際の生まれ年を計算して表示するロジックの作成は、後半で行いたいと思います。ここではHTMLとCSSについて簡単に解説を行います。

まずはindex.htmlをエディターで開いてください。このファイルは下記のとおり、いくつかのブロックに別れています。HTMLのバージョンは最新のHTML5で表記していますので、headerやsectionタグなどの新しい定義を用いています。

【コード1：index.html（headタグ内を再掲）】

まずはheadタグから。1行目はこのページのエンコーディングを指定します。MonacaではUTF-8形式がデフォルトです。2から4行目は先述の通り、外部ファイルを取り込んでいます。5～7行目のscriptタグは現時点で唯一のJavaScriptコードで、画面の横幅を320ピクセルに固定しています。

ちなみにmonca.viewportという関数は、その名の通りMonacaが提供するもので、どの端末・ブラウザーで見ても同じ画面解像度になるための仕組みです。詳しくはリファレンスマニュアルを参考にしてください。

【コード1：index.html（bodyタグ内を再掲）】

次にbodyタグの内容を見ていきます。bodyタグにはheaderタグとsectionタグがあり、それぞれタイトルとコンテンツ部分の記述となります。

コンテンツ部分の直下にはdivタグが3つあり、それぞれ名前の入力、年齢の入力ボックスと、計算を実行するボタンを配置しています。各divタグでは、box1、box2、input-boxという別々のclass属性を指定しています。これらの属性はクラスと呼ばれ、CSSにて画面の装飾を行うために利用しています。

input-boxのクラスを持つdivには、ハイパーリンクを指定するときに用いるaタグで記述しています。後ほど説明しますが、このようにCSSでaタグをボタンのように見せることが可能です。

style.cssの解説

次にコード2に掲載したCSSの解説を駆け足で行います。

まず最初の＊から始まる定義は、全称セレクタと呼ばれるもので、すべてのタグに対して適用されます。フォントの指定、文字列のサイズ調整の無効化、そして余白をゼロに初期化しています。

次の3つの定義は、それぞれhtml、body、そしてheaderタグに対するものとなっています。それぞれの内容の意味については、CSSの解説サイトを確認してください。

#contentsから始まる定義は、contentsというid属性を持つタグに対して適用されます。今回はコンテンツ部分に余白を設けるためにセットしています。

.box1、.box2、.input-textは、先述した3連のdivタグに対するスタイル定義となります。

最後に記述している.buttonから始まる3つの定義は、GitHubのプロジェクトとして公開されているものを拝借いたしました。これらはボタンの表現を行うための定義となっています。

スタイルシートはHTMLと比べて長く感じられるかもしれませんが、1行ずつ紐解いていくことで、徐々に意味が理解できると思います。数字を変えると見た目が変わりますので、ぜひ色々と変更して遊んでみてください。

手順5：JavaScriptコードを組み込む

先ほどのコード1では、プログラムが含まれていません。アプリの仕上げとして、実際に名前と年齢を入力し、生まれ年を計算するロジックを組み込んでみましょう。

まず、headタグで囲まれている部分に、JavaScriptコードを追記します。現在はmonaca.viewportから始まる行があると思いますので、その前後のいずれかに、コード3のコードを追記してください。

これでプログラムの記述が終わりました。最後に、ボタンをタップした際に、今追加したプログラムを実行するよう、index.html内のaタグ部分を書き換えます。具体的には下記の通り、aタグの中にonclick="keisan()"という記述を加えてください。

早速、Monacaデバッガーで再度実行してみてください。年齢を入力したら、無事生まれ年が表示されたでしょうか（画面5）。プログラムコードは最小限にするため、年齢は数え年で指定しないと正しい結果にならないかもしれません。

【画面5：プログラムを組み込んだアプリ】

プログラムコードの解説

このコードでは、keisanという名前の関数を作成しています。

まず、名前の入力値をmyname変数に、年齢の入力値をmyage変数に代入しています。そして、今日の日付をもとに生まれ年を計算し、birthyear変数に代入します。

最後に、textという変数にメッセージの内容をセットし、navigator.notification.alert関数を呼び出し、ポップアップ形式で表示しています。

このnavigator.notification.alert関数はPhoneGapの関数で、画面上にポップアップダイアログを表示するものです。今回は第3引数に「Monacaへようこそ！」という文字列を指定して、ダイアログのタイトルを指定しています。

最後に

はじめてCSSやJavaScriptに触れる方は、少し難しい印象をお持ちになったかもしれません。ただ、Webサイト制作で幅広く用いられている技術だけを用いていますので、入門書やインターネットでの参考資料も充実しています。ぜひMonacaを用いて、CSSやJavaScriptを学んで頂ければ幸いです。

今回は駆け足でMonacaを用いた簡単なプログラムを作成し、解説を行いました。今回のような簡単なプログラムの積み重ねで、大きなアプリケーションが動作します。ぜひ本日のサンプルを解析して頂き、学習の資料としてお使いいただければ幸いです。

次回もMonacaを用いた簡単なアプリの作成と解説を行います。お楽しみに！