以前「PhoneGap」と呼ばれていたのが、Apacheプロジェクトの一部になり「Cordova」と改名されています。最近、改めて注目が集まっているようなそうでもないような...? どうなんでしょう。Ionicほか、Cordova上でAngularを使うフレームワークがいくつも出ています。そのあたりと、React Nativeに挑戦するかどうか、悩んでいる人もいるかもしれません。個人的には、ReactもAngularも使わない方向で行きたいので、とりあえずCordovaでサンプルアプリを作って、実機で動かすところまでやってみようと思います。
想定する環境は次のとおり。
- Mac OS X El Capitan
- Nodeはインストール済み
事前準備
ここを参考に、環境を整備します。
CLIツールの準備
- Cordova CLIのインストール:
$ npm install -g cordova - JDKをダウンロードして、インストール (GUIに従うだけ)
- Android SDKをダウンロード
- 解凍後、フォルダ名を
sdkに変更して~/Library/Android/に置く (SDKの置き場所は、他の場所でも構わない)
SDKについては、次のような感じでパスを通しておくと良いです。
export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH
export PATH=$HOME/Library/Android/sdk/tools:$PATH
Androidライブラリの追加
$ android sdk コマンドで、SDK Managerを起動します。GUIが起動します。デフォルトで選択されているものと、使いたいバージョンを選んでおけばOKです。
アプリケーションの作成
空のアプリを作成
$ cordova create hello-app
これだけで、必要なファイルが生成されます。hello-appフォルダが生成されるので、その中を覗いてみます。wwwフォルダのindex.htmlを開けば、こんなページが表示されるはず。
プラットフォームの追加
ここでは、browserとandroidを追加。必要に応じて他のプラットフォームも。
$ cd hello-app
$ cordova platform add browser
$ cordova platform add android
platforms以下に、ファイルがいろいろ生成されるのですが、これをGitに含めてしまうと邪魔なので、.gitignoreでこの辺を無視しておいた方が良さそうです。その上で、npmのスクリプトで上記インストールを自動化しておけばOK。
platforms/*
!platforms/platforms.json
plugins
エミュレータでの検証
公式のエミュレータは遅すぎて使えないので、ここからGenymotionをダウンロード。GenymotionはVirtualBoxベースのAndroidに特化したエミュレータで、個人利用であればフリー。
- Genymotion.appを起動
- アプリケーション内で、VMをダウンロード (もしまだなければ)
- VMを起動
- Cordovaから起動
$ cordova run android
実機で検証
- Android実機のUSBデバッグ機能をONに
- MacにAndroid実機をUSB接続 (USBケーブルが充電専用だとNGなので注意)
- 次のコマンドで接続確認して、表示されればOK
$ adb devices - Cordovaから起動
$ cordova run android - ビルドを待つ...
- 実機でアプリが起動!
ふう、動いた。
まとめ
簡単に動かすとこまで行けますね。若干わかりにくいのはCordova自体ではなくて、
- JDKのインストール
- Android SDKのインストール
の2点くらい。あと、
- 公式エミュレータは遅すぎて誰も使ってない(特にMac上では)
- USBが充電専用ケーブルだった...
とかの罠にハマらなければ大丈夫です。今日、OSSCafeで悩んでいたら解決に導いてくれた方々に感謝します。
(ちなみに、作業は最近の薄小さいMacBookでやりましたが、スペック的にビルドで困るということもありませんでした。Genymotionでのエミュレータ起動も特に問題無し。案外出来る子です)