YeomanでChrome Apps for Mobileを作ってみるお


全国のYeomanの服をきて街をさっそうと歩きたい皆様こんにちは大橋です。

一部で話題が起こってるChrome Apps for Mobileですが試しましたか？
Chrome Apps作るついでにAndroid向けのも作れるなら素敵すぎますよね。
でもまだChrome Apps for Desktop自体作ったことが無い方も非常に多い気がするので今回はYeomanを使ってChrome Appsのひな形を作り、そこからChrome Apps for Mobileのアプリケーションを作ってみたいと思います。

なお、以下の記事を参考にさせていただきました。

[Chrome Apps for mobileの開発方法(天使やカイザーと呼ばれて)](
http://www.eisbahn.jp/yoichiro/2014/02/chrome-apps-for-mobile%E3%81%AE%E9%96%8B%E7%99%BA%E6%96%B9%E6%B3%95.html)


# どうなる？

最終的にYeomanでChrome Apps for Mobileの開発が開始できるようになります。

# 環境

以下初期状態です。

* PC : Mac OSX 10.9.1
* Node : v0.10.16
* Android周りの開発環境
    * 4.4.2が入ってました。
* Ant : 1.9.3
    * 最初からは入ってなかったのでbrew経由で入れた。
* Yeoman : 1.1.2
    * npm経由で。

# 準備

## Yeomanのchrome apps generatorを入れる

Chrome Appsのひな形を作るYeoman Generator、`generator-chromeapp`を入れます。

最近のYeomanは`yo`だけコマンドを打つとインタラクティブにやれて素敵です。
`yo`コマンドを打つと、次にやることを効かれるので`Install a generator`を選択してください。
もろもろ聞かれる`generator-chromeapp`を探してインストールして下さい。

```bash
$ yo

[?] What would you like to do? Install a generator
[?] Search NPM for generators: chrome
[?] Here's what I found. Install one: generator-chromeapp
```

## ccaコマンドラインツールを入れる

Chrome AppsをAndroidやiOSのプロジェクト化する`cca`をnpm経由で入れます。

```bash
$ npm install -g cca
```

# プロジェクトの作成

yeoman経由でChrome Appsのひな形を作ります。
まず適当なプロジェクト用のディレクトリを切ります。

```bash
$ mkdir my-chrome-apps
$ cd my-chrome-apps
```

作成したらChrome Apps開発プロジェクトのひな形を作ります。

```bash
$ yo
[?] What would you like to do? Run the Chromeapp generator (0.2.5)

Make sure you're in the directory you want to scaffold into.
This generator can also be run with: yo chromeapp
[?] What would you like to call this application? my chrome apps
[?] How would you like to describe this application? My Chrome App
   create package.json
   create bower.json
   create .bowerrc
 ~以降続く~
```

途中Chrome Appsで利用する名称や、パーミッションなどが聞かれますが、
任意で答えて下さい。

すべて作り終わると、以下の感じの構成になります。

```
my-chrome-apps
├── Gruntfile.js
├── app
│   ├── _locales
│   │   └── en
│   ├── bower_components
│   ├── images
│   │   ├── icon-128.png
│   │   └── icon-16.png
│   ├── index.html
│   ├── manifest.json
│   ├── scripts
│   │   ├── chromereload.js
│   │   ├── index.js
│   │   └── main.js
│   └── styles
│       └── main.css
├── bower.json
├── node_modules
│   └── (パッケージ)
├── package.json
└── test
    ├── app
    │   └── manifest.json
    ├── bower.json
    ├── bower_components
    │   ├── chai
    │   └── mocha
    ├── index.html
    └── spec
        └── test.js
```

# 一旦Chrome Apps for Desktopで動かしてみる。

せっかくChrome Appsを作ったのでChrome上で動かしてみます。

Chromeを開いて設定から拡張機能ページを開いて下さい(chrome://extensions)

拡張機能ページが開いたら「パッケージ化されていない拡張機能を読み込む」を選択します。
ディレクトリの選択ダイアログが表示されるので、
先ほど作成したプロジェクトの`app`ディレクトリを選択して下さい。

以下のようにChrome Appが取り込まれていれば成功しています。

![スクリーンショット 2014-02-06 10.13.03.png](https://qiita-image-store.s3.amazonaws.com/0/2965/932a1504-ff8d-ac2c-a37e-5be88e39b958.png "スクリーンショット 2014-02-06 10.13.03.png")

 「起動」リンクを押下するとChrome Appsが起動します。

![スクリーンショット 2014-02-06 10.16.00.png](https://qiita-image-store.s3.amazonaws.com/0/2965/e4409e0e-19c6-b1b2-99a9-c44002c54d29.png "スクリーンショット 2014-02-06 10.16.00.png")

# Android用のプロジェクトを作成する。

Chrome Appが作成できたのを確認したら、これを`cca`を使ってAndroidで動くプロジェクトに変換したいと思います。
以下のコマンドで`MyAndroidApp`ディレクトリが作成され、その中にAndroidプロジェクトが作成されます。`app/manifest.json`は上記で作ったプロジェクトの`manifest.json`を指して下さい。

```bash
$ cca create MyAndroidApp --link-to=app/manifest.json
```

# Android用プロジェクトを起動する。

## エミュレータで起動

エミュレータで起動する場合は`cca emulate android`コマンドを使います。

```bash
$ cd MyAndroidApp
$ cca emulate android
```

これでAndroidエミュレータが起動し、対象のChrome Appsが確認できます。
なお当然AVDを作ってないとエラーが出ます。

![スクリーンショット 2014-02-06 10.34.15.png](https://qiita-image-store.s3.amazonaws.com/0/2965/89d81f83-1a0a-2403-3939-5a86bc735f8d.png "スクリーンショット 2014-02-06 10.34.15.png")


## 実機で起動

実機で起動する場合は、実機を接続し`cca run android`を叩きます。

```bash
$ cd MyAndroidApp
$ cca run android
```

これで実機にアプリケーションが配置され、実行可能になります。

![2014-02-06 10.32.43.png](https://qiita-image-store.s3.amazonaws.com/0/2965/45836c19-0567-cd4b-8692-354568c61cc7.png "2014-02-06 10.32.43.png")


# アプリケーションを更新したら？

`cca prepare`で更新されるようですがまだよくわかってないです。

# まとめ

yeomanでAndroidやiOSのアプリケーションが開発可能になったと言っても過言ではない状況ですね
もう少し追っていきたいと思います。