少し前にモバイルアプリ開発をすることになり，Apache Cordovaの環境構築をしたのでそれの備忘録． 備忘録なので割と適当かもしれません…時間を見つけて改善します．
ハイブリッドアプリ開発とは
ハイブリッドとは、Web技術とネイティブ(アプリケーション)技術の二つのハイブリッドを意味しています。この特性から、ハイブリッドアプリはアプリ・Web双方の特色を併せ持ちます。
Apache Cordovaとは
オープンソースのハイブリッドアプリ開発フレームワークです．UIはHTML5やCSSで作り，動作部分はJavaScriptで実装することができます．Onsen UIなどスマートフォンアプリ向けのUIフレームワークを利用することで比較的簡単にスマホアプリを実装することができます．
環境
あまり覚えていない…ですが，windows環境での構築になります．Windows 10とwindows 8でインストールを行いました．
- OS : Windows 8 & 10
- システム : 64ビット OS
Apache Cordovaは，MonacaやVisual Studioなどの開発環境でも開発できます．Monacaによる開発に関するリファレンスは多いようです．また，Visual StudioはVS tools for cordovaというパッケージを用意しており，これインストールすると，必要な製品をすべてインストールしてくれるみたいです．そして多分VSやMonacaを使った方が楽です←．
今回の記事はそういったものを利用しない方法でインストールしたときのメモです．
やること
- JDK入れる
- Node.js入れる
- Cordova入れる
- SDK入れる
- SDKの追加ツール入れる
- Ant入れる
- Genymotion入れる
- エミュレータ上のAndroidでHello World
JDK入れる
私はJDKすら入ってなかったのでJDKをインストールすることから始めました．とはいってもインストールは簡単で，ORACLEのJDKダウンロードページで最新のJDKをインストールします．
ダウンロードが完了したらインストールを行います．基本デフォルトのままで次へをぽちぽちしていれば終わると思われます．パスを通すためにJDKのインストール先だけはちゃんと見ておいた方が良いですね．
インストールが完了したらシステムの環境変数からパスを通します．
Node.js入れる
Node.jsとは，サーバ側で動作するJavaScriptです．実はCordovaはNode.jsで扱うので，こちらをインストールする必要があります．
Node.jsの公式ページからインストーラをダウンロードします．LTSのWindows Installer (私は環境的に64bit版)が良いと思います．これも次へをぽちぽちしてれば良いです．
インストールが完了すると，Node.js及びそれらのパッケージ管理するためのnpmというツールがインストールされます．動作確認だけしておきましょう．
|
1 2 3 4 |
C:\>node -v v4.3.1 C:\>npm -v 2.14.12 |
なんか僕のやつ古いですね…
SDK入れる
Android SDKをインストールしたいのですが，私はAndroid Studioのインストーラを使った方法しか知りません．こちらのサイトからAndroid Studioのインストーラをゲットしました．私はAndroid Studioも欲しかったので，デフォルトのまま次へをぽちぽちしました．
こちらもパスを通します．以下の二つについてパスを通します．
- C:\Users\ユーザー名\AppData\Local\Android\sdk\tools
- C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools
このtools,platform-toolsへのパスは1例で，自分のインストールした環境に合わせてください．セミコロンで区切るのを忘れないようにしましょう．
追記) ANDROID_HOMEの登録
よくよく考えたら新規の環境変数の登録が必要でした．私は既に登録していたので忘れていました．
下記のような環境変数が必要です．
変数名：ANDROID_HOME
パス：C:\Users\ユーザ名\AppData\Local\Android\sdk
こちらも必要があれば適宜読み替えてください．
SDKの追加ツールを入れる
Android SDK Managerを使って追加のツールをインストールします．私の場合は以下にあるSDK Managerを直接実行しました．
- C:\Program Files (x86)\Android\android-sdk\SDK Manager.exe
こちらも自分の環境に置き換えて見てください．実行したらandroid SDK Platform-tools と必要なバージョンのAndroidにチェックを入れます．他にも必要なツールがあればインストールします．
Cordova入れる
Cordovaはnpmを使ってインストールできます．
|
1 |
C:\>npm install cordova -g |
インストールできたか確認もかねてバージョンを確認します．
|
1 2 |
C:\>cordova -v 6.0.0 |
(必要に応じて)ant入れる
基本はこの時点でCordovaを利用できます．しかし，cordovaでアプリを実行しようとすると，Antが無いよという旨のエラーが出るときがあるようです．Apache Antとは，makeファイルなどに相当するビルドツールみたいです。複雑なコンパイル作業などを自動化してくれます。Cordovaは内部でこれを利用しているようなのでこちらもインストールします．
こちらのApache Antのサイトに行きます．左メニューの[Download]-[Binary Distributions]を選択します．
下の方にスクロールすると，[Current Release of Ant]という部分があります．ここからファイル群をインストールできます.Windowsなら普通はzipファイルを選択すると思うのですが，私はzipをダウンロードして使おうとしたところ上手く行きませんでした(md5値なども確認しましたのでダウンロードミス等ではないです)．tar.gzの方を使うと上手く行ったので，こちらを使うことをお勧めします．tarはアーカイブで，gzが圧縮形式です．私はtarコマンドで解凍しましたが，解凍方法は他にもあると思います(Cygwin使ってました)．
|
1 |
$ tar xvzf ファイル名.tar.gz |
解凍したらそれをC直下に置いて，パスを通します．パスの通し方は下記のサイトを参考にすると良いです．
上手く設定できていれば，cordovaのコマンドが使えるはずです．
Genymotion入れる
デフォルトのエミュレータは重すぎなのでGenymotionを使います．Genymotionは軽く動作するエミュレータとして有名です(もちろんそれなりには重いですが)．Genymotionの公式サイトでインストールできます．Genymotionをインストールするには会員登録が必要になります．会員登録もインストールも無料できるので登録して利用します．
まずこちらで会員登録を行います．
その後，フリー版のインストールページまで行ってDownload Genymotion packageをクリックすればインストーラがダウンロードできると思います．インストーラを起動して指示通りに進めばインストールも完了します．
適当はエミュレータを起動しておけば，Cordova側で勝手に認識してくれます．
Hello World
簡単な動作確認をしてみます．Genymotionで適当なAndroidのエミュレータを起動した状態で以下のコマンドを実行します．
- プロジェクトの作成
- プロジェクトのディレクトリに移動
- プラットフォームにAndroidを追加(これでAndroidで実行できるようになる)
- Androidが追加されたか確認
- Androidでアプリを実行
という流れです．cordova run androidで，モジュールが足りない旨のエラーが出た際は，npm install <モジュール名>で適宜インストールします．
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
C:\適当なフォルダ\> cordova create testproject Creating a new cordova project. C:\適当なフォルダ\> cd testproject C:\適当なフォルダ\testproject\> cordova platform add android Adding android project... Creating Cordova project for the Android platform: Path: platforms\android Package: io.cordova.hellocordova Name: HelloCordova Activity: MainActivity Android target: android-23 Android project created with cordova-android@5.1.1 Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project Fetching plugin "cordova-plugin-whitelist@1" via npm Installing "cordova-plugin-whitelist" for android This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in. C:\適当なフォルダ\testproject\> cordova platform ls Installed platforms: android 5.1.1 Available platforms: amazon-fireos, blackberry10, browser, firefoxos, webos, windows, windows8, wp8 C:\適当なフォルダ\testproject\> cordova run android ANDROID_HOME=C:\Users\USERNAME\AppData\Local\Android\sdk JAVA_HOME=C:\Program Files\Java\jdk1.8.0_73 No target specified, deploying to device '192.168.56.101:5555'. ~~~省略~~~ LAUNCH SUCCESS |
エミュレータでこんな風になっていれば成功です．
もしもエミュレータでうまくいかない場合は，3行目と5行目のandroidをbrowserに変えれば，ブラウザで実行できます．アプリの挙動をブラウザで手軽に確認できるのもCordovaを用いたハイブリッドアプリ開発の強みです．また，単純にプロジェクトのwww内のindex.htmlをブラウザで実行させても同じことです．
まとめ
コマンドライン上で操作できるのは，個人的には動作も軽く気に入っています(バイト先では結局VSを使ってますが)．
雑な説明になってしまいましたが，見てくださった方の参考になる部分があれば幸いです．
時間があればもう少し丁寧に書き直したいです．
参考
- CordovaでHTML5ハイブリッドアプリ開発 – Android編
- Cordovaの環境構築
- Apache Antの使い方
- ハイブリッドアプリ開発といえばこれ！PhoneGap/Cordova事始め
こちらの書籍もおすすめです.Webアプリとの違いや具体的な開発方法などがわかります．