アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

ブログをアプリ化してみよう(その3 タブバーを表示する)

今回は前回の記事詳細を表示するに続いて、よりアプリらしさを出すためにネイティブのタブバーを表示してみたいと思います。

applican-config.xmlを編集する

タブバーを表示するにはapplican-config.xmlを編集する必要があります。まずタブバーを表示する指定を行います。

<property name="NATIVE_TAB_BAR">true</property>

タブバーのアイコンの数は2〜5まで指定が可能です。今回は4を指定します。

<property name="NATIVE_TAB_COUNT">4</property>

さらに高さを50にします。

<property name="NATIVE_TAB_HEIGHT">50</property>

次にタブバーのURLを指定していきます。これはローカル、インターネット上のどちらでも指定が可能です。

<property name="NATIVE_TAB_DEFAULT_URL">index.html</property>
<property name="NATIVE_TAB_URL1">index.html</property>
<property name="NATIVE_TAB_URL2">http://tech-blog.applican.com/about</property>
<property name="NATIVE_TAB_URL3">http://tech-blog.applican.com/archive/category/JavaScript</property>
<property name="NATIVE_TAB_URL4">http://tech-blog.applican.com/search?q=%E6%A4%9C%E7%B4%A2</property>

最後にこれまでずっと画面下部に表示していたナビゲーションバーは消したいと思います。

<property name="NAVIGATION_BAR">false</property>

画像を用意する

タブバーはプロジェクトのトップディレクトリに tab というディレクトリを作成し、その中に画像を用意する必要があります。命名規則は次のようになります。

  • tab_btn[1-5]on.png (タブが選択されている場合)
  • tab_btn[1-5]off.png (タブが非選択の場合)

つまり4つのタブを表示する場合は8つの画像が必要になります。さらに画像の幅は次のようになっています。

タブの数
5 128
4 160
3 213
2 320

高さは設定で指定した数値×2になっている必要があります(Retina対応のため)。今回はタブが4つで、高さを50と指定したので、幅×高さ=160px×100pxの画像を8つ作ることになります。できあがると次のようになります。

f:id:moongift:20150817201857p:plain

アプリをアップロードする

設定ファイルを編集し、画像を用意したらアプリカンにアップロードしてみたいと思います。まず作業していたwebディレクトリをZipで圧縮します。そして圧縮したファイルをアップロードします。

f:id:moongift:20150623092848p:plain

アップロードしたら、コンテンツの公開を選択し、公開します。

f:id:moongift:20150623092906p:plain

このようにアップロード履歴にデータが表示されればOKです。

f:id:moongift:20150623092922p:plain

アプリカンシミュレータで実行する

次に行うのはアプリカンシミュレータを使って実機での動作確認になります。iOS版Android版がありますので、必要な方をダウンロード&インストールしてください。

そしてアプリカンシミュレータを起動して、予め登録してあるユーザID/パスワードでログインします。そうすると作成したプロジェクトが一覧表示されますので、今回作ったブログアプリを実行してみましょう。

次の画像のようにタブバーが表示されて、アプリの表示が切り替えられればOKです。

f:id:moongift:20150817201907p:plain

実際の動きは次のようになります。

f:id:moongift:20150817201918g:plain

タブバーの実装についてはタブ表示するには | チュートリアル | アプリカン | アプリ開発支援プラットフォームを参考にしてください。他にもタブ上にバッジを表示したり、タブ画像をJavaScriptから変更することもできます。

次回はアプリ独自の機能として良く取り上げられる、プッシュ通知を実装してみたいと思います。