いよいよ最終回です。本連載の締めくくりとして、Monacaフレームワークを用いたより高度なアプリ開発について紹介していきます。

 Monacaフレームワークとは、Monacaと共にアシアルが提供している、ハイブリッドアプリ向け開発フレームワークです。オープンソースで提供されており、GitHubから最新版をダウンロードすることが可能です。

Monacaフレームワークの特徴

 MonacaフレームワークはiOSとAndroidに対応した、マルチスクリーン対応のツールです。内部的にPhoneGapを用いており、PhoneGapアプリの機能を拡張することができます。具体的には、下記のようなPhoneGapで不足している機能を補強し、よりネイティブに近い操作感を実現します。

表1●Monacaフレームワークの機能
機能 説明
ネイティブUIコンポーネント ヘッダーやフッターなどのコンポーネントとして、iOSやAndroidの持つネイティブパーツを利用するための機能を提供する
ネイティブ機能を用いた画面遷移 画面の切り替えやポップアップ表示などに、ネイティブ機能を用いたアニメーション遷移を利用するための機能を提供する
ビューポート制御 iOSとAndroidで画面の見え方を一定にするための機能を提供する

 Monacaプラットフォームを用いてPhoneGapアプリを開発する場合、Monacaフレームワークは既に組み込まれています。また、ローカルでPhoneGapアプリを開発している場合でも、Monacaフレームワークを導入することが可能です。詳しくは、ドキュメントを参照してください。

Monacaフレームワークを利用する

図●ネイティブコンポーネントの配置図
図●ネイティブコンポーネントの配置図
[画像のクリックで拡大表示]

 今回は、Monacaプラットフォームを用いながら、Monacaフレームワークの使い方を紹介します。アカウントの登録については、第2回を参照してください。

 まず、Monacaで「最小限のプロジェクト」を指定した新しいプロジェクトを作成し、IDEを立ち上げます。ここでは、第4回のようなツールバーとタブバーを持つアプリを、ネイティブで描画する方法を紹介します。具体的には、Monacaフレームワークの持つネイティブUIコンポーネントを利用して、ツールバーとタブバーを描画します。

 ネイティブUIコンポーネントで配置できるのは、ツールバーもしくはタブバー(ナビゲーションバー)となります。また、ツールバーにはボタンやラベルのほか、検索バーやセグメント(選択式ボタン)などを配置できます。タブバーは画面上部には配置できないことに注意が必要です。

 さて、ネイティブUIコンポーネントを利用する際には、HTMLとは別のファイルで定義を行います。定義にはJSON形式の記述を行い、UI定義ファイルと呼ばれます。

 まずindex.htmlと同じ階層に、index.uiという名前でファイルを作成します。これで、index.htmlに対応するUI定義ファイルという意味となり、index.htmlを表示するタイミングで自動的にネイティブコンポーネントが配置されます。

 今回は先ほどの画面を記述するため、下記のようなUIファイルを記述します。ライブプレビューには表示されませんが、実際にMonacaデバッガーで確認すると、画面パーツが描画されていることが分かります(画面1)。

コード1●UI定義ファイルの例
{
    "top" : {
        "container" : "toolbar",
        "style" : {
            "title" : "Monacaでカンタン開発",
            "backgroundColor" : "#333"
        }
    },
    "bottom": {
        "container" : "tabbar",
        "items" : [
          {
            "component" : "tabbarItem",
            "link" : "index.html",
            "style" : {
              "text" : "トップ"
            }
          },
          {
            "component" : "tabbarItem",
            "link" : "detail.html",
            "style" : {
              "text" : "詳細"
            }
          }
        ]
    }
}

画面1●ネイティブUIコンポーネントの表示例
画面1●ネイティブUIコンポーネントの表示例
[画像のクリックで拡大表示]

 今回、ヘッダーではタイトルを表示しているだけですが、先述の通りボタンを配置したり、デザインを変更することも可能です。詳細はドキュメントを参照してください。

 またネイティブUIコンポーネントの表示や内容の変更についても、JavaScriptから制御できます。そのための関数としてmonaca.updateUIStyleとmonaca.retrieveUIStyle(ドキュメント)が用意されています。必要に応じて利用してください。