手順3：UI定義ファイル（index.ui）でツールバーを描画する

手順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：ネイティブコンポーネントでツールバーを描画した例

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

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

コードの説明は後ほど行います。まずは、必要なプログラムを書いて行きましょう。

手順5：main.jsを作成する

今回のプログラムではJavaScriptのコードが少し長くなるため、index.htmlに直接記述するのではなくjs/main.jsというファイルに分けることにします。そのため、jsフォルダー内にmain.jsという名前で新しいファイルを作成してください。main.jsでは、下記の内容を貼り付けて保存します。

手順6：style.cssを作成する

次は本アプリが用いるCSSファイルを作成します。こちらもindex.html内に記述するのではなく、外部ファイルとして参照します。まずは、wwwフォルダー直下に新しくcssフォルダーを作成し、そのなかにstyle.cssという名前のファイルを作成してください。style.cssには下記の記述を行い、保存します。

現在のフォルダ構成は以下のようになっています。

画面6：現時点でのフォルダ構成