Data APIを活かす
JavaScript検索と管理画面の
カスタマイズ
bit part 合同会社 奥脇知宏
Wednesday, 11 September 13
アジェンダ
Data API の基本
Data API + flexibleSearch で検索時のサーバー負
荷を軽減するサンプル
Data API + MTAppjQuery で運用時の負荷を軽減
するサンプル
まとめ
Wednesday, ...
bit part 紹介
Wednesday, 11 September 13
bit part 紹介
柳谷真志(@mersy)、奥脇知宏(@tinybeans)
2013年1月結成のユニット
8月「bit part 合同会社」設立
Movable TypeやAlfasado社のPowerCMSを利用
した構築がメイン業務...
bit part 紹介 / mersy
柳谷真志
やなぎやまさし
linker、アイペアーズ(株)
Wednesday, 11 September 13
bit part 紹介 / tinybeans
奥脇知宏
おくわきともひろ
かたつむりくんのWWW
Movable Type 5.1
プロの現場の仕事術
(毎日コミュニケーションズ)
Wednesday, 11 September 13
bit part 紹介 / plugins
flexibleSearch
MTAppjQuery
MTML Completions
その他のMTプラグイン
Wednesday, 11 September 13
bit part 紹介 / plugins
flexibleSearch
MTAppjQuery
MTML Completions
その他のMTプラグイン
ドキュメント販売中
http://bitpart.thebase.in/
Wednesda...
bit part 紹介 / plugins
flexibleSearch
MTAppjQuery
MTML Completions
その他のMTプラグイン
ドキュメント販売中
http://bitpart.thebase.in/
Sublime ...
Data API の基本
Wednesday, 11 September 13
MTの管理画面にログインせずに、MT内のデータ
の取得・更新・再構築などが可能
テンプレートを書かず、再構築もせずにMT内の
データを利用することも可能
JSON形式でデータを取得できるので、JavaScript
などの言語で扱いやすい
Dat...
直接URLを叩いてみるサンプル
Data API で記事一覧を取得してみる
Wednesday, 11 September 13
jQueryのAjaxで取得するサンプル
Data API で記事一覧を取得してみる
Wednesday, 11 September 13
PHPで取得するサンプル
Data API で記事一覧を取得してみる
Wednesday, 11 September 13
Data API で記事を更新してみる
Wednesday, 11 September 13
Data API で記事を更新してみる
Wednesday, 11 September 13
Data API で記事を更新してみる
スマホアプリのようなもののサンプル
Wednesday, 11 September 13
スマホアプリとして
簡易版サイト更新機能として
Webサイトの動的に表示させるパーツとして
他のシステムとの連携
mt-search.cgi に変わる検索
Data API の使いどころ
Wednesday, 11 September 13
Data API + flexibleSearch
検索時のサーバー負荷を
軽減するサンプル
Wednesday, 11 September 13
あらかじめ作成しておいた JSON ファイルを検索
することにより、柔軟で高速な Ajax 検索を実現
する jQuery プラグイン
ページ送りや検索項目の絞り込みなどにも対応
flexibleSearch.js
Wednesday, 11 S...
flexibleSearch.js
Wednesday, 11 September 13
PAKUTASO/ぱくたそ-WEB制作向けの無料
写真素材/商用可
flexibleSearch.js
Wednesday, 11 September 13
flexibleSearch.js + Data API
デモ
Wednesday, 11 September 13
例えばして検索対象JSONを振り分けることで
サーバー負荷を軽減できる
ランダム
JavaScriptの処理速度や回線速度を計測
→○○ミリ秒以内:静的なJSON
→上記以外:Data API
flexibleSearch.js + Data A...
Data API + MTAppjQuery
運用時の負荷を軽減する
サンプル
Wednesday, 11 September 13
MTAppjQueryとは
読み方(えむてぃーあっぷじぇぃくえりー)
Movable Type 5 の管理画面を jQuery でカスタマ
イズするためのプラグイン
Perl、YAML が不要、alt-tmpl より手軽
日頃 MT のテンプレ...
MTAppjQuery + Data API
クイック編集機能を追加してみたサンプル
MTAppjQuery でウィジェットを追加
Data API で記事をインクリメントサーチで取得
Data API で記事の情報を表示
Data API で...
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
JavaScript や PHP など多くの言語で MT 内の
データを操作することができる
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
JavaScript や PHP など多くの言語で MT 内の
データを操作することができる
スマホアプリのベースとして利用
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
JavaScript や PHP など多くの言語で MT 内の
データを操作することができる
スマホアプリのベースとして利用
=>開発効率の向上、MTでできることの可能性拡大
まとめ
Data API を利用することで、例えば...
Wedne...
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
mt-search.cgi に代わる検索機能として利用
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
mt-search.cgi に代わる検索機能として利用
flexibleSearch.js など静的なJSON検索と併用
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
mt-search.cgi に代わる検索機能として利用
flexibleSearch.js など静的なJSON検索と併用
=> 開発効率向上、サーバー負荷の軽減
まとめ
Data API を利用することで、例えば...
Wednesday, 11...
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
MTの管理画面に入らなくても、MT 内のデータを
操作することができる
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
MTの管理画面に入らなくても、MT 内のデータを
操作することができる
専用更新アプリを作成
まとめ
Data API を利用することで、例えば...
Wednesday, 11 September 13
MTの管理画面に入らなくても、MT 内のデータを
操作することができる
専用更新アプリを作成
MTAppjQueryと併用して管理画面のカスタマイズ
に利用
まとめ
Data API を利用することで、例えば...
Wednesday, 11 ...
MTの管理画面に入らなくても、MT 内のデータを
操作することができる
専用更新アプリを作成
MTAppjQueryと併用して管理画面のカスタマイズ
に利用
=> Web担当者・使い手の利便性、作業効率の向上
まとめ
Data API を利用す...
ご静聴ありがとう
ございました。
Update bit part everyday!!
MT::Lover::bitpart
Wednesday, 11 September 13
Upcoming SlideShare
Loading in …5
×

