Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,336 views

Published on

2014年11月29日のMTDDC Meetup TOKYO 2014でお話しした「JavaScriptテンプレートエンジンで活かすData API」の資料です。

Published in: Technology

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

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

×