Webサイト制作の知識だけでカンタン年齢計算アプリを作ろう！

Monacaで作る年齢計算アプリ

前回はMonacaのセットアップを行い、Hello Worldを表示するだけの簡単なアプリを作ってみました。とても簡単に端末上でアプリが動いた事に驚かれたかもしれません。一方、画面は非常にシンプルで見栄えは良くありませんでした。

今回は一気に加速して、生まれ年を計算するアプリを作ってみたいと思います。もちろん、Monacaのメリットであるクロスプラットフォームを生かし、iPhone、AndroidそしてiPadで動作するアプリを作りましょう。

作成するアプリは、名前と年齢を入力すると、生まれ年を表示してくれるものです。本サンプルを通じて、HTMLとCSSの基礎、そしてjQueryを用いたJavaScriptとDOM操作について解説を行います。完成したアプリのスクリーンショットを画面1に掲載します。

【画面1：完成した年齢計算アプリ（iPhoneでの実行結果）】

事前準備

まずはMonacaダッシュボードから新しいプロジェクトを作成します。前回同様、スケルトンは「最小限のプロジェクト」を選択してください。名前（例えば「年齢計算」などが良いでしょう）と説明文を入力しプロジェクトが作成できたら、「IDEを起動」でMonaca IDEを起動します。

実機で実行して動作を確認するため、Monacaデバッガーをインストールしたモバイル端末を用意してください。Monacaデバッガーのインストール方法については、Monacaのマニュアルもしくは第1回の記事を参考にしてください。

用意はできましたか？ では早速、Monaca IDEとデバッガーを使って、年齢計算アプリの開発に取り組んでいきましょう。

手順1：プラグイン設定でjQueryを有効にする

今回のサンプルでは、jQueryというJavaScriptのライブラリーを利用します。jQueryは非常に多くのWebサイトで使われています。jQueryを使うと、HTMLの変更やスタイルの切り替え、簡単なアニメーションなどを驚くほど簡単に記述できます。多くの入門書も出ていますので、この機会にぜひマスターしておきたいライブラリーです。

Monacaでは、こういったJavaScriptのライブラリーをアプリ内に簡単に組み込むことができます。具体的には、Monacaプラグインという仕組みを通じて、自動的にアプリがライブラリーをロードしてくれます。もちろんjQueryの公式サイトからダウンロードしたものを手動でIDE上にアップロードしたり、Googleなどが提供するCDN（※）を参照することも可能です。しかし、Monacaプラグインを用いることで、対応ライブラリーであれば簡単に導入することができます。

• ※ CDNとはContent Delivery Networkの略でコンテンツを高速配信するための仕組み

MonacaプラグインでjQueryを有効にするには、「ファイル」メニューから「プラグイン設定...」を選択します。すると、Monacaアプリから参照できるプラグインが一覧で表示されます。今回はjQueryを有効にしたいので、「jQuery」と表示されている部分をチェックしてください（他の項目はデフォルトのままで問題ありません）。

ちなみにjQueryでは、「jquery-min.js」と「jquery.js」の2種類のファイルを選択可能です。両者には機能的な違いはありませんが、前者はミニマイズ版と呼ばれ、ファイルが圧縮された状態となっています。今回どちらを利用しても構いませんが、分かりやすさを優先し、jquery.jsを選択したいと思います。画面2のように設定を行ったら、「保存する」をクリックして保存してください。

【画面2：MonacaプラグインでjQueryを有効にする】

ではjQueryがプロジェクトに組み込まれたことを確認してみましょう。そのためには、IDE左側にあるファイルツリーを確認します。pluginsという名前のフォルダーの下に、各OSの名前（androidやios）を持つフォルダーがあります。いずれかのフォルダーを展開し、jqueryというフォルダーが現れたら、プラグインの組み込みは成功です。念のためフォルダーの展開を続け、jquery-x.x.x.jsという名前のファイルが表示されていることを確認しておきましょう（x.x.xにはバージョンがセットされます。執筆時点では最新版の1.8.3が登録されています）。

【画面3：Monacaプラグインで読み込まれるjQuery】

手順2：index.htmlを編集する

これで年齢計算アプリを開発する準備が整いました。まずは、起動画面であるindex.htmlの編集を行います。

Monacaアプリの画面はHTMLとCSS、JavaScriptで構成されます。具体的には、HTMLでページの骨格を作成し、CSS（スタイルシート）でHTMLを装飾します。JavaScriptはHTMLやCSSを動的に変更する（たとえばユーザーがボタンをタップしたら色を変える等）ために用いられます。従来のWebサイト制作と同じ組み合わせでアプリ開発できることは、Monacaの大きな強みと言えるでしょう。

まずはコード1をコピー＆ペーストし、index.htmlを書き換えてください。

【コード1：index.html（JavaScriptが含まれない）】

        
        
        
    
    
      
JavaScriptとCSS入門
      

        

          あなたのお名前は？
          <input type="text" id="myname" class="input-text" style="width: 40%">
        
        

          年齢は？
          <input type="text" id="myage" class="input-text" style="width: 20%">
        
        

          生まれ年を計算
        
      
    

本コードの詳しい解説は後ほど行います。ただし、次の手順につなげるため、現段階では下記の部分に注目してください。

【コード1の抜粋（5〜7行目）】

この3行は、ファイル冒頭のheadタグのなかに記述されているもので、それぞれMonacaプラグインのJavaScriptとCSS、そして今回のサンプルアプリで独自に作成するCSSを読み込むためのコードです。

1行目ではMonacaプラグインを参照し、jQueryやPhoneGapなどのJavaScriptライブラリーを読み込んでいます。具体的には"plugins/plugin-loader.js"ファイルを読み込むことで、このなかに記述された関数や機能をHTMLから利用できます。このように、外部のJavaScriptファイルを参照する場合は、scriptタグを用いて、参照先をsrc属性で指定します。

2行目と3行目は、それぞれMonacaプラグインで読み込むCSSファイルと、これから作成するCSSファイルを参照しています。スタイルシートの読み込みはlinkタグを用いることに注意が必要です。

ちなみにjQueryはスタイルシートを含んでいません。そのため、今回の"plugins/plugin-loader.css"で何かが読み込まれる訳ではありません。今回のアプリケーションが利用するスタイルシートは、次の手順で作成する"style.css"のみとなります。

手順3：style.cssを作成する

まずは新しいファイルを作成します。"www"フォルダーの上で右クリックをし、「新規ファイル」を選択します。「ファイルを作成」ダイアログが開きますので、"style.css"と入力してください。作成したファイルを開いたら、コード2を貼り付けます。

【コード2：style.css】

手順4：デバッガーで実行する

HTMLとCSSの作成が終わったら、まずはデバッガーを用いて、ここまでの成果を見てみましょう。

インストールしたMonacaデバッガーを起動し、プロジェクトを実行します。画面4のような結果が表示されたら成功です。

【画面4：アプリの実行結果】

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を用いた簡単なアプリの作成と解説を行います。お楽しみに！