いよいよ最終回です。本連載の締めくくりとして、Monacaフレームワークを用いたより高度なアプリ開発について紹介していきます。
Monacaフレームワークとは、Monacaと共にアシアルが提供している、ハイブリッドアプリ向け開発フレームワークです。オープンソースで提供されており、GitHubから最新版をダウンロードすることが可能です。
Monacaフレームワークの特徴
MonacaフレームワークはiOSとAndroidに対応した、マルチスクリーン対応のツールです。内部的にPhoneGapを用いており、PhoneGapアプリの機能を拡張することができます。具体的には、下記のようなPhoneGapで不足している機能を補強し、よりネイティブに近い操作感を実現します。
機能 | 説明 |
---|---|
ネイティブ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)。
{
"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" : "詳細"
}
}
]
}
}
今回、ヘッダーではタイトルを表示しているだけですが、先述の通りボタンを配置したり、デザインを変更することも可能です。詳細はドキュメントを参照してください。
またネイティブUIコンポーネントの表示や内容の変更についても、JavaScriptから制御できます。そのための関数としてmonaca.updateUIStyleとmonaca.retrieveUIStyle(ドキュメント)が用意されています。必要に応じて利用してください。