Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

以前「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でのエミュレータ起動も特に問題無し。案外出来る子です)

cognitom
下北沢オープンソースCafeのマスターで、図書館サービス「リブライズ」のデザイン担当。Riot.jsのコア開発者。
https://github.com/cognitom
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした