2014年7月5日土曜日

YeomanでChromeアプリを作る手順

YeomanはモダンWebアプリの雛形を自動生成してくれる便利なツールですが、YeomanをインストールするとGruntBowerも自動的にインストールされて、プロジェクト管理自体が非常に楽になります。Yeoman + Grunt + Bower は、JavaでいうところのビルドツールMavenのような存在です。
これからYeomanをインストールして実際にChromeアプリを作るところまでの手順を紹介したいと思います。
※ここではnode.jsとnpmが事前にインストールされていることを前提に話を進めます。

Yeomanをインストール
$sudo npm install -g yo
依存する Grunt と Bower も入ります。 (npm 1.2.10 以上の場合)

Yeomanのインストールに失敗したら

もしあなたがnodeではなくnodejsの方を使っていれば、途中でこんなエラーが出てyeomanのインストールに失敗するかもしれません。

...
> yo@1.1.2 postinstall /usr/local/lib/node_modules/yo
> node ./scripts/doctor

sh: 1: node: not found
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian
...

インストールに失敗すると yo コマンドを打った時に yo: command not found が発生します。

そんなときは、
$ sudo ln -s /usr/bin/nodejs /usr/bin/node
でnodejsへのシンボリックリンクを張ってから再度yoemanをインストールしてみましょう。

雛形Generatorをインストール
$ sudo npm install -g generator-chromeapp
Yeomanでアプリの雛形を生成するためには対応するGeneratorをインストールする必要があります。
ここではChromeアプリのGeneratorをインストールしてみます。
※公式Generator一覧はYeoman Official Generatorsで確認できます。

プロジェクトを作成してビルドするまでの流れ

まずは適当にプロジェクト用フォルダを作って、
$ mkdir my-yo-project
$ cd my-yo-project

Chromeアプリのひな形を生成
$ yo chromeapp
質問に答えていくだけでChromeアプリのひな形が完成します。

アプリをデバッグ
$ grunt debug
この状態でいつものChromeアプリ開発のようにChromeブラウザの 設定 > ツール > 拡張機能 から パッケージ化されていない拡張機能を読み込む...を開いて、プロジェクトのappフォルダをルートとして開くとChromeにアプリが登録されます。登録したアプリを起動した状態でappフォルダ内のソースを修正すると変更が自動的にアプリに反映されます。

ビルドを実行
$ grunt build
jsコードの最適化(難読化やファイル結合など)が実行され、packageフォルダ内にzip化されたアプリが生成されます。このzipファイルはそのままChrome Web Storeへ公開することができます。

Yeomanの使い方は以上です。


おまけ:Bowerの使い方

Bowerはライブラリ管理ツールです。
普段の開発でプロジェクトにjsライブラリを追加する際には、サイトからライブラリ本体や依存ライブラリをダウンロードしてきてlibフォルダなどに設置し、htmlファイルにscriptタグで追加するという手順になりますが、Bowerはそのような面倒なステップを省略してくれます。

ライブラリを検索
$ bower search ライブラリ名の一部

ライブラリをインストール
$ bowser install ライブラリ名#バージョン

インストールされたライブラリ一覧を確認
$ bower list

ライブラリを最新バージョンにアップデート
$ bower update ライブラリ名

ライブラリをインポート

※現時点ではライブラリのインポートに対応していないGeneratorが多いようですが一応紹介しておきます。

index.htmlに追加
$ grunt bowerInstall
RequireJSに追加
$ grunt bower

0 件のコメント:

コメントを投稿