LoginSignup
89

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-10-14

以前「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のインストール
  • Android SDKのインストール

の2点くらい。あと、

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
89