Data APIを活かす JavaScript検索と管理画面のカスタマイズ

4,325 views

Published on

【東京開催】世界標準のCMSプラットフォーム「Movable Type 6」登場
- WEBサイトの「CMS導入」と「クラウド化」のポイント -

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,325
On SlideShare
0
From Embeds
0
Number of Embeds
171
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Data APIを活かす JavaScript検索と管理画面のカスタマイズ

  1. 1. Data APIを活かす JavaScript検索と管理画面の カスタマイズ bit part 合同会社 奥脇知宏 Wednesday, 11 September 13
  2. 2. アジェンダ Data API の基本 Data API + flexibleSearch で検索時のサーバー負 荷を軽減するサンプル Data API + MTAppjQuery で運用時の負荷を軽減 するサンプル まとめ Wednesday, 11 September 13
  3. 3. bit part 紹介 Wednesday, 11 September 13
  4. 4. bit part 紹介 柳谷真志(@mersy)、奥脇知宏(@tinybeans) 2013年1月結成のユニット 8月「bit part 合同会社」設立 Movable TypeやAlfasado社のPowerCMSを利用 した構築がメイン業務 Wednesday, 11 September 13
  5. 5. bit part 紹介 / mersy 柳谷真志 やなぎやまさし linker、アイペアーズ(株) Wednesday, 11 September 13
  6. 6. bit part 紹介 / tinybeans 奥脇知宏 おくわきともひろ かたつむりくんのWWW Movable Type 5.1 プロの現場の仕事術 (毎日コミュニケーションズ) Wednesday, 11 September 13
  7. 7. bit part 紹介 / plugins flexibleSearch MTAppjQuery MTML Completions その他のMTプラグイン Wednesday, 11 September 13
  8. 8. bit part 紹介 / plugins flexibleSearch MTAppjQuery MTML Completions その他のMTプラグイン ドキュメント販売中 http://bitpart.thebase.in/ Wednesday, 11 September 13
  9. 9. bit part 紹介 / plugins flexibleSearch MTAppjQuery MTML Completions その他のMTプラグイン ドキュメント販売中 http://bitpart.thebase.in/ Sublime Text 2 は開発者だけで なくWeb担当者様にもおすすめ! Wednesday, 11 September 13
  10. 10. Data API の基本 Wednesday, 11 September 13
  11. 11. MTの管理画面にログインせずに、MT内のデータ の取得・更新・再構築などが可能 テンプレートを書かず、再構築もせずにMT内の データを利用することも可能 JSON形式でデータを取得できるので、JavaScript などの言語で扱いやすい Data API の特長 Wednesday, 11 September 13
  12. 12. 直接URLを叩いてみるサンプル Data API で記事一覧を取得してみる Wednesday, 11 September 13
  13. 13. jQueryのAjaxで取得するサンプル Data API で記事一覧を取得してみる Wednesday, 11 September 13
  14. 14. PHPで取得するサンプル Data API で記事一覧を取得してみる Wednesday, 11 September 13
  15. 15. Data API で記事を更新してみる Wednesday, 11 September 13
  16. 16. Data API で記事を更新してみる Wednesday, 11 September 13
  17. 17. Data API で記事を更新してみる スマホアプリのようなもののサンプル Wednesday, 11 September 13
  18. 18. スマホアプリとして 簡易版サイト更新機能として Webサイトの動的に表示させるパーツとして 他のシステムとの連携 mt-search.cgi に変わる検索 Data API の使いどころ Wednesday, 11 September 13
  19. 19. Data API + flexibleSearch 検索時のサーバー負荷を 軽減するサンプル Wednesday, 11 September 13
  20. 20. あらかじめ作成しておいた JSON ファイルを検索 することにより、柔軟で高速な Ajax 検索を実現 する jQuery プラグイン ページ送りや検索項目の絞り込みなどにも対応 flexibleSearch.js Wednesday, 11 September 13
  21. 21. flexibleSearch.js Wednesday, 11 September 13
  22. 22. PAKUTASO/ぱくたそ-WEB制作向けの無料 写真素材/商用可 flexibleSearch.js Wednesday, 11 September 13
  23. 23. flexibleSearch.js + Data API デモ Wednesday, 11 September 13
  24. 24. 例えばして検索対象JSONを振り分けることで サーバー負荷を軽減できる ランダム JavaScriptの処理速度や回線速度を計測 →○○ミリ秒以内:静的なJSON →上記以外:Data API flexibleSearch.js + Data API Wednesday, 11 September 13
  25. 25. Data API + MTAppjQuery 運用時の負荷を軽減する サンプル Wednesday, 11 September 13
  26. 26. MTAppjQueryとは 読み方(えむてぃーあっぷじぇぃくえりー) Movable Type 5 の管理画面を jQuery でカスタマ イズするためのプラグイン Perl、YAML が不要、alt-tmpl より手軽 日頃 MT のテンプレートやフロントエンドをやって いるWebデザイナー・コーダーのためのプラグイ ン Wednesday, 11 September 13
  27. 27. MTAppjQuery + Data API クイック編集機能を追加してみたサンプル MTAppjQuery でウィジェットを追加 Data API で記事をインクリメントサーチで取得 Data API で記事の情報を表示 Data API で記事を更新 Wednesday, 11 September 13
  28. 28. まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  29. 29. JavaScript や PHP など多くの言語で MT 内の データを操作することができる まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  30. 30. JavaScript や PHP など多くの言語で MT 内の データを操作することができる スマホアプリのベースとして利用 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  31. 31. JavaScript や PHP など多くの言語で MT 内の データを操作することができる スマホアプリのベースとして利用 =>開発効率の向上、MTでできることの可能性拡大 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  32. 32. まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  33. 33. mt-search.cgi に代わる検索機能として利用 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  34. 34. mt-search.cgi に代わる検索機能として利用 flexibleSearch.js など静的なJSON検索と併用 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  35. 35. mt-search.cgi に代わる検索機能として利用 flexibleSearch.js など静的なJSON検索と併用 => 開発効率向上、サーバー負荷の軽減 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  36. 36. まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  37. 37. MTの管理画面に入らなくても、MT 内のデータを 操作することができる まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  38. 38. MTの管理画面に入らなくても、MT 内のデータを 操作することができる 専用更新アプリを作成 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  39. 39. MTの管理画面に入らなくても、MT 内のデータを 操作することができる 専用更新アプリを作成 MTAppjQueryと併用して管理画面のカスタマイズ に利用 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  40. 40. MTの管理画面に入らなくても、MT 内のデータを 操作することができる 専用更新アプリを作成 MTAppjQueryと併用して管理画面のカスタマイズ に利用 => Web担当者・使い手の利便性、作業効率の向上 まとめ Data API を利用することで、例えば... Wednesday, 11 September 13
  41. 41. ご静聴ありがとう ございました。 Update bit part everyday!! MT::Lover::bitpart Wednesday, 11 September 13

×