ChromeアプリをAngularJSで書くまでの手順


# 前提

- YeomanのChromeアプリ雛型を使います。
	- これ：https://github.com/yeoman/generator-chromeapp
- 開発環境は Mac OS です。
	- Yeomanの環境がなければ次のように構築してください。

		```
		# npm install -g yo grunt-cli bower
		```

		- 参考：[Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築](http://qiita.com/hkusu/items/7d748b55ba73cc8a3675)
- 今回はまず動かすところまで。

# 手順①：Chromeアプリ雛型の作成

- （まだインストールしてなければ）Chromeアプリの雛型ジェネレータをインストール

```
# npm install -g generator-chromeapp
```

- 雛型ジェネレータを実行

```
$ mkdir chrome-test
$ cd chrome-test
$ yo chromeapp
```

- デフォルトのまま進行
	- 実際は色々パーミッションを設定する必要があるが、後でも変更できるので今回はスルー（全てそのまま[ENTER]キー）

		![スクリーンショット 2014-04-29 23.25.57.png](https://qiita-image-store.s3.amazonaws.com/0/35733/10764ad2-e554-2526-c16b-5ffd92b94fb8.png "スクリーンショット 2014-04-29 23.25.57.png")
		![スクリーンショット 2014-04-29 23.26.36.png](https://qiita-image-store.s3.amazonaws.com/0/35733/ec9775d5-9b11-5f08-14db-1a8cceaf0e77.png "スクリーンショット 2014-04-29 23.26.36.png")
		![スクリーンショット 2014-04-29 23.27.28.png](https://qiita-image-store.s3.amazonaws.com/0/35733/cc672e74-32cb-933c-0083-3adbcb0bdb9d.png "スクリーンショット 2014-04-29 23.27.28.png")
		![スクリーンショット 2014-04-29 23.27.42.png](https://qiita-image-store.s3.amazonaws.com/0/35733/fc176d02-65ca-0651-915c-de5d67e87819.png "スクリーンショット 2014-04-29 23.27.42.png")

- 設定したパーミッションの情報は `app/manifest.json` に書かれてる

	```json:app/manifest.json
	{
	  	"name": "__MSG_appName__",
	  	"description": "__MSG_appDescription__",
	  	"version": "1",
	  	"manifest_version": 2,
	  	"default_locale": "en",
	  	"permissions": [],
	  	"icons": {
	  		"16": "images/icon-16.png",
	  		"128": "images/icon-128.png"
	  	},
	  	"app": {
	  		"background": {
	  			"scripts": [
	  				"scripts/main.js",
	  				"scripts/chromereload.js"
	  			]
	  		}
	  	}
	  }
	```

	> 補足：後からパーミッションを変更したければ、
	>
	> ```
	> $ yo chromeapp:permission
	> ```

- 一応、これで最低限は動くはずなので、Chromeで確認してみる。Chromeの拡張機能メニューを開き、

	![スクリーンショット 2014-04-29 23.47.17.png](https://qiita-image-store.s3.amazonaws.com/0/35733/224e0c02-6c9f-5ebc-126b-dd9f6a6be2f9.png "スクリーンショット 2014-04-29 23.47.17.png")

- 雛型の `app` ディレクトリを選択

	![スクリーンショット 2014-04-29 23.49.01.png](https://qiita-image-store.s3.amazonaws.com/0/35733/3b717bf6-9ada-5697-be14-16acdcde52e7.png "スクリーンショット 2014-04-29 23.49.01.png")

- 先ほどの雛型のChromeアプリが読み込まれるので、

	![スクリーンショット 2014-04-29 23.49.28.png](https://qiita-image-store.s3.amazonaws.com/0/35733/d552055c-76d7-f637-1162-bd622ad4c01f.png "スクリーンショット 2014-04-29 23.49.28.png")

- 起動する

	![スクリーンショット 2014-04-29 23.50.50.png](https://qiita-image-store.s3.amazonaws.com/0/35733/41a951ce-d16c-a81f-a2d1-a5bafe0d0890.png "スクリーンショット 2014-04-29 23.50.50.png")

- この時点で、Macのアプリ一覧にも追加されている。

	![スクリーンショット 2014-04-30 0.04.24.png](https://qiita-image-store.s3.amazonaws.com/0/35733/880d314f-e0fd-5bc5-870c-c90ee1b20fef.png "スクリーンショット 2014-04-30 0.04.24.png")

- 以下はメモ。

	> - Chromoアプリとして動作確認（ファイルの変更を監視＆反映してくれる）
	>
	>     ```
	>     $ grunt debug
	>     ```
	> 
	> - 上記を通常のブラウザで動作確認する場合
	>
	>     ```
	>     $ grunt debug:server
	>     ```
	> 
	> - 本番向けのミニファイされたソースの作成
	> 
	>     ```
	>     $ grunt build
	>     ```
	>     すると `dist` ディレクトリにファイルが作成される 
	> 
	> - Chromeでの配布用パッケージの作成
	> 
	>     ![スクリーンショット 2014-04-29 23.47.17 のコピー.png](https://qiita-image-store.s3.amazonaws.com/0/35733/5f7912b5-647a-12e3-007f-d1ba54228c18.png "スクリーンショット 2014-04-29 23.47.17 のコピー.png")
	> 
	> - ロゴ画像は `app/manifest.json` で定義されているので変えたければ変える

# 手順②：Chromeアプリ雛型にAngularJS組み込み

- Bower で AngularJS をインストール

	```
	$ bower install angular --save
	```

- 本当は AngularJS を MVC？の構成にしたいところだが、今回は省略。`app/index.html` を編集

	```diff:app/index.html
	<!doctype html>
	-<html>
	+<html ng-app ng-csp>
	    <head>
	        <meta charset="utf-8">
	        <title>chrome test</title>
	+        <link rel="stylesheet" href="bower_components/angular/angular-csp.css">
	        <!-- build:css styles/main.css -->
	        <link rel="stylesheet" href="styles/main.css">
	        <!-- endbuild -->
	+        <script src="bower_components/angular/angular.js"></script>
	    </head>
	    <body>
	        <h1>'Allo</h1>
	
	+        <div ng-controller="TestCtrl">
	+            {{sample}}
	+        </div>
	
	        <!-- build:js scripts/index.js -->
	        <script src="scripts/index.js"></script>
	        <!-- endbuild -->
	    </body>
	</html>
	```

- `app/scripts/index.js` を編集

	```diff:app/scripts/index.js
	'use strict';
	document.addEventListener('DOMContentLoaded', function() {
	    var h1 = document.getElementsByTagName('h1');
	    if (h1.length > 0) {
	        h1[0].innerText = h1[0].innerText + ' \'Allo';
	    }
	}, false);
	
	+function TestCtrl($scope){
	+    $scope.sample = "こんにちは世界！";
	+};
	```

- 結果

	![スクリーンショット 2014-04-30 1.13.24.png](https://qiita-image-store.s3.amazonaws.com/0/35733/12fe3a5c-57f9-3a4d-7075-34e5db1527a8.png "スクリーンショット 2014-04-30 1.13.24.png")

- ポイント
	- `index.html` に `ng-csp` の記載と `angular-csp.css` の読み込みが必要らしい
 	- なんとなく、function を書く場所が重要そうだ
		- 上記の function を `index.html` の `head` エリアに書いた場合、Chromeアプリでは AngularJS が動作しなかった
			- 通常のブラウザでは動作した
		- どの作法が正しいかは別として、通常ブラウザとは挙動が異なるみたい

# おわりに

また機会があったら続きを検証します。