CordovaNativeMenu

PhoneGap(Cordova)にAndroidネイティブのメニューを実装するパーツです。今のところAndroid専用なのでiOSプロジェクトには対応していません。

使用にはNode.jsとnpmモジュールのdom-jsが必要です。

使用方法

Node.jsをインストール後、npmモジュールのdom-jsをグローバルインストールします。
```
 $ npm install -g dom-js
```
native-menu.json.exampleを参考に、PhoneGap(Cordova)プロジェクトのrootにnative-menu.jsonを作成します。
hooksディレクトリの中身をPhoneGap(Cordova)プロジェクトのrootにあるhooksディレクトリにコピーします。
phonegap buildコマンドやcordova buildコマンドでプロジェクトをビルドして作成したアプリを実行してメニューボタンを押すとネイティブメニューが表示されるようになります(runコマンドではhooksのスクリプトが走らないので、メニューを新規作成したり変更した後の初回は必ずbuildコマンドを実行してください)。

仕組み

PhoneGap(Cordova)プロジェクトのhooksディレクトリに実行可能ファイルを置いておくと様々なタイミングでそのファイルを実行してくれます。今回の例で言うとプロジェクトのビルド直前にbefore_buildディレクトリのnative-menu.jsが実行されるようになります。

native-menu.jsではplatforms/android/src/アプリのメインソースに動的にメニューを作成するコードを書き加える処理と、メニューに表示される項目の内容を記述したmenu.xmlをplatforms/android/res/menuディレクトリに作成します。その際にプロジェクトのrootに置いたnative-menu.jsonを読み込んでメニュー内容を取得します。

メインソースの内容を正規表現を使用して直接書き換えるという割と危険な事をしています。場合によってはメインソースを壊してしまうかもしれません。何回か実行して問題がないことを確認できるまではメインソースのバックアップを取っておいてから実行してください。

native-menu.jsonの内容

以下の3項目でメニュー項目1つ分となります。それを配列で指定してください。

id

どのメニュー項目が選択されたのかをJavaScript側のイベントで判定するための識別子です。各メニュー項目で重複しないようにしてください。
title

メニューに表示される文字列です。
icon

メニューに表示されるアイコンファイル名です。ここで指定したファイル名と同名のPNGアイコンファイルをplatforms/android/res/drawableディレクトリに置いてください。

例) ic_menu_helpと指定した場合はplatforms/android/res/drawable/ic_menu_help.pngがメニューアイコンとして使用される。

また、platforms/android/res/drawableにアイコンを置いていない場合はAndroidデフォルトのリソースに該当するアイコンがあるかチェックして、あればそれを使用します。

デフォルトのメニューリソースIDはこちらを参照してください(ただし、機種のメーカーによってアイコンがあったりなかったりするようなのでPNGファイルを自前で用意した方が安全と思われます)。

メニュー項目を選択した時のイベントのJavaScript側での受け取り方

optionselectイベントが発生するので、その中で引数で渡されたeventオブジェクトのitemIdを参照するとnative-menu.jsonで指定したidが入っています。

document.addEventListener('optionselect', function (event) {
  if (event.itemId === 'help') {
    ...
  }
});

対応バージョン

PhoneGap3.4.0での動作を確認しています。それ以下のバージョンでは正常に動作しない可能性があります。

※PhoneGap3.3と3.4ではディレクトリ構成も変わっているようなので3.3でも正常に動かないかもしれません。

Changelog

0.1.0 (2014-04-23)

初版リリース

ライセンス

MIT licenseで配布します。

ktty1220 / cordova-native-menu