YEOMAN Advent Calendar 19日目:generator-graybullet-cordova を紹介します

このブログエントリは YEOMAN Advent Calendar 2014 の 19 日目の記事、generator-graybullet-cordova の紹介です。18 日目の記事は yoheiMune さんの [フロントエンド] スキャフォールド機能を提供するYEOMANに入門するでした。

最近 C# を離れて Apache Cordova を使うようになりました。

Apache Cordova は HTML5 アプリを作るだけで、簡単に Android や iOS のアプリを作れるようになりますが、HTML5 アプリでは必須の JavaScript 圧縮などの機能がありません。逆に、YEOMANgenerator-webapp には HTML5 アプリを作るのに最低限の機能が含まれていますが、Cordova アプリは作れません。(generator-webapp や YEOMAN については、albatrosary さんの YEOMAN Advent Calendar 2日目:generator-webapp を紹介しますyoheiMune さんの YEOMAN Advent Calendar 2014 の 18 日目の記事に解説があります)

では、その二つを足しちゃって簡単に Cordova アプリを作れるようにしよう! というのを実現した YEOMAN generator の generator-graybullet-cordova をご紹介します。

まずはインストールです。インストール自体は他の YEOMAN generator と同様に簡単ですが、その前に Android SDK や Xcode をインストールして、Cordova アプリが作れる状態にしてください。SDK のインストールは Apache Cordova の Platform Guidesが参考になります。

ではインストールしましょう!

npm install -g generator-graybullet-cordova

プロジェクトを作るのも簡単です。YEOMAN に慣れている人ならすぐでしょう。

mkdir cordova1
cd cordova1
yo graybullet-cordova

あとは質問に答えていくだけです。まずはアプリ名を聞かれます。適当に答えておきましょう。

     _-----_
    |       |    .--------------------------.
    |--(o)--|    |   Welcome to the Apache  |
   `---------´   |    Cordova generator!    |
    ( _´U`_ )    '--------------------------'
    /___A___\    
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 
 
? What is the name of Apache Cordova App? (HelloCordova) 

次にアプリの ID を聞かれます。こちらも適当でよいでしょう。(公開用のアプリではきちんとしたものを設定してください)

? What is the ID of Apache Cordova App? (io.cordova.hellocordova) 

アプリのプラットフォームを聞いてきます。OS X では iOS が、Windows では Windows Phone も表示されます。

? What app of the platform to be created? (Press <space> to select)
❯◉ android
 ◯ amazon-fireos
 ◯ blackberry10
 ◯ browser
 ◯ firefoxos
 ◯ ubuntu

プラットフォームで注意することは、事前に SDK をインストールしておく必要があるということです。

インストールするプラグインを聞いてきます。多分、よく使うであろう二つのプラグインは予め有効になっています。

? Are you sure you want to add any plugins? (Press <space> to select)
❯◉ Cordova Console Plugin
 ◉ Cordova Device Plugin
 ◯ Cordova Battery Plugin
 ◯ Cordova Camera Plugin
 ◯ Cordova Contacts Plugin
 ◯ Cordova Device Motion Plugin
 ◯ Cordova Device Orientation Plugin
(Move up and down to reveal more choices)

ここまでが Apache Cordova の設定になります。次からは generator-webapp の番です。generator-webapp を使ったことがある人には見たことがある画面になります。

     _-----_
    |       |    .--------------------------.
    |--(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? (Press <space> to select)
❯◉ Bootstrap
 ◯ Sass
 ◯ Modernizr

使うモジュールを選択したらプロジェクトが作成されます。

grunt タスクは generator-webapp とほぼ同じで、YEOMAN Advent Calendar 18 日目で紹介されている何もなし・serve・test タスクが利用できます。

grunt コマンドを実行すると、cordova/platforms/android/ant-build ディレクトリ以下に apk ファイルが作成されます。(その他のプラットフォームでアプリがどこに作成されるかは Apache Cordova のマニュアルを読んでください)

もし、エミュレーターでアプリを実行したい場合は emulate タスクを使います。Android エミュレーターは起動に時間がかかりますので、事前に起動しておいたほうがよいでしょう。

grunt emulate

[inline:gruntemulate.jpg=grunt emulate のスクリーンショット]

実機でアプリを実行したい場合は run タスクを使います。事前に実機を USB 接続しておいてください。

grunt run

このように、generator-webapp の使い方を覚えるだけで、簡単に Cordova アプリが作れるようになります。

おまけ

ビルドを Android のみにしたいとか、リリースビルドをしたいというのにも対応しています。詳しくは generator-graybullet-cordovagrunt-cordova-ng の使い方を読んでください。

また、これらの設定は環境変数にも設定できます。チーム開発で Windows/Linux の人は Android のみビルドを、OS X の人は Android/iOS の両方をビルドと行ったこともできます。

最後に

本日は generator-graybullet-cordova の紹介でした。自分のように Apache Cordova と YEOMAN を同時に使えたらなあとお悩みの方にはうってつけだと思います。他にも Cordova アプリが作れる YEOMAN Generator がありますが、generator-graybullet-cordova は generator-webapp をサブジェネレーターに使っている点が特徴です。紹介したように generator-webapp に慣れている人はすぐに使えるようになるでしょう。

今後は機能強化の他に、generator-backbone や generator-angular にも対応させていこうと思います。

さて、明日は 466548 さんの記事です。何を書かれるのか楽しみです!

コメントを追加

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.