HTMLでデキるモバイルアプリ開発フレームワークApache Cordovaをやってみた

Apache Cordovaをやってみた。
Cordovaは、モバイルアプリ(iOS, Androidなど)をクロスプラットフォームで開発できるフレームワークです。 HTML + CSS + JavaScriptで記述できるので、モバイルアプリの知識がなくてもWebアプリ開発者であればとっつきやすいと思います。
初めてなので"Hello World!"までやってみます。


##### Apache Cordovaとは？ * OSSのモバイルアプリ開発フレームワーク(ハイブリッドアプリ開発とも言われている) * HTML + CSS + JavaScriptでiOSやAndroidなどのアプリを開発できる * iOS用で書いたコードをAndroidで使用できる。(クロスプラットフォーム性) * JavaScriptでカメラにアクセスできるなどのデバイスAPIが用意されている * もともとはPhoneGapというプロダクト名であったが、Adobeが買収したことで、Apacheにソースコードが寄付されたらしい * ゲームのような高速な描画や計算には不向き * Webの仕組みでプリを開発できるので学習コストが少ない <br> Cordovaは、Webの仕組みで実装できるのが最大の魅力だと思います。 ネイティブのAndroidの開発は僕のような初心者には敷居が高くエミュレータも重たくてイライラするので、 Webの知識でサクッとアプリを開発していきたいと思います。 <br> 公式サイト[http://cordova.apache.org/](http://cordova.apache.org/) <br> ##### 開発環境 * Mac OS X * Cordova 3.5.0-0.2.7 <br> ##### 開発環境を構築する 早速、開発環境を構築してみる。 <br> #### node.jsをインストール Cordovaのインストールにはnpmを使うのでnode.jsをインストール。 <pre class="brush: bash"> $ brew install nodejs $ node -v v0.10.29 $ npm -v 1.5.0-alpha-4 </pre> <br> #### Cordovaをインストール。 <pre class="brush: bash"> $ sudo npm install -g cordova $ cordova -v 3.5.0-0.2.7 </pre> <br> #### Android SDKインストール <pre class="brush: bash"> $ brew install android # 環境に合わせて必要なパッケージをインストールしてください。 $ android update sdk </pre> <br> ##### hello_worldプロジェクトを作成する 開発環境が構築できたら、cordova createでプロジェクトを作成する。 <br> #### cordova create <pre class="brush: bash"> $ cordova create hello_world com.example.hello_world HelloWorld </pre> cordova createで、hello_worldというディレクトリを作成して、HelloWorldというプロジェクトを作ります。 com.example.hello_worldは、アプリのドメイン名です。 <br> #### プラットフォーム追加 プロジェクトを追加した後は、プラットフォームを追加してやる必要があります。 <pre class="brush: bash"> $ cd hello_world $ cordova platform add ios $ cordova platform add android </pre> <br> cordova platform add androidで、antをインストールしろと言われた。 <pre class="brush: bash"> Error: ERROR : executing command 'ant', make sure you have ant installed and added to your path. $ brew install ant $ ant -version Apache Ant(TM) version 1.9.4 compiled on April 29 2014 </pre> <br> Android API 20を入れてるけど、API 19も入れろと言われる。 もう一回 cordova platform add androidしてようやく通った。 <pre class="brush: bash"> $ cordova platform add android Error: Please install Android target 19 (the Android newest SDK). Make sure you have the latest Android tools installed as well. Run "android" from your command-line to install/update any missing SDKs or tools. </pre> <br> addしたプラットフォームと使用できるプラットフォームの一覧 amazon-fireos、blackberry10、firefoxosも追加できる。 <pre class="brush: bash"> $ cordova platform ls Installed platforms: android 3.5.1, ios 3.5.0 Available platforms: amazon-fireos, blackberry10, firefoxos </pre> <br> ##### エミュレータで起動確認 プロジェクトが出来上がり動作可能状態になったので、エミュレータで確認してみる。 <br> #### iOS ios-simが入ってなければインストールする。 <pre class="brush: bash"> $ brew install ios-sim $ cordova emulate ios </pre> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsFN_-7Y1UUwJcjGXYLwaPijBzn0wQOBhAf4-8EJ6347YwlJ5u5ShovHucput1zGNSkBatRXSyX0-2EEUIVIsoO7eGm94YxVc8vG1Zgkp-DSpTe5rpO9Qxd09ebwOr4p5tAfAexClkDpd/s600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-14+22.29.51.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsFN_-7Y1UUwJcjGXYLwaPijBzn0wQOBhAf4-8EJ6347YwlJ5u5ShovHucput1zGNSkBatRXSyX0-2EEUIVIsoO7eGm94YxVc8vG1Zgkp-DSpTe5rpO9Qxd09ebwOr4p5tAfAexClkDpd/s600/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88+2014-09-14+22.29.51.png" /></a> <br> #### Android <pre class="brush: bash"> $ android avd $ cordova emulate android </pre> Androidのエミュレータを起動すると以下のエラーが出た。 <b>unfortunately, Hello World has stopped</b> Androidあんまり詳しくないし、Cordova触ったばっかりだからかなり悩んだのだが、 teratailというエンジニアの質問掲示板SNSで質問してみたら親切な方が教えてくれた。 <br> 原因は、TargetSDKのバージョンが実装とエミュレータとでミスマッチしていたため。 hello_world/platforms/android/AndroidManifest.xmlのtargetSdkVersionの設定にエミュレータを合わせる必要がある。 targetSdkVersion=Lとなっていたところ、エミュレータはAPIレベル20になってました。 targetSdkVersionを20(エミュレータと合わせる)にするか、エミュレータのAPIレベルをLにすればOK。 <br> 最新のSDKだとエミュレータやCordovaが対応しきれていない可能性もあるので注意が必要です。 設定してあげたらエミュレータが立ち上がるはず！ <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW29l0TWcDNdC2LodJ6BZUKCUEMxcQnGdwM6IdmMRMrQqfAtpeAVdNhQfde8jspGLdiS3Zi7bdLCxKi9dmDjNdIDOl5T8R7xBb-tOSfCO8MKRjgkvFab5m-Ab9X6OmbSHSLCphArIDnjq-/s600/cordova_android.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW29l0TWcDNdC2LodJ6BZUKCUEMxcQnGdwM6IdmMRMrQqfAtpeAVdNhQfde8jspGLdiS3Zi7bdLCxKi9dmDjNdIDOl5T8R7xBb-tOSfCO8MKRjgkvFab5m-Ab9X6OmbSHSLCphArIDnjq-/s600/cordova_android.png" /></a> 早く、スマートフォンの開発もガリガリできるようになりたい。。。 <br> #### localhost ブラウザ(localhost)からも起動確認できます。 見た目の確認はエミュレータで確認するべきですが、振る舞いの確認は、ブラウザでやったほうが早いと思います。 <pre class="brush: bash"> $ cordova serve </pre> <br> http://localhost:8000　で確認できる。 <br> ##### Hello Worldする hello_world/www/index.htmlを編集して、HTMLと同じ要領で記述する。 h1タグの直下にh2タグを作ってHello World!してみる。 <pre class="brush: html"> <h1>Apache Cordova</h1> <h2>Hello World!</h2> </pre> <br> ##### まとめ 実際にやってみて思ったことを書く。 HTMLで簡単に書くことはできそうだけど、AndroidやiOSの知識も必須なので、 スマートフォン開発をしたことがない人が初めて触るには敷居が高そう。 スマートフォン開発経験者が、Cordovaの開発環境を整えてくれて、 スマートフォン開発経験のない人たちはコーディングに専念できる環境なら使えそうですね。 <br> あとは、新しいツールなのでバージョンの不整合やセキュリティに気をつける必要がある。 個人的には開発してて楽しいのでもうちょっとやってみたいと思う。 <br> ##### 最近読んだ本