2013年06月27日

JS用MVCフレームワーク「AngularJS」を使ってChrome Packaged Apps【基本編】

アプリを作るときに便利なのがMVCフレームワーク。MVCパターン(Model、View、Controller)で開発することで描画処理とビジネスロジックを疎結合化することができ、デザイナーやプログラマ、データベースエンジニアそれぞれの役割を切り離すことができる。これはシステムが大規模になればなるほど求められるものだ。
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の主導権争いの行方
posted by 寄り道退屈男 at 15:03 | Comment(0) | TrackBack(0) | Packaged Apps
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/70099463
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック