Cordovaハイブリッドアプリの作り方 #3

2018.04.11

前回で、既存のPluginを追加したアプリの作製ができるようになりました。
今回は、Pluginを自作して、取り込み、目標のアプリ完成を目指します。

Plugin作製

近接センサのみを利用するPluginが存在してなさそうだったので、作ってみました。今回はAndroid対応のみです。

Cordova documentでは、Plugin Developmentを参考に進めます。更に、Android対応のPluginにするので、Android Plugin Development Guideも参照します。

そのほか、GitHubに上がっている既存のPluginの実装も参考にしました。

尚、先にAndroidアプリとして近接センサの現在の値を取得するアプリを作って、それを元にCordova Plugin化しました。

androidapps

この場でのAndroidアプリの説明は省略します。AndroidAPIについてはこちらを参照してください。

 

Pluginスケルトン生成

まずは、plugmanをインストールします。

 

以下のコマンドで、スケルトンを生成

 

各引数の役割は以下です。

proximity

Plugin名(cordovaプロジェクト内で呼び出す時のjavascriptのクラス名となる)

cordova-plugin-proximity

実際にPluginがインストールされる時に作成されるPluginディレクトリ名。cordova-plugin-[Plugin名]

0.01

Pluginのバージョン

スケルトンのディレクトリ構成は以下です。手を加える場所を★で示します。

 

ネイティブの実装は、src/配下に各プラットフォーム向けのディレクトリを自分で作成して格納します。Androidの場合、Android特有のディレクトリ構成を踏襲します。

 

Pluginの情報はplugin.xmlに記述します。

 

jsファイルにWebアプリ層とネイティブアプリ層の中継ぎをするI/F定義を記述します。

 

以下、ネイティブ層の処理です。今回はAndroid対応のみです。

 

最後に、以下のコマンドで、Pluginの管理情報を生成しておきます。これをしておかないと、cordova add pluginで追加できません。

Pluginのトップディレクトリ直下に、package.jsonファイルが生成されていればOKです。

 

自作Pluginの呼び出し

作成したPluginをアプリから呼び出して、動作確認します。新規にcordovaプロジェクトを作成し、Pluginを追加します。

ローカルにあるPluginの追加はディレクトリパスを指定してaddします。

app\www\index.jsに追加したPluginの呼び出し処理を実装します。

Proximity Sensor

not yet

※cssはスケルトンdefaultのまま手を加えてないです

 

Cordova上のAndroidネイティブデバッグ

以上を用意してCordovaでビルドをかけたのですが、Cordovaのjavaコンパイラ(CordovaLib:compileDebugJavaWithJavac)のビルドエラー出力が文字化けしており、内容が全くわかりませんでした。 文字化けの直し方がわからなかったのと、今回のアプリがAndroid対応なので、AndroidStudioを使ってビルドエラーの確認をします。 まず、以下のコマンドを実行します。

Plugin追加後にこれをしないと、Androidプロジェクトで認識されません。このコマンドの実動作内容はこちらを参照してください。

AndroidStudioを起動して、プロジェクトを選択します。プロジェクトは以下に◎で示します。AndroidディレクトリがAndroidプロジェクトマークになっていると思います。

AndroidStudio上からBuildして、ビルドエラーを出力させます。因みに、AndroidStudio上からアプリの実行もできます。近接センサを使いますので、実機で動作確認します。

アプリ起動後画面

ProximitySensorDemo

 

追加Pluginと自作Pluginの共存

既に用意している、カメラPlugin(cordova-plugin-camera)を追加したCordovaプロジェクトに、自作の近接センサPluginを追加して、ビルドします。

この時に気を付けるのが、各Pluginの仕様要件です。

追加したPlugin間で、plugin.xmlに記載する、Pluginがサポートするプラットフォームバージョンの記述(今回はAndroid)が、互いに交わらないバージョンになっていると、ビルドができません。

これは以下の時点で気を付つけるべき点でした。

  • 追加Plugin選択時
  • 自作Plugin開発時

また、アプリとしてのバージョンを先に決めてPluginを選定するか、使えるPluginに合わせてアプリ全体のバージョンをシフトするか、方針を考えておく必要があります。

因みに、Pluginの対応バージョンには幅を持たせる事ができるので、AndroidSDKのAPIレベルに気を付けながら指定すれば、そこまで問題にはならないと感じます。

 

カメラPluginの変更

近接センサもCordovaアプリで使えるようになったので、目標アプリの作製に取り掛かります。

ここで、カメラPluginの見直しが必要になりました。

仕様をよくよく読むと、

” Android Quirks

  ・Any cameraDirection value results in a back-facing photo. “

とのことで、Create your first Cordova appで入れたカメラPluginでは、目標とするアプリ仕様を満たせないことがわかりました。

再選定の結果、カメラPluginを以下のPluginに変更しました。

Cordova CanvasCamera

これで、起動時のカメラをインカメラに設定することが可能になります。また、動作確認の為のサンプルデモもありましたので、リファレンスに利用しました。

 

アプリの完成

目標の「近接センサでインナーカメラを起動するハイブリッドアプリ」は以下の実装で、完成しました。

対応内容

実装

Webアプリ層

proximity switch canvas camera

MaxRange:

not yet

not yet

 

ネイティブアプリ層

 

Plugin追加

 

アプリ動作

起動直後

PCCC_far

近接センサに接近

PCCC_near

以上で、目標のアプリが完成したのですが、 実装した後に、近接センサから離れたら、またカメラ画面を隠したいと思い、対応しました。

この変更は、www/以下のみで対応しました。これがハイブリッドアプリらしい実装の仕方かなと感じました。

対応内容

※canvasのdisplay初期値にnoneを追加しただけです。

 

Cordovaを使ったハイブリッドアプリ作製を通して試したことは以上です。

 

まとめ

ハイブリッドアプリも、現時点では、ネイティブのコードが、利用者であるWebアプリ層から使いたい形で用意されてないことの方が多いのではと感じました。

また、ネイティブ層部分は、プラットフォーム×デバイス機能の分だけ実装しなくてはいけないので、Web技術で自由自在にデバイス側を操るには道のりが長いと感じます。