Movabel Type 6.xのData APIを、JavaScriptのテンプレートエンジンと組み合わせて活用することについて紹介します。

1. JavaScript
テンプレートエンジンで
活かすData API
2015/2/22
【MT東京-10】Data API 2.0
藤本 壱
1

2. アジェンダ
• 自己紹介
• Data APIの概要
• JavaScriptテンプレートエンジンでData APIを活かす
• Handlebarsでの例
• Angular.jsでの例
• まとめ
2

3. 自己紹介
3

4. 自己紹介その1
• 藤本 壱（ふじもと はじめ）
• 兵庫県伊丹市出身
• 群馬県前橋市在住
東京
埼玉
山梨
神奈川
栃木
茨城
千葉
4
富岡製糸場
世界遺産入り
ゆるキャラ
グランプリ
優勝

5. 自己紹介その2
• 本職はPC系のフリーライター
• 2004年秋からMovable Typeユーザー
• さまざまなプラグインを開発
5

6. 自己紹介その3
• ブログはもちろんMovable Type
6
http://www.h-fj.com/blog/

7. Data APIの概要
7

8. Data APIを
使ったことがありますか？
8

9. 今までのWeb製作
• HTMLとCSSでページを作成
• JavaScriptを入れて動きを持たせる
• 動的なコンテンツはサーバー側（PHP等）で生成
9

10. フロントエンド側の処理が増加
• Ajaxによるレンダリング
• サーバーからデータのみ受け取り
• クライアント側でJavaScriptでレンダリング
• Webブラウザのアプリケーションプラットフォーム化
• 例：Webメール、Google Maps、Google Document
10
サーバー側でのHTML生成の必要性が減少
フロントエンド側から生データを取得して処理することが増加

11. ネイティブアプリの流行
• iOS／Androidの伸長でネイティブアプリ化
• WebアプリではiOS／Androidの機能／性能をフルには引き出せない
• ネイティブアプリの利用が増加
• PCではブラウザ、スマートフォン／タブレットではネイティブアプリで
閲覧することが増加
• サーバー側との連携が必要
• HTTPでサーバーにアクセスしたい
• HTMLではなく生データが欲しい
11

12. Data APIの登場
• 管理画面を使わずにMovable Typeのデータを操作する仕組み
• HTTPプロトコルでData APIにアクセス
• アクセスするアドレスとメソッドに応じて操作（REST）
• データの取得／作成／更新／削除が可能
• データはJSON形式で受け渡し
• 各種のプログラム言語でアクセス可能
• JavaScriptライブラリあり
• プラグインで拡張可能(事例はこの後のセッションで)
12

13. Data APIにアクセスする例
• IDが1番のウェブサイトから記事を読み込む
http://your-host/path-to-mt/mt-data-api.cgi/v2/sites/1/entries
13

14. Data APIバージョン2.0が登場
• Movable Type 6.0ではバージョン1.0
• 利用頻度が特に高い機能だけ装備
• できないことも少なくなかった
• Movable Type 6.1でバージョン 2.0に進化
• 機能が大幅に増加
• Movable Typeの大半の部分をData APIで操作可能
• 詳しくは後の高山さんのセッションで…
14

15. Data APIでできること
• Web製作では…
• ページ分割
• 検索
• 独自の管理画面
• Etc.
• Web製作以外では…
• スマートフォン／タブレット用アプリのバックエンド
• 外部へのデータ提供
• Etc.
15

16. テンプレートエンジンでData APIを活かす
16

17. Data APIの難点
• プログラミングが必要
• デザイナー(ノンプログラマー)の方には難しい
• 開発すべてをプログラマーに任せると…
• デザインが…
• HTMLを修正するたびにプログラマーに依頼…
17

18. テンプレートエンジンでデザインとロジックを分離
• テンプレートエンジン＝テンプレートを解釈してHTML等に変換
して出力する仕組み
• Movable Typeもテンプレートエンジン
• ロジック(プログラム)とデザインを分離
• プログラマーとデザイナーの分業
18

