2.3以降のPhoneGapでタブバーを表示させる


最近めちゃくちゃ暑いですね、、

さて今日は、PhoneGapでタブバーを表示させる方法について紹介しようかと思います。
ちょうど1年くらいまえにも紹介しているのですが、PhoneGapのバージョンが上がっていて当時と少し方法が変わっている部分があるので、PhoneGapのバージョンが2.3以降のものに対応した導入方法を紹介します。

大きな流れは、

  1. 1.プラグインをプロジェクトに追加する
  2. 2.プラグインをPhoneGapに登録する
  3. 3.NativeControlsを修正する
  4. 4.タブを設置する

というような感じになります。

1.プラグインをプロジェクトに追加する

まず、プラグインの追加からです。
ここはそんなに変化はないのですが、phonegap-pluginsのGithubから、iOS > NativeControlsとたどっていってファイルをダウンロードします。

で、「.m」「.h」の拡張子のついたファイルをPluginsディレクトリに設置します。

「.js」ファイルをwwwディレクトリに設置します。

2.プラグインをPhoneGapに登録する

ここ、昔と変わっています。

2.2までのバージョンでは、phonegap.plist(新しめのバージョンではcordova.plist)という設定ファイルにkeyとvalueを記述していましたが、2.3以降では、config.xmlに記述する形となりますので注意してください。

config.xmlを開くと、

<plugins>
  <plugin name="Device" value="CDVDevice" />
  <plugin name="Logger" value="CDVLogger" />
  ・・・
</plugins>

という風な一角があると思います。

そこに、

<plugin name="NativeControls" value="NativeControls" />

という1行を追記します。
これで終わりです。

3.NativeControlsを修正する

プラグインを導入する手順としては、ファイルをプロジェクトに追加してconfig.xmlに追記するだけで終わりなのですが、今のNativeControlsはそのままだとビルドするときにエラーになってしまいます。

なので、NativeControls.hというファイルにつき、以下のように修正する必要があります。

17行目〜21行目

//#ifdef CORDOVA_FRAMEWORK
#import <Cordova/CDVPlugin.h>
//#else
//#import "CDVPlugin.h"
//#endif

コメントアウトする感じですね。

これでビルドできるようになるはずです。

4.タブを設置する

ここは昔紹介したときと変わることはありません。
使いたいHTMLからNativeControls.jsを読み込んで、createTabBarしたりcreateTabBarItemしたりという感じですね。

詳しくは過去の記事をご覧ください。

これで、2.3以降でもタブバーを設置できるようになりました!

では、今日はこの辺で

Let’s enjoy HTML5 Life !!

Leave a Comment

*

Categories

Recent News

HTML5/CSS3/Javascriptのニュースまとめ[8/19〜8/25]

先週のニュース・ブログ記事を紹介していきます! 先週はちょっと少なめで...

PhoneGap3.0がリリースされましたね!

PhoneGap3.0がリリースされましたね! PhoneGap Da...

HTML5/CSS3/Javascriptのニュースまとめ[6/17〜6/23]

今日は先週のニュース・ブログ記事のまとめです。 1.HTML5 歴史的...

HTML5/CSS3/Javascriptのニュースまとめ[6/10〜6/16]

今日は先週のニュース・ブログ記事のまとめです。 個人的に気になったもの...

AndroidのWebViewでUserAgentを独自に設定する方法

今日はAndroidのWebViewでユーザーエージェントを独自のもの...