正裕アシアル2012.12.21コピーしましたPRいよいよ最終回です。本連載の締めくくりとして、Monacaフレームワークを用いたより高度なアプリ開発について紹介していきます。Monacaフレームワークとは、Monacaと共にアシアルが提供している、ハイブリッドアプリ向け開発フレームワークです。オープンソースで提供されており、GitHubから最新版をダウンロードすることが可能です。Monacaフレームワークの特徴MonacaフレームワークはiOSとAndroidに対応した、マルチスクリーン対応のツールです。内部的にPhoneGapを用いており、PhoneGapアプリの機能を拡張することができます。具体的には、下記のようなPhoneGapで不足している機能を補強し、よりネイティブに近い操作感を実現します。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コンポーネントの表示例[画像のクリックで拡大表示]今回、ヘッダーではタイトルを表示しているだけですが、先述の通りボタンを配置したり、デザインを変更することも可能です。詳細はドキュメントを参照してください。ネイティブUIコンポーネントの表示や内容の変更についても、JavaScriptから制御できます。そのための関数としてmonaca.updateUIStyleとmonaca.retrieveUIStyle(ドキュメント)が用意されています。必要に応じて利用してください。現場の負担軽減を!医療界でのAWS活用法500万社が導入。情報銀行の成り立ち、事例、現状課題やその行方を網羅。経営戦略である以上、「会計」の知識やスキルが欠かせません。