Firefox OS Yeoman Generator の使い方 [Firefox OS]

Firefox OS ハッカソンがあるので、前回も使った Yeoman の Firefox OS 用ジェネレータの使い方をまとめてみた。

(参考) 関東 Firefox OS 勉強会 5th の酒巻さんによる Firefox OS Generator の紹介
『フロントエンド技術社だってモバイル開発がしたいっ！』

Firefox OS Generator は３種類ある
使うのは generator-firefoxos

以前に使ったときに同じような名前のジェネレータがあって紛らわしいなーと思っていたので、改めて検索してみたら３種類あった。

$ npm search yeoman-generator "firefox os"
NAME                  DESCRIPTION                             AUTHOR      DATE              VERSION KEYWORDS
generator-firefox-os  Yeoman Generator for Firefox OS         =zenorocha  2013-08-27 03:03  0.1.4  yeoman-generator firefoxos firefox-os firefox os
generator-firefoxos   A Yeoman generator for Firefox OS apps  =ladybenko  2014-01-07 11:45  0.1.5  yeoman-generator firefoxos
generator-fxos        Firefox OS Generator for grunt-fxos     =vladikoff  2013-06-27 19:15  0.1.1  yeoman-generator generator-yeoman

このうち、generator-firefoxos が本命で、以下の２つはハズレ。

generator-firefoxos の使い方

GitHub

https://github.com/pdi-innovation/generator-firefoxos

Yeoman 本体のインストール

$ sudo npm install -g yo

generator-firefoxos のインストール

$ sudo npm install -g generator-firefoxos

プロジェクトの作成

$ mkdir myapp
$ cd myapp
$ yo firefoxos

作成時にアプリ名や GitHub アカウントの情報、Gaia の Building Blocks や Backbone を入れるか聞かれる。

実機へのインストール

$ grunt push
$ grunt reset
  • なお、Firefox OS v1.2, v1.3 (Geeksphone Peak) では push が固まってしまった。(v1.1 では成功)
  • パッケージファイル (application.zip) のデバイスへの push は成功していた。
  • node-firefoxos-cli の remote_debugger/index.js が送っている Remote Debug コマンドに対して応答がない。
    • {“to”: “root”, “type”: “listTabs”} を送っているが応答がない。
    • このコマンドは西村さんのスライドで "デバッガの提供する機能一覧の要求" であると説明されている。
  • App Manager に対応した際に何か変わったのかも？(App Manager のサポートは Firefox OS 1.2 以降)

シミュレータへのインストール

以下のコマンドで、build/ ディレクトリにシミュレータにインストール可能なアウトプットがコピーされる。

$ grunt release

App Manager なら「パッケージアプリを追加」("Add Packaged App") で build/ ディレクトリを指定することでインストールできる。

ブラウザ上での開発

以下のコマンドでローカルにサーバを起動してブラウザでアクセスする。

$ grunt server
  • ブラウザで http://localhost:9000 を開く。
  • Firefox のレスポンシブデザインビュー (Mac OS なら ⌥⌘M) を使うとよい。Keon なら画面サイズは 320x480 となる。
  • grunt watch も走るので Sass の変更もリアルタイムで反映される。

JSHint

  • grunt push や grunt server では自動的に JSHint のチェックが入る。
  • 単体では grunt jshint で実行。
  • .jshintrc から設定を変えられる。(参考: http://www.jshint.com/docs/options/)

Sass (SCSS)

  • デフォルトでは Sass が使われている。
  • SCSS を使いたい場合は app/styles/main.sass を main.scss に置き換える。(もちろん中身も変更)

テスト

  • Mocha (テストフレームワーク), Sinon (モックライブラリ), Chai (アサーションライブラリ) が使われている。
  • test/specs/ にテストを追加する。新たに追加したファイルは test/index.html 内の RequireJS のリストにも反映する。
  • テストの実行 (PhantomJS)
    • $ grunt test
  • テストの実行 (ブラウザ)
    • 以下のコマンドを実行し、Firefox Nightly で http://localhost:9002 を開く。
    • $ grunt server:test

その他

Published: January 18 2014

  • category: