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

2018.04.11

前回は、ハイブリッドアプリやCordovaについての説明と、これから作製するアプリについて説明しました。

今回は、Cordova documentのCreate your first app を試します。開発手順としては、Cordova開発環境構築、Cordova app 作製、Core pluginの追加です。

これに追加して、Core plugin動作確認、Cordova上のJavaScriptデバッグについて紹介します。

Installing the Cordova CLI

Cordova開発環境を構築します。

Cordova開発には、Node.js、Cordova CLIが必要です。更に、Android対応とする為、JDKとAndroidSDK も必要です。

 

Node.jsをインストール

1. nvmをインストール

nvmは、nvm-windowsを利用します。以下のGitHubから、最新版の「nvm-setup.zip」をダウンロードして、解凍し、セットアッププログラムを起動します。

https://github.com/coreybutler/nvm-windows

コマンドプロンプトでインストールを確認します。

 

ヘルプが出れば、nvmのインストールは完了です。

2. Node.jsをインストール

インストールは、以下のコマンドを使います。

 

インストールされているバージョンは以下のコマンドで確認できます。

先頭に「*」が付いているバージョンが、現在使われているバージョンです。バージョンの切り替えは、以下のコマンドです。

 

Cordova CLIインストール

cordovaコマンドを使えるように、Cordova CLIをインストールします。

以上で、cordovaコマンドが使えるようになったはずです

ヘルプが出ればインストール完了です。

 

JDKインストール

以下からJDKインストーラを取得して、インストールしてください。

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

環境変数を以下の様に設定してください。

環境変数に追加

JAVA_HOME=C:\Program Files\Java\jdk1.8.0_xxx

pathの先頭に追加

%JAVA_HOME%\bin

 

Android Studioインストール

以下のサイトからAndroid Studioのインストーラをダウンロードしてください。

https://developer.android.com/studio/index.html

基本的に、全ての設定をデフォルトのままで進めてよいです。こちらのサイトが参考になります。

 

Create the App

まずは、”HelloWorld”アプリを試しに作ってみます。

次のコマンドを、任意のディレクトリ配下で打ってください。

これで、Cordovaアプリの原型となるディレクトリ構成が生成されました。

以降、ディレクトリ構成全体をCordovaプロジェクトと呼びます。

 

Add Platforms

次に、ビルドに向けて、アプリをどのプラットフォームに対応させるか設定します。

今回は、Androidのみに対応します。以下のコマンドで、対応プラットフォームを追加します。

 

以下のコマンドで、アプリがどのプラットフォームを設定されているか確認できます。

 

後でプラットフォームを設定から外すこともできます。

 

Install pre-requisites for building

次に、ビルド要件を確認しておきます。足りてない場合は、追加します。実際のインストールが出来ていても、環境変数でpathが通ってないと、not installedでエラーになります。要件が足りてないままビルドしても、ビルドエラーで教えてくれます。

ここでは、アプリを動作させたいAndroidのAPIレベルに対応しているか確認します。

Androidの”APIレベル”という概念について、詳しくはこちらを参照ください。

 

Build the App

Cordovaプロジェクトをビルドします。以下のコマンドで、全てのプラットフォームをビルドします。

 

因みに、ビルド対象のプラットフォームを個別に指定もできます。

 

Test the App

アプリを実行します。Emulator上で動かしてみます。

AndroidではEmulatorの事をAVDと呼びます。AVDの詳細はこちらのサイトで確認してください。

まだAVDを動かしたことがない場合、先にAVDを用意しておく必要があります。AndroidStudioから任意のAVDを用意しておいてください。

それでは、ビルドしたアプリをEmulatorで実行してみます。

以下の様な画面が出れば成功です。

helloworld

 

Add Plugins

Pluginの追加手順を確認します。

ここまでの手順で作製したcordovaプロジェクト”hello”に追加してみます。

どのPluginにするかですが、Create your first Cordova appの手順通り、Cordovaが公式に用意しているカメラPluginが今回のアプリに使えるかもしれないので、そのままでいきます。

その他に用意されているPluginの情報はこちらから確認できます。

追加Plugin: cordova-plugin-camera

 

Pluginの追加状況は、以下のコマンドで確認できます。

カメラPluginが追加されました。

残りの手順、” Using merges to Customize Each Platform”、” Updating Cordova and Your Project”は、必要によって対応してください。Pluginの実行には直接関係ないので、省略します。

 

ここからは、追加したCore pluginの動作確認を行う為、ソースコードを記述していきます。Create your first Cordova appの手順から離れます。

 

Core plugin動作確認

追加したcordova-plugin-cameraの動作確認する為のデモを作ります。

今回の動作イメージは以下です。

  1. アプリ起動、[カメラ起動]ボタン表示
  2. ボタンを押下すると、カメラが起動してプレビュー表示

cordova-plugin-cameraの使い方を確認します。

Cordova Documentにもcordova-plugin-cameraのAPI Referenceは説明されていますが、GitHubの方がよみやすかったので、そちらを参照しました。

注意すべき点として、Plugin利用開始タイミングがあります。

Pluginはハードウェア(ネイティブ)の準備が整うのを待って使い始める必要があります。cordova-plugin-cameraのオブジェクトが呼び出せるのは、Cordovaがdevicereadyイベントを発行した後だそうです。

処理は、hello/www/以下にdefaultで用意されているファイルに記述します。手を加える場所を★で示します。

 

ぷらぐいんカメラ

※bodyタグ内defaultの処理は全て削除

※defaultの処理は全て削除

※defaultのreceivedEvent:処理は削除

動作確認は、カメラを利用する為、実機で確認します。

実機とホストPCをusbで繋げて以下のコマンドをたたくと、実機側にアプリがインストールされ、起動します。

 

起動直後のアプリ画面

cordova-plugin-camera

[カメラ起動]ボタン押下後、アクセス許可してください。

en_permisson

全画面でリアカメラが起動すれば、成功です。

 

 

Cordova上のJavaSciprtデバッグ

既存のPluginを追加して呼び出したけど起動しない時など、JavaScriptの構文エラーをデバッグするには、Chromeの“Inspect with Chrome DevTools”を使います。

アプリをemulatorで起動後、Chromeブラウザに以下のアドレスを入力してアクセスしてください。

chrome://inspect/

inspect

Remote Targetからデバッグ対象のemulatorを選んで、’inspect’をクリック

consoleタブに、エラーメッセージが出力されます。

jsdebug

以上で、既存のPluginを追加したアプリの作製ができるようになりました。

次回は、近接センサPluginを自作して取り込み、目標のアプリを完成させます。