ionic（cordova）のカスタムプラグイン開発のワークフローを構築する
カスタムプラグイン開発のワークフローが必要だ！
ionic（cordova）のカスタムプラグインを開発するのはそれほど難しいことではない。しかし当然の事ながら、プラグインの開発は試行錯誤を重ねる必要がある。そのための円滑なワークフローを構築するのにかなり苦労したので、まとめておきたいと思う。
ここでは、ionic側からカスタムプラグインを叩いてネイティブのノーティフィケーションを表示するサンプルを作ろうと思う。とりあえずAndroid用を開発することにする。
ionicプロジェクトの作成
まず、ionicプロジェクトを作り、CordovaLib-debug.aarを作るため一度ビルドする。
AndroidStudioプロジェクトの作成
AndroidStudioで~/Documents/git/customplugin-androidに、パッケージ名ex.customplugin、Blank Activityを選択してプロジェクトを作る。
そして、このようなレイアウトを作る。
CordovaLib-debug.aarを組み込む。これはAndroidStudioでCordova関連クラスをimportするのに必要。
File＞New＞New module＞Import .JAR or .ARR Packege＞Next。
File Name: ~/Documents/git/customplugin/platforms/android/CordovaLib/build/outputs/aar/CordovaLib-debug.aar
からのFinish。
左のツリーでGradle Scripts＞build.gradle（Module app）を開き、dependency部にCordovaLib-debugの記述を追加。
ここでCordova関連クラスをimportできるようにするために一度ビルド。Build＞Rebuild Project。
ノーティフィケーションアイコンの作成
適当なサイズのアイコン画像（512x512程度、アルファ付き、塗りは白、アイコン内のパディングは極力少なく）を用意する。
その画像をこちらにアップロードしてDownload Zip。
Android Asset Studio - Icon Generator - Notification icons
ダウンロードしたic_stat_notif_icon.zipを解凍するとresフォルダができるので、その配下のフォルダを全てcustomplugin-android/app/src/main/resにコピー。
これでカスタムプラグインを作る用意ができた。
カスタムプラグインの開発（ネイティブ側）
File＞New＞Java Class＞Name: CustomPlugin。
CustomPlugin.javaをこのように編集する。
MainActivity.javaをこのように編集する。
カスタムプラグインをネイティブで実行確認
Ctrl+Rで実行。
ボタンをクリックするとこのようにノーティフィケーションが表示された。
これでネイティブ側でのカスタムプラグイン開発は終了。ここからが本番。
ionicプロジェクトにカスタムプラグインを構築するフォルダを作成
ここではcustomplugin/plugins-custom/ex.custompluginとする。pluginsというフォルダが元からあるが、ここに作ってはいけない。pluginsはionicのシステムにマネージメントさせる。
ライブラリ（jar）をコピー
次にプラグインに必要なライブラリ（jar）をコピーしておく。
プラグインJSを作成
plugins-custom/ex.customplugin/customplugin.jsをこのように編集する。これがネイティブとの橋渡し役をする。
plugin.xmlを作成
plugins-custom/ex.customplugin/plugin.xmlをこのように編集する。
開発中のプラグインを素早くionicに反映させるgulpスクリプトの作成
次に、開発・編集したネイティブカスタムプラグインをionicプロジェクトへ素早く反映させるためのgulpスクリプトを書く。
まず必要なnodeモジュールをプロジェクトにインストールする。
ところで、ionicはビルド時にprepareを行うが、これはplatform配下に様々なファイルをコピーしたりする処理だ。hooks/after_prepare/010_add_platform_class.jsはそのprepare後に行われる処理。
カスタムプラグイン関連の処理はこのprepareの前に行わなければならないので、スクリプトをhooks/before_prepare/010_copy_custom_plugins.jsと作成してこのように編集する。
gulpスクリプトの動作確認
ここで「ionic prepare android」して次の項目を確認する。
これでAndroidStudioで編集したカスタムプラグインのソースをプラグインの追加と削除をせずとも即座に、また自動的にionicプロジェクトに反映させることができるようになった。
カスタムプラグインのインストール
ついにionicプロジェクトにカスタムプラグインをインストールするが、その前にplatforms/android/src/ex/customplugin/CustomPlugin.javaが存在するとインストール時にエラーになるので削除しておく。
そして「ionic plugin add plugins-custom/ex.customplugin/」でインストール。次の項目を確認する。
asssets配下のcustomplugin.jsはprepare・ビルド時にplugins/ex.customplugin/customplugin.jsが毎回上書きコピーされる。before_prepareでplugins-custom配下のjs（マスター）をplugins配下にコピーしているのはそのためなので、編集はplugins-cutom配下のものを編集する。
java/jarファイルのコピーとplugin.xmlの設定によるconfig.xmlの変更はプラグインをインストールした時にしか行われない。jarの追加やplugin.xmlの変更は比較的少ないのでまぁそれでも良いが、javaファイルの変更は頻繁に行われるはずで、それではまずい。before_prepareでjavaファイルのコピーをしているのはこのため。
カスタムプラグインのアンインストール
ここで一度「ionic plugin rm ex.customplugin」でアンインストールして次の項目を確認する。
カスタムプラグインの再インストールスクリプトを作成
plugin.xmlの編集やjava/jarファイルの追加などを行う場合にはプラグインのインストール・アンインストールを繰り返すことになるので、このようなスクリプトを用意しておく。
「chmod 744 reinstall-custom-plugins.sh 」で実行権限を与えておくのを忘れずに。
カスタムプラグインをionicで動作確認
これでカスタムプラグインの導入は完了！最後にionicプロジェクトでの動作確認をする。
www/index.htmlをこのように編集する。
www/js/app.jsをこのように編集する。
「ionic run android」でAndroidの実機で実行。するとこのように表示される。
「ノーティフィケーション表示」のボタンをクリックすると、このようにノーティフィケーションが表示される。
つまり、ネイティブアプリケーションと同様に、カスタムプラグインを使ってionicからノーティフィケーションを表示できるようになったわけだ。
ワークフローの再確認
ここで安心してはいけない。目的はあくまでワークフローの構築。カスタムプラグインを変更して素早くionicのプロジェクトに反映させられるかを確認しなくてはならない。
AndroidStudioに戻り、CustomPlugin.javaのshowNotification()メソッドの1行目に「Toast.makeText(context, "ノーティフィケーション表示", Toast.LENGTH_LONG).show();
」を追加してネイティブのトーストを表示してみよう。実行するとこのようになる。
さて、ionicでも同様に動作するだろうか？「ionic run android」で実行。するとこのようになる。
このように、カスタムプラグインのJavaソースを変更してネイティブで動作を確認しつつ、その後にコマンド一発でionicでも動作を確認できるようになったわけだ。
各プロジェクトのダウンロード
いや〜大変(^^);
customplugin（ionicプロジェクト）とcustomplugin-android（AndroidStudioプロジェクト）はgithubにアップしてある。
junkoro/customplugin
junkoro/customplugin-android
ionic（cordova）のカスタムプラグインを開発するのはそれほど難しいことではない。しかし当然の事ながら、プラグインの開発は試行錯誤を重ねる必要がある。そのための円滑なワークフローを構築するのにかなり苦労したので、まとめておきたいと思う。
ここでは、ionic側からカスタムプラグインを叩いてネイティブのノーティフィケーションを表示するサンプルを作ろうと思う。とりあえずAndroid用を開発することにする。
ionicプロジェクトの作成
まず、ionicプロジェクトを作り、CordovaLib-debug.aarを作るため一度ビルドする。
AndroidStudioプロジェクトの作成
AndroidStudioで~/Documents/git/customplugin-androidに、パッケージ名ex.customplugin、Blank Activityを選択してプロジェクトを作る。
そして、このようなレイアウトを作る。
CordovaLib-debug.aarを組み込む。これはAndroidStudioでCordova関連クラスをimportするのに必要。
File＞New＞New module＞Import .JAR or .ARR Packege＞Next。
File Name: ~/Documents/git/customplugin/platforms/android/CordovaLib/build/outputs/aar/CordovaLib-debug.aar
からのFinish。
左のツリーでGradle Scripts＞build.gradle（Module app）を開き、dependency部にCordovaLib-debugの記述を追加。
ここでCordova関連クラスをimportできるようにするために一度ビルド。Build＞Rebuild Project。
ノーティフィケーションアイコンの作成
適当なサイズのアイコン画像（512x512程度、アルファ付き、塗りは白、アイコン内のパディングは極力少なく）を用意する。
その画像をこちらにアップロードしてDownload Zip。
Android Asset Studio - Icon Generator - Notification icons
ダウンロードしたic_stat_notif_icon.zipを解凍するとresフォルダができるので、その配下のフォルダを全てcustomplugin-android/app/src/main/resにコピー。
これでカスタムプラグインを作る用意ができた。
カスタムプラグインの開発（ネイティブ側）
File＞New＞Java Class＞Name: CustomPlugin。
CustomPlugin.javaをこのように編集する。
MainActivity.javaをこのように編集する。
カスタムプラグインをネイティブで実行確認
Ctrl+Rで実行。
ボタンをクリックするとこのようにノーティフィケーションが表示された。
これでネイティブ側でのカスタムプラグイン開発は終了。ここからが本番。
ionicプロジェクトにカスタムプラグインを構築するフォルダを作成
ここではcustomplugin/plugins-custom/ex.custompluginとする。pluginsというフォルダが元からあるが、ここに作ってはいけない。pluginsはionicのシステムにマネージメントさせる。
ライブラリ（jar）をコピー
次にプラグインに必要なライブラリ（jar）をコピーしておく。
プラグインJSを作成
plugins-custom/ex.customplugin/customplugin.jsをこのように編集する。これがネイティブとの橋渡し役をする。
plugin.xmlを作成
plugins-custom/ex.customplugin/plugin.xmlをこのように編集する。
開発中のプラグインを素早くionicに反映させるgulpスクリプトの作成
次に、開発・編集したネイティブカスタムプラグインをionicプロジェクトへ素早く反映させるためのgulpスクリプトを書く。
まず必要なnodeモジュールをプロジェクトにインストールする。
ところで、ionicはビルド時にprepareを行うが、これはplatform配下に様々なファイルをコピーしたりする処理だ。hooks/after_prepare/010_add_platform_class.jsはそのprepare後に行われる処理。
カスタムプラグイン関連の処理はこのprepareの前に行わなければならないので、スクリプトをhooks/before_prepare/010_copy_custom_plugins.jsと作成してこのように編集する。
gulpスクリプトの動作確認
ここで「ionic prepare android」して次の項目を確認する。
- plugins-custom/ex.customplugin/src/android/CustomPlugin.javaが存在するか？
- platforms/android/src/ex/customplugin/CustomPlugin.javaが存在するか？
- platforms/android/res/drawable-hdpi-v11/ic_stat_notif_icon.pngなどのリソースが存在するか？
これでAndroidStudioで編集したカスタムプラグインのソースをプラグインの追加と削除をせずとも即座に、また自動的にionicプロジェクトに反映させることができるようになった。
カスタムプラグインのインストール
ついにionicプロジェクトにカスタムプラグインをインストールするが、その前にplatforms/android/src/ex/customplugin/CustomPlugin.javaが存在するとインストール時にエラーになるので削除しておく。
そして「ionic plugin add plugins-custom/ex.customplugin/」でインストール。次の項目を確認する。
- platforms/android/assets/www/plugins/ex.customplugin/customplugin.jsが存在するか？
- platforms/android/libs/配下にandroid-support-v4.jarとandroid-support-v7-appcompat.jarは存在するか？
- platforms/android/res/xml/config.xml内に「ex.customplugin.CustomPlugin」が存在するか？
asssets配下のcustomplugin.jsはprepare・ビルド時にplugins/ex.customplugin/customplugin.jsが毎回上書きコピーされる。before_prepareでplugins-custom配下のjs（マスター）をplugins配下にコピーしているのはそのためなので、編集はplugins-cutom配下のものを編集する。
java/jarファイルのコピーとplugin.xmlの設定によるconfig.xmlの変更はプラグインをインストールした時にしか行われない。jarの追加やplugin.xmlの変更は比較的少ないのでまぁそれでも良いが、javaファイルの変更は頻繁に行われるはずで、それではまずい。before_prepareでjavaファイルのコピーをしているのはこのため。
カスタムプラグインのアンインストール
ここで一度「ionic plugin rm ex.customplugin」でアンインストールして次の項目を確認する。
- platforms/android/assets/www/plugins/ex.customplugin/customplugin.jsが削除されているか？
- platforms/android/libs/内のandroid-support-v4.jarとandroid-support-v7-appcompat.jarは削除されているか？
- platforms/android/res/xml/config.xml内の「ex.customplugin.CustomPlugin」は削除されているか？
カスタムプラグインの再インストールスクリプトを作成
plugin.xmlの編集やjava/jarファイルの追加などを行う場合にはプラグインのインストール・アンインストールを繰り返すことになるので、このようなスクリプトを用意しておく。
「chmod 744 reinstall-custom-plugins.sh 」で実行権限を与えておくのを忘れずに。
カスタムプラグインをionicで動作確認
これでカスタムプラグインの導入は完了！最後にionicプロジェクトでの動作確認をする。
www/index.htmlをこのように編集する。
www/js/app.jsをこのように編集する。
「ionic run android」でAndroidの実機で実行。するとこのように表示される。
「ノーティフィケーション表示」のボタンをクリックすると、このようにノーティフィケーションが表示される。
つまり、ネイティブアプリケーションと同様に、カスタムプラグインを使ってionicからノーティフィケーションを表示できるようになったわけだ。
ワークフローの再確認
ここで安心してはいけない。目的はあくまでワークフローの構築。カスタムプラグインを変更して素早くionicのプロジェクトに反映させられるかを確認しなくてはならない。
AndroidStudioに戻り、CustomPlugin.javaのshowNotification()メソッドの1行目に「Toast.makeText(context, "ノーティフィケーション表示", Toast.LENGTH_LONG).show();
」を追加してネイティブのトーストを表示してみよう。実行するとこのようになる。
さて、ionicでも同様に動作するだろうか？「ionic run android」で実行。するとこのようになる。
このように、カスタムプラグインのJavaソースを変更してネイティブで動作を確認しつつ、その後にコマンド一発でionicでも動作を確認できるようになったわけだ。
各プロジェクトのダウンロード
いや〜大変(^^);
customplugin（ionicプロジェクト）とcustomplugin-android（AndroidStudioプロジェクト）はgithubにアップしてある。
junkoro/customplugin
junkoro/customplugin-android
コメント
コメントを投稿