javascriptテンプレートエンジンで活かすdata api
DESCRIPTION
2014年11月29日のMTDDC Meetup TOKYO 2014でお話しした「JavaScriptテンプレートエンジンで活かすData API」の資料です。TRANSCRIPT
![Page 1: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/1.jpg)
JavaScriptテンプレートエンジンで活かすData API
2014/11/29
MTDDC Meetup TOKYO 2014
藤本 壱1
![Page 2: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/2.jpg)
アジェンダ
• 自己紹介
• JavaScriptテンプレートエンジンでData APIを活かす
• Handlebarsでの例
• Angular.jsでの例
• まとめ
2
![Page 3: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/3.jpg)
自己紹介
3
![Page 4: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/4.jpg)
自己紹介その1
• 藤本 壱(ふじもと はじめ)
• 兵庫県伊丹市出身
• 群馬県前橋市在住
東京
埼玉
山梨
神奈川
栃木
茨城
千葉
4
![Page 5: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/5.jpg)
自己紹介その2
• 本職はPC系のフリーライター
• 2004年秋からMovable Typeユーザー
• さまざまなプラグインを開発
5
![Page 6: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/6.jpg)
自己紹介その3
• ブログはもちろんMovable Type
6http://www.h-fj.com/blog/
![Page 7: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/7.jpg)
テンプレートエンジンでData APIを活かす
7
![Page 8: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/8.jpg)
Data APIを
使ったことがありますか?
8
![Page 9: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/9.jpg)
Data APIの概要
• 管理画面を使わずにMovable Typeのデータを操作する仕組み
• アクセスするアドレスとメソッドに応じて操作(REST)
• データの取得/作成/更新/削除が可能
• データはJSON形式で受け渡し
• 各種のプログラム言語でアクセス可能
• JavaScriptライブラリあり
9
![Page 10: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/10.jpg)
Data APIにアクセスする例
• IDが1番のウェブサイトから記事を読み込むhttp://your-host/path-to-mt/mt-data-api.cgi/v1/sites/1/entries
10
![Page 11: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/11.jpg)
Data APIでできること
• Web製作では…
• ページ分割
• 検索
• 独自の管理画面
• Etc.
• Web製作以外では…
• スマートフォン/タブレット用アプリのバックエンド
• Etc.
11
![Page 12: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/12.jpg)
Data APIの難点
• プログラミングが必要
• デザイナー(ノンプログラマー)の方には難しい
• 開発すべてをプログラマーに任せると…
• デザインが…
• HTMLを修正するたびにプログラマーに依頼…
12
![Page 13: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/13.jpg)
テンプレートエンジンでデザインとロジックを分離
• テンプレートエンジン=テンプレートを解釈してHTML等に変換して出力する仕組み
• ロジック(プログラム)とデザインを分離
• プログラマーとデザイナーの分業
13
![Page 14: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/14.jpg)
JavaScriptテンプレートエンジンを活用
• JavaScriptならData APIのプログラミングをしやすい
• JavaScriptのテンプレートエンジンと組み合わせることも可能
• MTMLとまったく同じではないものの、MTMLに近い形でテンプレートを記述できるように工夫
14
![Page 15: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/15.jpg)
HandleBarsでの例
15
![Page 16: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/16.jpg)
HandleBarsの概要
• http://handlebarsjs.com/
• 比較的シンプルなテンプレートエンジン
• ロジックレス(テンプレートにプログラムを書かない)
• mustacheの上位互換
• JavaScriptのオブジェクトをテンプレートに当てはめて出力
• 機能拡張も可能(ヘルパー)
16
![Page 17: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/17.jpg)
HandleBarsの基本
17
<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
![Page 18: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/18.jpg)
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>
テンプレート 結果
![Page 19: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/19.jpg)
HandlerBars+Data APIの例:ページ分割
• Data APIで各ページの記事のデータを取得
• できるだけMovbale Typeのテンプレートに近い感じになるようにデータを一部加工
• テンプレートにデータを当てはめて出力
19
![Page 20: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/20.jpg)
記事一覧出力部分
20
<ul>{{#mt:Entries}}<li>
<h2><a href="{{mt:EntryPermalink}}">{{mt:EntryTitle}}</a>
</h2><p>{{mt:EntryExcerpt}}</p>
</li>{{/mt:Entries}}
</ul>
![Page 21: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/21.jpg)
ページ移動リンク出力部分
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>
![Page 22: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/22.jpg)
記事の読み込みとデータの加工
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
});}
![Page 23: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/23.jpg)
ページ移動リンク出力用データの作成
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),
});}
![Page 24: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/24.jpg)
Angular.jsでの例
24
![Page 25: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/25.jpg)
Angular.jsの概要
• https://angularjs.org/
• Google製/オープンソース
• MVW(Model-View-Whatever)のWebアプリ開発フレームワーク
• 多彩な機能
• テンプレートエンジン
• 双方向データバインディング
• URLのルーティング
• Etc.
25
![Page 26: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/26.jpg)
Angular.jsの基本
26
<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
![Page 27: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/27.jpg)
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>
テンプレート 結果
![Page 28: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/28.jpg)
Angular.js+Data APIの例:独自の記事編集画面
• 一覧で編集対象の記事を選択
• 編集ページで記事を編集して保存
• Data APIで記事の取得/保存を行い、Angular JSで入出力を管理
28
![Page 29: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/29.jpg)
記事一覧出力部分
29
<ul><li ng-repeat="mt in mt.Entries">
<h2><a href="{{mt.EntryPermalink}}">{{mt.EntryTitle}}</a>
</h2><p>{{mt.EntryExcerpt}}</p>
</li></ul>
![Page 30: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/30.jpg)
ページ移動リンク出力部分
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>
![Page 31: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/31.jpg)
記事編集ページ出力部分
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>
![Page 32: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/32.jpg)
記事一覧の読み込みとデータの加工
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
});}
});
![Page 33: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/33.jpg)
記事編集画面の表示
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();
});
![Page 34: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/34.jpg)
記事の保存
34
var entry = {title: $scope.mt.EntryTitle,body: $scope.mt.EntryBody
};DataAPI.updateEntry(<$mt:BlogID$>, $scope.entry_id, entry, function(response) {alert('記事を保存しました。');
});
![Page 35: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/35.jpg)
テンプレートエンジンの使い分け
• 案件によって異なる
• 単純なデータ出力だけ→ シンプルなテンプレートエンジン
• Webアプリ的な複雑な処理→ フレームワーク
35
![Page 36: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/36.jpg)
まとめ
36
![Page 37: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/37.jpg)
まとめ
• JavaScriptテンプレートエンジンを活用して、JavaScript絡みの処理でもロジックとデザインを分離
• Data APIとJavaScriptテンプレートエンジンを組み合わせることも可能
• テンプレートエンジンでData APIを活用
37
![Page 38: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/38.jpg)
One More Thing
38
![Page 39: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/39.jpg)
FreeLayoutCustomFieldプラグインのご紹介
• HTMLとCSSでデザインできるカスタムフィールド
• 複数の入力欄を自由にレイアウト可能
• 同じレイアウトの組み合わせを複数件入力可能
• 複数のレイアウトの組み合わせから選択して入力可能
39
![Page 40: JavaScriptテンプレートエンジンで活かすData API](https://reader033.vdocuments.mx/reader033/viewer/2022052316/559a2b021a28abea758b45fe/html5/thumbnails/40.jpg)
ご清聴ありがとうございました
40