PR

ネットワーク通信に対応した写真アルバムアプリを作ろう!

2013年4月12日(金)
大塔 中(おおとう あたる)アシアル株式会社

手順3:UI定義ファイル(index.ui)でツールバーを描画する

続いて、Monacaの特徴の1つであるネイティブコンポーネント機能を用います。これは、ツールバーやタブバーなどのスマホアプリでよく用いられる画面パーツを、OSのネイティブ機能を用いて描画するものです。

今回は、画面上部に「Monaca Photo Viewer」と表示されたツールバーを表示します。実際にはボタンを配置したり、様々な装飾を行うことも可能です。ネイティブコンポーネントを用いるには、UI定義ファイルという特別なファイルを記述します。UI定義ファイルは、HTMLファイルと同名のファイルとし、拡張子を「.ui」にしたファイル名を持ちます。たとえば今回の例では、index.htmlに対するUI定義ファイルはindex.uiとなります。

早速wwwフォルダー上で右クリックし、「新しいファイル」をクリックしてください。ファイル名の入力にて、先述の通りindex.uiと入力し、新しいUI定義ファイルを作成します。作成直後はサンプルから作られたデータが表示されますので、この内容をすべて削除し、下記のように書き換えてください。

なおUI定義ファイルの確認を行うためには、Monacaデバッガーで実際にプロジェクトを実行してみる必要があります。画面5のような画面が表示されたら成功です。

画面5:ネイティブコンポーネントでツールバーを描画した例

手順4:index.htmlを修正する

ここから先は、いつも通りHTML、JavaScript、CSSでアプリを作成していきます。まずは、index.htmlを修正して、下記のコードを貼り付けて保存してください。

著者
大塔 中(おおとう あたる)
1987年生まれ。以前は金融関係で為替ディーラーの仕事をしていたが、心機一転して退職。アシアルに入社してMonacaのテクニカルサポートとなる。アシアルに入る前までにはVBAやJavaなどの経験しかなかったが、入社後にJavaScriptなどクライアンサイドの技術を学ぶ。虫や植物の図鑑を眺めるのが子供の頃から趣味。

PHPとモバイルの開発を得意としたテクノロジーベンチャー。2002年7月の設立以来、PHP技術者のためのコミュニティサイト「PHPプロ!」や教育サービス、スマホアプリ開発プラットフォーム「Monaca」の提供など、Web システムの開発に留まらずさまざまなサービスを展開している。
http://www.asial.co.jp/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています