Spine入門

2012/07/11 第31回 HTML5とか勉強会
Acroquest Technology Co.,Ltd.
Kenichiro Murata(@muraken720)

目次

1.  はじめに
2.  Spineに興味を持った経緯
3.  Spineとは？
4.  Spineの３つの特徴
5.  何はともあれ、Todos App！
6.  Spineの７つのお気に入りなポイント
7.  まとめ

2
Copyright © Acroquest Technology Co., Ltd. All rights reserved.

1. はじめに
自己紹介 =
氏名: ‘村田　賢一郎’
twitter: ‘@muraken720’
所属: ‘Acroquest Technology Co.,Ltd.’
仕事:
‘ライフライン系ネットワーク集中監視システム開発’
‘フレームワーク開発’
言語: ‘Java’ #JavaScriptはWebアプリケーション開発で少々
興味:
‘node.js’
‘CoffeeScript’
‘機関車トーマス！’
3

2. Spineに興味を持った経緯
n  WGP（Web Graphical Platform）を「JavaScriptMVC
フレームワーク」を使って改良せよ！
Ø  WGPはグラフィカルなWebUI開発用のJavaScriptなOSS。

http://wgp.sourceforge.net/
4

3. Spineとは？
1.  Backbone.jsにインスパイアされて開発。
2.  開発者： Alex MacCaw (@maccam)氏
Ø  著書：
–  ステートフルJavaScript(原書:JavaScript Web Applications)
–  The Little Book on CoffeeScript
3.  「ステートフルJavaScript」で提案する手法を体現する
ことを目指して、執筆時に開発。

本に出てくるSpine.jsは、CoffeeScriptに出会う前の
純粋なJavaScript実装版です。

5

4. Spineの３つの特徴

1. Simple
3. CoffeeScript

2. Lightweight
6

4-1. SimpleなMVCモデルアーキテクチャ
①  Event ②  Rendering
Handling ③  Routing

Controller
Event
Event

Bind
View
Model

①  Layout ①  Data Model
②  Template ②  Data storage and manipulation
7

4-2. Lightweightなフレームワーク
1.  ライン数：約500 Line
2.  サイズ（min+gzip）： 8.1k（最小構成4.1k）
ü  Backbone.js（5.6k）+Underscore.js（4k）
ü  Ember.js（42k）
ü  AngularJS（29k） Ember.js

※ 勉強会後、サイズについて比較条件
が同じではないとのコメントを頂き、条件
AngularJS
をmin+gzip時のサイズに統一して改版
しました。
Backbone.js
+Underscore.js

Spine.js

3.  依存ライブラリ：なし 0 10 20 30 40 50
Ø  JQuery or Zepto.js は推奨
8

4-3. CoffeeScriptは簡潔で分かりやすい！？
class
Model
extends
Module

…

@select:
(callback)
->

   result
=
(record
for
id,
record
of
@records
when

callback(record))

   @cloneArray(result)

…

Javaエンジニア的に
@each:
(callback)
->
は分かりやすい！
   for
key,
value
of
@records

Good-bye! prototype.
     callback(value.clone())

https://github.com/maccman/spine/blob/master/src/spine.coffee
9

5. 何はともあれ、Todos App！
n  Spineで、有名なTodos Appを使って作ってみよう！

n  全ソースはGithubにて公開しています。
Ø  https://github.com/muraken720/todos-spineapp-hem-eco
Ø  https://github.com/muraken720/todos-spineapp-hem-jqtmpl
10

5. Todos Appの構成
The Element pattern

