読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Azure と Angular と Wercker CI とか

YEOMANでハイブリット開発

YEOMAN PhoneGap Cordova

HTML5かネイティブかという話でいいとこ取りのハイブリットアプリケーションですが、エンタープライズな現場の方から色々お話をお聞きすると、ハイブリットには行かずHTML5かネイティブに寄るようです(HTML5というよりWebという表現が正しいです)。

ハイブリットアプリケーションが流行っているので、YEOMANのジェネレータにもあるんじゃないかな?ということで探し出し味見します。 YEOMANに期待するところは何と言っても

  • 環境構築の煩わしさから解放
  • スムーズな開発初動
  • 多様なツール

ですので!

PhoneGap?Cordova?

PhoneGapというのはNitobiという会社が開発したハイブリットアプリケーションの開発環境および実行環境のことです。現在PhoneGapが対象とするプラットフォームは

PhoneGap API Documentation

f:id:albatrosary:20140611115655p:plain

とあります。Nitobi社は2011年にAdobeに買収され、PhoneGapはApache Software Foundationへ取り込まれApache Cordovaになったという経緯があります。そしてPhoneGapはAdobeの商標となり,PhoneGapという名称はAdobe以外使用できなくなりました。

このハイブリット構造はHTML5JavaScriptで開発を行い周りをネイティブコードで取り囲むような構成をとります。

 

YEOMANジェネレータ

cordovaというキーワードでもphonegapというキーワードでもジェネレータが存在します。今回はPhoneGapを使っていきます。関係ないですが6/10にYEOMANのサイトがリニューアルされてます。

f:id:albatrosary:20140611111350p:plain

 

f:id:albatrosary:20140611111626p:plain

環境構築

$ npm install -g generator-phonegap
$ mkdir my-phonegap-project && cd $_
$ yo phonegap

f:id:albatrosary:20140611112232p:plain

プロジェクトの名前、パッケージ、対象となるビルド環境を聞かれますのでそれぞれ適切に選び実行します。


config.xml                                          Phonegap configuration file
bower.json                                          
Gruntfile.js                                        
.gitignore
.bowerrc
app/                                                Application sources
    index.html                                      Auto-generated application entry html
    styles/                                         
    scripts/
    images/
    res/                                        
dist/                                               Processed source data from the app folder
phonegap/                                           A project structure generated by [phonegap CLI](https://npmjs.org/package/phonegap)
    www/                                            
    platforms/                                      Final output folder for platform specific builds
test/                                               

エミュレータでの起動

iOSAndroid用にビルドします。ビルドが完了したらプロジェクト内にある「phonegap」フォルダーに移動しcordovaを実行します。

$ grunt platform-build
$ cd phonegap
$ cordova emulate ios -d
$ cordova emulate android -d

実行結果は次の通り

f:id:albatrosary:20140611113822p:plain

f:id:albatrosary:20140611113844p:plain

実機(スマートデバイス)への取り込み

(1) USBデバッグモードでMACにUSB接続

(2) スマートデバイスの開発者向けオプション設定

[設定|開発者向けオプション]で[USB デバッグ]オプションをオンにします。
Android 4.2 以降では、[開発者向けオプション]がデフォルトで非表示になっています。以下の手順に従います。
1. デバイス上で、[設定|<デバイス種別>情報]を開きます。
2. 下部の[ビルド番号]を 7 回タップすると、[設定|開発者向けオプション]が使用可能になります。
3. その後、[USB デバッグ]オプションをオンにします。
ヒント: また、[スリープしない]オプションをオンにして、USB ポートにプラグインされている間に Android デバイスがスリープ状態にならないようにするとよいでしょう。

(3) アプリケーションの実機転送

$ cordova run android --device

最後に

YEOMANジェネレータを使ってますので環境構築はあまり悩まなかったですが、当然Androidのビルド環境を作るのはやや面倒でした。MACを使っていてXcodeも入ってますのでiOSについては何もすることは無かったです。