YEOMAN Advent Calendar 12日目：generator-ionic を紹介します

ジェネレータ generator-ionic を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月12日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

ionic は THML5 Experts.jp でも取り上げられたハイブリットアプリケーションを作りためのものです。

キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！ | HTML5Experts.jp

ionic アプリケーションをつくるためのジェネレータがありますので今回はこれを味見します。

インストールから実行まで

準備

今回はハイブリットアプリケーションですので Cordova や Phonegap の準備が必要です

$ npm install -g cordova
$ npm install -g phonegap

これとは別に

$ npm install -g ios-sim

等インストールする必要のあるモジュールを聞いてきます（エラーを出力します）ので指示通りインストールします。ここからいつもの様にインストールです。

インストール

いつもの様にインストールします

$ npm install -g generator-ionic
$ mkdir ionic && cd $_
$ yo ionic

yo を実行するとオプションを聞いてきます

$ yo ionic
    _             _
   (_)           (_)
    _  ___  _ __  _  ___
   | |/ _ \| '_ \| |/ __|
   | | (_) | | | | | (__
   |_|\___/|_| |_|_|\___|

[?] Would you like to use Sass with Compass (requires Ruby)? No
Created a new Cordova project with name "Ionic" and id "com.example.Ionic"
[?] Which Cordova plugins would you like to include? (Press <space> to select)
❯⬢ org.apache.cordova.console
 ⬢ org.apache.cordova.device
 ⬡ org.apache.cordova.network-information
 ⬡ org.apache.cordova.splashscreen
 ⬡ org.apache.cordova.battery-status
 ⬡ org.apache.cordova.statusbar
 ⬡ org.apache.cordova.device-motion
 ⬡ org.apache.cordova.device-orientation
 ⬡ org.apache.cordova.geolocation
 ⬡ org.apache.cordova.camera
 ⬡ org.apache.cordova.media-capture
 ⬡ org.apache.cordova.media
 ⬡ org.apache.cordova.file
 ⬡ org.apache.cordova.file-transfer
 ⬡ org.apache.cordova.dialogs
 ⬡ org.apache.cordova.vibration
 ⬡ org.apache.cordova.contacts
 ⬡ org.apache.cordova.inappbrowser
[?] Which starter template [T] or example app [A] would you like to use? 
  [T] Blank 
  [T] Tabs 
  [T] Side Menu 
  [T] Maps 
❯ [T] User Intro 
  [A] Pets 

プラットフォームとして ios 、 android を利用するかを決めます。今回は ios のみとします。

$ grunt platform:add:ios

エミュレータでの結果を確認しますので

$ grunt emulate:ios --livereload

実行

エミュレータが起動します。

ちなみに

 Which starter template [T] or example app [A] would you like to use? 

で MAP を選んだ場合は

オプションを変えることで色々なテンプレートが作成できます。

最後に

YEOMANジェネレータを使うと比較的簡単にハイブリットアプリ開発もできるのではと思います。もっともハイブリットアプリの込み入った部分の話はジェネレータでどうにかなるものではありませんが、スカッフォールディングとしての使いドコロはあるのかと思います。