19. JavaScriptテンプレートエンジンを活用
• JavaScriptならData APIのプログラミングをしやすい
• JavaScriptのテンプレートエンジンと組み合わせることも可能
• MTMLに近い形でテンプレートを記述できるように工夫
19

20. HandleBarsでの例
20

21. HandleBarsの概要
• http://handlebarsjs.com/
• 比較的シンプルなテンプレートエンジン
• ロジックレス(テンプレートにプログラムを書かない)
• mustacheの上位互換
• JavaScriptのオブジェクトをテンプレートに当てはめて出力
• 機能拡張も可能(ヘルパー)
21

22. HandleBarsの基本
22
<script id="tmpl" type="text/x-
handlebars-template">
<ul>
{{#names}}
<li>Hello, {{name}}</li>
{{/names}}
</ul>
</script>
<div id="output"></div>
var src = $('#tmpl').html();
var tmpl = Handlebars.compile(src);
var names = [
{ name: 'Taro' },
{ name: 'Jiro' },
{ name: 'Saburo' }
];
var output = tmpl({ names: names });
$('#output').html(output);
テンプレート JavaScript

23. HandleBarsの基本
23
<script id="tmpl" type="text/x-
handlebars-template">
<ul>
{{#names}}
<li>Hello, {{name}}</li>
{{/names}}
</ul>
</script>
<div id="output"></div>
<div id="output">
<ul>
<li>Hello, Taro</li>
<li>Hello, Jiro</li>
<li>Hello, Saburo</li>
</ul>
</div>
テンプレート 結果

24. HandlerBars＋Data APIの例：ページ分割
• Data APIで各ページの記事のデータを取得
• できるだけMovbale Typeのテンプレートに近い感じになるよう
にデータを一部加工
• テンプレートにデータを当てはめて出力
24

25. 記事一覧出力部分
25
<ul>
{{#mt:Entries}}
<li>
<h2>
<a href="{{mt:EntryPermalink}}">{{mt:EntryTitle}}</a>
</h2>
<p>{{mt:EntryExcerpt}}</p>
</li>
{{/mt:Entries}}
</ul>

26. ページ移動リンク出力部分
26
<ul class="pager">
{{#mt:PagerBlock}}
<li>
{{#mt:IfCurrentPage}}
{{mt:CurrentPage}}
{{/mt:IfCurrentPage}}
{{#mt:IfNotCurrentPage}}
<a href="{{mt:PagerLink}}">{{mt:CurrentPage}}</a>
{{/mt:IfNotCurrentPage}}
</li>
{{/mt:PagerBlock}}
</ul>

27. 記事の読み込みとデータの加工
27
DataAPI.listEntries(<$mt:BlogID$>, params, function(response) {
var o = {};
o['mt:Entries'] = [];
for (var i = 0; i < response.items.length; i++) {
var r = response.items[i];
o['mt:Entries'].push({
'mt:EntryTitle': r.title,
'mt:EntryExcerpt': r.excerpt,
'mt:EntryPermalink': r.permalink
});
}

28. ページ移動リンク出力用データの作成
28
o['mt:PagerBlock'] = [];
for (var i = 0; i < totalPages; i++) {
o['mt:PagerBlock'].push({
'mt:CurrentPage': i + 1,
'mt:IfCurrentPage': (i + 1 == page_num),
'mt:IfNotCurrentPage': (i + 1 != page_num),
'mt:IfMoreResults': (i < totalPages - 1),
'mt:IfPreviousResults': i > 1,
'mt:NextLink': '#/' + (i + 2),
'mt:PreviousLink': '#/' + i,
'mt:PagerLink': '#/' + (i + 1),
});
}

29. Angular.jsでの例
29

30. Angular.jsの概要
• https://angularjs.org/
• Google製／オープンソース
• MVW(Model-View-Whatever)のWebアプリ開発フレームワーク
• 多彩な機能
• テンプレートエンジン
• 双方向データバインディング
• URLのルーティング
• Etc.
30

31. Angular.jsの基本
31
<html ng-app="SampleApp">
<head>
・・・
</head>
<body ng-controller="SampleAppCtrl">
<ul>
<li ng-repeat="name in names">
Hello, {{name}}
</li>
</ul>
</body>
</html>
var SampleApp =
angular.module('SampleApp', []);
SampleApp.controller('SampleAppCtrl',
function($scope) {
$scope.names = [
'Taro', 'Jiro', 'Saburo',
];
}
);
テンプレート JavaScript

32. Angular.jsの基本
32
<html ng-app="SampleApp">
<head>
・・・
</head>
<body ng-controller="SampleAppCtrl">
<ul>
<li ng-repeat="name in names">
Hello, {{name}}
</li>
</ul>
</body>
</html>
<ul>
<li>Hello, Taro</li>
<li>Hello, Jiro</li>
<li>Hello, Saburo</li>
</ul>
テンプレート 結果

33. Angular.js＋Data APIの例：独自の記事編集画面
• 一覧で編集対象の記事を選択
• 編集ページで記事を編集して保存
• Data APIで記事の取得／保存を行い、Angular JSで入出力を管
理
33

34. 記事一覧出力部分
34
<ul>
<li ng-repeat="mt in mt.Entries">
<h2>
<a href="{{mt.EntryPermalink}}">{{mt.EntryTitle}}</a>
</h2>
<p>{{mt.EntryExcerpt}}</p>
</li>
</ul>

35. ページ移動リンク出力部分
35
<ul class="pager">
<li ng-repeat="mt in mt.PagerBlock">
<span ng-if="mt.IfCurrentPage">
{{mt.CurrentPage}}
</span>
<a ng-if="mt.IfNotCurrentPage" href="{{mt.PagerLink}}">
{{mt.CurrentPage}}
</a>
</li>
</ul>

36. 記事編集ページ出力部分
36
<form ng-submit="save()">
<p>タイトル
<input type="text" size="50" ng-model="mt.EntryTitle“
ng-disabled="disableFlag" />
</p>
<p>本文<br />
<textarea rows="15" cols="80" ng-model="mt.EntryBody“
ng-disabled="disableFlag"></textarea>
</p>
<p><button type="submit">保存</button></p>
</form>

37. 記事一覧の読み込みとデータの加工
37
DataAPI.listEntries(<$mt:BlogID$>, params, function(response) {
$scope.mt = {};
$scope.mt.Entries = [];
for (var i = 0; i < response.items.length; i++) {
var r = response.items[i];
$scope.mt.Entries.push({
EntryTitle: r.title,
EntryExcerpt: r.excerpt,
EntryPermalink: r.permalink
});
}
});

38. 記事編集画面の表示
38
DataAPI.getEntry(<$mt:BlogID$>, $scope.entry_id,
function(response) {
$scope.mt.IfLogin = true;
$scope.mt.EntryTitle = response.title;
$scope.mt.EntryBody = response.body;
$scope.$apply();
}
);

39. 記事の保存
39
var entry = {
title: $scope.mt.EntryTitle,
body: $scope.mt.EntryBody
};
DataAPI.updateEntry(<$mt:BlogID$>, $scope.entry_id,
entry, function(response) {
alert('記事を保存しました。');
});

40. テンプレートエンジンの使い分け
• 案件によって異なる
• 単純なデータ出力だけ → シンプルなテンプレートエンジン
• Webアプリ的な複雑な処理 → フレームワーク
40

41. まとめ
41

42. まとめ
• JavaScriptテンプレートエンジンを活用して、JavaScript絡みの処
理でもロジックとデザインを分離
• Data APIとJavaScriptテンプレートエンジンを組み合わせることも
可能
• テンプレートエンジンでData APIを活用
42

43. ご清聴ありがとうございました
43