JavaScript用のMVCフレームワークは数多く存在するが、Chrome Packaged Appsを作るときには AngularJS を使うと色々と楽できそうだ。
前置きが長くなったが早速AngularJSの使い方を見てみよう。
まずは基本から。
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
重要箇所を太字にしておいた。
inputタグの ng-model で指定されたモデル "yourName" が {{yourName}} で表示されるだけのサンプルだ。なんだか取っ付きやすそうである。
次はシンプルだが十分に実用的なTODOアプリだ。
このアプリにはデータバインディング処理、コントローラーが登場する。
ファイル構成は以下の通り。
manifest.json
window.html
todo.css
calculator-128.png
calculator-64.png
background.js
angular.min.js
controller.js
manifest.json とか background.js は Packaged Apps のお決まり。
アイコン作るのが面倒臭かったので前のサンプルアプリ(calculator-*.png)で使ったアイコンをそのまま流用。
今回重要なのは window.html, angular.min.js, controller.js だ。
manifest.json
{
"name": "TODO App",
"description": "My First Todo app.",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});
まぁここまではお決まりということで。
ここからは重要。
window.html
<html ng-app ng-csp>
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
ng-* なプロパティが AngularJS の重要箇所である。
次にスタイルシート。
todo.css
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
ul {
list-style: none;
}
button, input[type=submit] {
background-color: #0074CC;
background-image: linear-gradient(top, #08C, #05C);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: white;
}
.done-true {
text-decoration: line-through;
color: grey;
}
そして最も重要といえるコントローラー。
controller.js
function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular Chrome packaged app', done:false}];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}
ソースを見ていくと、
まず、$scope.todos = [...] でModelのリストが初期値と共に定義され、次いで addTodo(), remaining(), archive() といった関数が定義されている。
View側の ng-model プロパティで定義された名前、例えば ng-model="todoText" が、controllerの中で $scope.todoText として利用される。
また、controller側で使われている $scope.todos というModelリストは、View側で以下のように利用される。
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
todoの完了処理(done)を
<input type="checkbox" ng-model="todo.done">
だけで表現しているのは何気にすごいかも。普通ならcheckboxがクリックされたら todo.done=true してゴニョゴニョ、、、という面倒な処理を書く必要があろうかと思うが、このソースにはそれがどこにも見当たらない。HTMLだけで表現されているのだ。これは素晴らしい！
まとめると：
1. JavaScriptでコントロールを作成
例：function TodoCtrl($scope){...}
2. HTMLでコントロールを指定
例：<div ng-controller="TodoCtrl">
3. HTMLで使う
例1：<form ng-submit="addTodo()">
例2：{{ addTodo() }}
というわけで次回は画面遷移やフォームバリデーションとかサーバー通信なんかをやる予定。。。
参考
Create MVC - Google Chrome
Angular JS - Superheroic JavaScript MVW Framework
関連エントリ
【Chrome】Packaged Apps で OAuth2認証する超簡単なサンプル【Google】
【Chrome】Packaged Apps アプリをHelloWorld【Google】
スマホOSの主導権争いの行方
