Cordovaを使って、Androidの実機実行するまで

  • 27
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

以前「PhoneGap」と呼ばれていたのが、Apacheプロジェクトの一部になり「Cordova」と改名されています。最近、改めて注目が集まっているようなそうでもないような...? どうなんでしょう。Ionicほか、Cordova上でAngularを使うフレームワークがいくつも出ています。そのあたりと、React Nativeに挑戦するかどうか、悩んでいる人もいるかもしれません。個人的には、ReactもAngularも使わない方向で行きたいので、とりあえずCordovaでサンプルアプリを作って、実機で動かすところまでやってみようと思います。

想定する環境は次のとおり。

  • Mac OS X El Capitan
  • Nodeはインストール済み

事前準備

ここを参考に、環境を整備します。

CLIツールの準備

  1. Cordova CLIのインストール: $ npm install -g cordova
  2. JDKをダウンロードして、インストール (GUIに従うだけ)
  3. Android SDKをダウンロード
  4. 解凍後、フォルダ名を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を開けば、こんなページが表示されるはず。

Hello World.png

プラットフォームの追加

ここでは、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に特化したエミュレータで、個人利用であればフリー。

  1. Genymotion.appを起動
  2. アプリケーション内で、VMをダウンロード (もしまだなければ)
  3. VMを起動
  4. Cordovaから起動 $ cordova run android

実機で検証

  1. Android実機のUSBデバッグ機能をONに
  2. MacにAndroid実機をUSB接続 (USBケーブルが充電専用だとNGなので注意)
  3. 次のコマンドで接続確認して、表示されればOK $ adb devices
  4. Cordovaから起動 $ cordova run android
  5. ビルドを待つ...
  6. 実機でアプリが起動!

ふう、動いた。

まとめ

簡単に動かすとこまで行けますね。若干わかりにくいのはCordova自体ではなくて、

  • JDKのインストール
  • Andoroid SDKのインストール

の2点くらい。あと、

  • 公式エミュレータは遅すぎて誰も使ってない(特にMac上では)
  • USBが充電専用ケーブルだった...

とかの罠にハマらなければ大丈夫です。今日、OSSCafeで悩んでいたら解決に導いてくれた方々に感謝します。

(ちなみに、作業は最近の薄小さいMacBookでやりましたが、スペック的にビルドで困るということもありませんでした。Genymotionでのエミュレータ起動も特に問題無し。案外出来る子です)