TaskApp(Controller）

TaskController

Task(Model)

task.eco(View)

11

6. Spineの７つのお気に入りポイント
④Event、Elementのマッピン
グが簡単
②Storage機能を併せ持つ
Controller
⑤Ecoテンプレート ③Adapterの切り替えが簡単
をpre-compile

View
Model
　Spine.js
⑥楽々デバッグ
①定形作業を自動化 ⑦ビルドで頭スッキリ！

Hem
Spine.app dependency manager
app generator
& server
12

6-①. Spine.appで定形作業を自動化
n  Spine.app とは、アプリケーションの自動生成ツール
n  インストール
> npm install spine.app hem # インストール

n  各種コマンド

spine app todos　　　　　　 # アプリケーションのひな形を生成
spine model task # Modelのひな形を生成
spine controller taskctrl # Controllerのひな形を生成

13

6-②. ModelはStorage機能を併せ持つ
Spine
=
require('spine')

class
Task
extends
Spine.Model
configureで、Model
名とプロパティ名を

@configure
'Task',
"name",
"done”
定義するだけ。
…

Storageに対する操

@active:
->
作は標準で提供

@select
(
(item)
->
!item.done
)

…

module.exports
=
Task
app/models/task.coffee

Modelが提供する関数（抜粋）
create
find
save
select exsits
updateAttribute
each all
bind
14

6-③. Model Adapterの切り替えが簡単
Spine
=
require('spine')

class
Task
extends
Spine.Model

@configure
'Task',
"name",
"done”

@extend
@Local
extendでLocalStrorage用の

Adapterを指定

@active:
->

@select
(
(item)
->
!item.done
)

…

module.exports
=
Task
app/models/task.coffee

ü  @LocalでHTML5のLocalStorageに永続化
ü  @AjaxでRESTでサーバサイドを呼び出し
15

6-④. ControllerでEventのマッピングが簡単
class
TaskApp
extends
Spine.Controller

…

events:
Eventと関数の関連付け定義は

"submit
form":
"create"
以下の形式

"click
.clear":
"clear”
events:
…
“イベント名 Selector”: “関数名”

create:
(e)
->

e.preventDefault()

Task.create(name:
@input.val(),
done:
false)

@input.val("")
app/index.coffee

ü  events hashでユーザ操作によるイベントを関数にマッピング可能。
16

6-④. ControllerでElementのマッピングが簡単
class
TaskApp
extends
Spine.Controller

…

Elementと変数の関連付け定義は

elements:
以下の形式

".items":
"items"

".countVal":
"count"
elements:
“Selector”: “変数名”

".clear":
"clearlink"

"form
input":
"input”

…

addOne:
(task)
=>

taskctrl
=
new
TaskController(item:
task)

@items.append(taskctrl.render().el)
app/index.coffee
ü  elements hashでDOMを変数にマッピング可能。
17

6-⑤. ViewにてEcoテンプレートをpre-compile
ü  Viewに関しては特に規定なし。
ü  後述のHemにてEcoテンプレートをpre-compileしてくれるので、
requireで簡単に利用可能。
<div class="item <%= "done" if @done %>">
<div class="view" title="Double click to edit...">
<input type="checkbox" <%= "checked='checked'" if @done %>>
<span><%= @name %></span> <a class="destroy"></a>
</div>
<div class="edit">
<input type="text" value="<%= @name %>">
</div>
</div> Controllerにて以下のように利用する
app/views/task.eco
render: =>
@replace require('views/task')(@item)
18

6-⑥. Hemで楽々デバッグ
n  Hem とは、開発用サーバ＆依存関係管理ツール
n  開発用サーバの起動

ｈem server # 開発用のサーバを起動

ü  “*.coffee”, “*.styl” をapplication.js, application.cssに変換
ü  “*.eco”をpre-compile
ü  ファイルの更新を監視しており、サーバの再起動なしで変
更を自動反映

19

6-⑦. Hemのビルドで頭スッキリ
n  デプロイ用のビルド
ｈem build # application.js, application.cssを生成

ü  requireを解釈して、JavaScript間の依存関係を解
消したデプロイ用の統合ファイル（application.js,
application.css）を生成

20

6-⑦. Hemのビルドで頭スッキリ
<head>
<title>Todos</title>
<link rel="stylesheet" href="css/todos.css" type="text/css" charset="utf-8">
<script src="lib/json2.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.tmpl.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/spine.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/local.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/todos.js" type="text/javascript" charset="utf-8"></script>
</head>

<head>
<title>Todos</title>
<link rel="stylesheet" href=”/application.css" type="text/css" charset="utf-8">
<script src=”/application.js" type="text/javascript" charset="utf-8"></script>
</head>

21

7. まとめ：Spineの３つの特徴

1. Simple
3. CoffeeScript

2. Lightweight
22

7. まとめ：Spineの７つのお気に入りポイント
④Event、Elementのマッピン
グが簡単
②Storage機能を併せ持つ
Controller
⑤Ecoテンプレート ③Adapterの切り替えが簡単
をpre-compile

View
Model
　Spine.js
⑥楽々デバッグ
①定形作業を自動化 ⑦ビルドで頭スッキリ

Hem
Spine.app dependency manager
app generator
& server
23

ご清聴、ありがとうございました。

Infrastructures
Evolution

24

Spine入門

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to Spine入門

Similar to Spine入門 (20)

More from AdvancedTechNight

More from AdvancedTechNight (19)

Recently uploaded

Recently uploaded (9)

Spine入門