generator-graybullet-cordova を使うと簡単にアプリを作成できます

generator-graybullet-cordova には Apache Cordova で少々不満に思っている部分を少しずつ追加していっています。そのうちの一つが、プロジェクトごとに違うバージョンの Cordova を使うだったりします。

Cordova でアプリをビルドすると、アプリファイルがどこにできたかよくわからないことってないですか? まあ、そのうち覚えてしまうのですが、プラットフォームごとに場所が違いますのでちょっと面倒です。おかげで、Jenkins などで成果物を固めるときに不便です。generator-graybullet-cordova では、ビルド時にアプリファイルを dist ディレクトリにまとめることができます。

実際にやってみます。まずはプロジェクトを作成します。

$ mkdir project1 && cd $_
$ yo graybullet-cordova
 
     _-----_
    |       |    .--------------------------.
    |--(o)--|    |   Welcome to the Apache  |
   `---------´   |    Cordova generator!    |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
 
? What is the name of Apache Cordova App? HelloCordova
? What is the ID of Apache Cordova App? io.cordova.hellocordova
? What app of the platform to be created? 
 ◉ ios
 ◉ android
 ◯ amazon-fireos
 ◯ blackberry10
 ◯ browser
❯◉ firefoxos

こんな感じで、ios/android/firefoxos プラットフォームを追加します。事前に Xcode や Android SDK のセットアップを済ませておきましょう。

残りの質問はそのままにします。

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |   Welcome to the Apache  |
   `---------´   |    Cordova generator!    |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
 
? What is the name of Apache Cordova App? HelloCordova
? What is the ID of Apache Cordova App? io.cordova.hellocordova
? What app of the platform to be created? ios, android, firefoxos
? Are you sure you want to add any plugins? Cordova Console Plugin, Cordova Device Plugin
 
     _-----_
    |       |    .--------------------------.
    |--(o)--|    |    Welcome to Yeoman,    |
   `---------´   |   ladies and gentlemen!  |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
 
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.
? What more would you like? Bootstrap

プロジェクトが作成されたら build タスクを実行します。

$ grunt build
...
** BUILD SUCCEEDED **
 
 
Running "cordova:package-files" (cordova) task
Copy to dist/android/CordovaApp-debug-unaligned.apk.
Copy to dist/android/CordovaApp-debug.apk.
Copy to dist/firefoxos/package.zip.
Copy to dist/firefoxos/www.
Copy to dist/ios/emulator/HelloCordova.app.
 
Done, without errors.
 
 
Execution Time (2015-01-22 13:48:25 UTC)
loading tasks         5.4s  ▇▇▇▇▇ 5%
concurrent:dist       4.3s  ▇▇▇▇ 4%
uglify:generated      4.3s  ▇▇▇▇ 4%
cordova:build     1m 39.8s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 86%
Total 1m 56s

最後の方で apk ファイルや app ディレクトリが dist ディレクトリにコピーされているのがわかると思います。Jenkins などでは dist ディレクトリを固めるだけで、とりあえず成果物になります。

また、これらのファイルは adb コマンドや ios-sim コマンドでエミュレーターで実行させることができます。

Android で実行します。

$ adb install -r dist/android/CordovaApp-debug.apk
$ adb shell am start -a android.intent.action.MAIN -n io.cordova.hellocordova/io.cordova.hellocordova.HelloCordova

iOS で実行します。

$ iso-sim launch dist/ios/emulator/HelloCordova.app --

iOS の場合はもう一つ機能があります。ipa ファイルを作ることができます。ipa ファイルを作るにはデバイスビルドを行ってください。

$ grunt build --cordova-platforms=ios --cordova-device=device
...
** BUILD SUCCEEDED **
 
 
Running "cordova:package-files" (cordova) task
Copy to dist/ios/device/HelloCordova.ipa.
 
Done, without errors.
 
 
Execution Time (2015-01-22 13:59:09 UTC)
loading tasks            4s  ▇▇▇▇▇▇▇▇▇▇▇ 11%
wiredep:app              1s  ▇▇▇ 3%
concurrent:dist        8.3s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 23%
uglify:generated       4.1s  ▇▇▇▇▇▇▇▇▇▇▇ 11%
cordova:build           16s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 45%
cordova:package-files  1.3s  ▇▇▇▇ 4%
Total 35.4s

見ての通り、dist/ios/device/HelloCordova.ipa ファイルが作られました。Cordova では ipa ファイルを作るためにいちいち Xcode を起動する必要がありますが、generator-graybullet-cordova ではその必要がありません。このファイルは ios-deploy コマンドで実機にインストールできるほか、TestFlight へアップロードすることもできます。--cordova-build=release 引数をつければリリースビルドを行い、配布証明書で署名された ipa ファイルが作られます。もちろんこのファイルは配布可能です。

この機能は grunt-cordova-ng プラグインによって package-files/package タスクとして提供されていますので、既存の Cordova プロジェクトでも使うことができます。詳しくは grunt-cordova-ng の README を読んでください。

一つ残念なことに、この機能は現在のところ、Android/iOS/FirefoxOS 専用です。なぜこの三つかというと、自分がこれしか持っていないからです...

ところで、dist ディレクトリ以下を見ると distribute というファイルがあります。ゴミに見えますが、こちらを使って、アプリの事後署名を行うことができます。また別の日に。

コメントを追加

Filtered HTML

  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 使用できるHTMLタグ: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img>
  • 次のタグを使用してソースコード構文をハイライトすることができます。: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby> The supported tag styles are: <foo>, [foo].
  • 行と段落は自動的に折り返されます。

Plain text

  • HTMLタグは利用できません。
  • ウェブページアドレスとメールアドレスは、自動的にハイパーリンクに変換されます。
  • 行と段落は自動的に折り返されます。
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
イメージ CAPTCHA
Enter the characters shown in the image.