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

手順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"のみとなります。