PhoneGapの構成と仕組み（Windows Phone編）

WP7

前回の記事ではPhonGapのインストールについて書きました。今回はアプリケーションを作るときのフォルダ構成や仕組みについて解説します。

構造

前回の記事でも書いたように、PhoneGapのアプリケーションを作成すると次のようなファイルが増えています。

上から、

  • WP7GapClassLib
    • PhoneGapとWindows PhoneのAPIをやり取りするライブラリ
  • GapLibフォルダのWP7GapClassLib.dll
    • 参照しているWP7GapClassLibの実体
  • wwwフォルダ
    • PhoneGapアプリケーションの本体
  • GapSourceDictionary.tt
    • ファイルのパスを出力するテンプレート

になっています。
HTML + CSS + JavaScriptでアプリケーションを作成していくには、wwwフォルダのhtmlやcssやjsファイルを編集します。試しにhtmlを編集してみましょう。

<body onLoad="init();">
  <h1>Hello PhoneGap</h1>
  <div id="welcomeMsg"></div>
  <!-- ボタンの追加 -->
  <button>ボタン</button>
</body>

bodyにbuttonを追加しました。すると画面にボタンが表示されます。

このようにPhoneGapではhtmlを編集することでアプリケーションを作成していくことになります。

仕組み

なぜWindows PhoneのアプリをHTML+CSS+JavaScriptで作成できるのか。
PhoneGapのアプリはPGViewというUserControlの上で動いています。そのPGViewにはWebBrowserコントロールが配置されているだけなので、正確にはWebBrowserコントロールの上でアプリが動いています。そのためHTML+CSS+JavaScriptでアプリが動きます。
しかしブラウザ上で動くアプリということは単なるウェブアプリにすぎません。Windows Phoneであれば当然Windows PhoneのAPIを利用してこそWindows Phoneのアプリと言えます。
スマートフォンであればカメラやGeolocationを利用したりファイルにデータを保存するためにAPIにアクセスするはずです。
もちろんPhoneGapではWindows PhoneのAPIをJavaScriptで呼び出すことができます。

次回はWebBrowserコントロールからどのようにWindows PhoneのAPIを呼び出しているのかを見ていきたいと思います。