JavaScriptテンプレートエンジンで活かすData API

JavaScript
テンプレートエンジンで
活かすData API
2014/11/29
MTDDC Meetup TOKYO 2014
藤本壱
1

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

自己紹介その1
• 藤本壱（ふじもとはじめ）
• 兵庫県伊丹市出身
• 群馬県前橋市在住
埼玉
東京
山梨
神奈川
栃木
茨城
千葉
4

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

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

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

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

Data APIの概要
• 管理画面を使わずにMovable Typeのデータを操作する仕組み
• アクセスするアドレスとメソッドに応じて操作（REST）
• データの取得／作成／更新／削除が可能
• データはJSON形式で受け渡し
• 各種のプログラム言語でアクセス可能
• JavaScriptライブラリあり
9

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

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

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

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

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

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

HandleBarsの基本
17
テンプレートJavaScript
<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);

HandleBarsの基本
18
テンプレート結果
<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>

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

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

ページ移動リンク出力部分
21
<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>

記事の読み込みとデータの加工
22
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
});
}

ページ移動リンク出力用データの作成
23
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),
});
}

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

Angular.jsの基本
26
テンプレートJavaScript
<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',
];
}
);

Angular.jsの基本
27
テンプレート結果
<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>

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

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

ページ移動リンク出力部分
30
<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>

記事編集ページ出力部分
31
<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>

記事一覧の読み込みとデータの加工
32
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
});
}
});

記事編集画面の表示
33
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();
}
);

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

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

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

FreeLayoutCustomFieldプラグインのご紹介
• HTMLとCSSでデザインできるカスタムフィールド
• 複数の入力欄を自由にレイアウト可能
• 同じレイアウトの組み合わせを複数件入力可能
• 複数のレイアウトの組み合わせから選択して入力可能
39

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

JavaScriptテンプレートエンジンで活かすData API

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScriptテンプレートエンジンで活かすData API

Similar to JavaScriptテンプレートエンジンで活かすData API (20)

More from Hajime Fujimoto

More from Hajime Fujimoto (20)

Recently uploaded

Recently uploaded (9)

JavaScriptテンプレートエンジンで活かすData API