JavaScriptテンプレートエンジンで活かすData API
Download as PPTX, PDF2 likes1,002 views
Movabel Type 6.xのData APIを、JavaScriptのテンプレートエンジンと組み合わせて活用することについて紹介します。
![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](https://image.slidesharecdn.com/jstemplates-150223203006-conversion-gate01/85/JavaScript-Data-API-22-320.jpg)
![記事の読み込みとデータの加工
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
});
}](https://image.slidesharecdn.com/jstemplates-150223203006-conversion-gate01/85/JavaScript-Data-API-27-320.jpg)
![ページ移動リンク出力用データの作成
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),
});
}](https://image.slidesharecdn.com/jstemplates-150223203006-conversion-gate01/85/JavaScript-Data-API-28-320.jpg)
![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](https://image.slidesharecdn.com/jstemplates-150223203006-conversion-gate01/85/JavaScript-Data-API-31-320.jpg)
![記事一覧の読み込みとデータの加工
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
});
}
});](https://image.slidesharecdn.com/jstemplates-150223203006-conversion-gate01/85/JavaScript-Data-API-37-320.jpg)
JavaScriptテンプレートエンジンで活かすData API
- 2. アジェンダ • 自己紹介 • Data APIの概要 • JavaScriptテンプレートエンジンでData APIを活かす • Handlebarsでの例 • Angular.jsでの例 • まとめ 2
- 3. 自己紹介 3
- 4. 自己紹介その1 • 藤本 壱（ふじもと はじめ） • 兵庫県伊丹市出身 • 群馬県前橋市在住 東京 埼玉 山梨 神奈川 栃木 茨城 千葉 4 富岡製糸場 世界遺産入り ゆるキャラ グランプリ 優勝
- 5. 自己紹介その2 • 本職はPC系のフリーライター • 2004年秋からMovable Typeユーザー • さまざまなプラグインを開発 5
- 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
- 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
- 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
- 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