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

Data APIを活かす
JavaScript検索と管理画面の
カスタマイズ
bit part 合同会社奥脇知宏
Wednesday, 11 September 13

アジェンダ
Data API の基本
Data API + ﬂexibleSearch で検索時のサーバー負
荷を軽減するサンプル
Data API + MTAppjQuery で運用時の負荷を軽減
するサンプル
まとめ

bit part 紹介

bit part 紹介
柳谷真志（@mersy）、奥脇知宏（@tinybeans）
2013年1月結成のユニット
8月「bit part 合同会社」設立
Movable TypeやAlfasado社のPowerCMSを利用
した構築がメイン業務

bit part 紹介 / mersy
柳谷真志
やなぎやまさし
linker、アイペアーズ（株）

bit part 紹介 / tinybeans
奥脇知宏
おくわきともひろ
かたつむりくんのWWW
Movable Type 5.1
プロの現場の仕事術
（毎日コミュニケーションズ）

bit part 紹介 / plugins
ﬂexibleSearch
MTAppjQuery
MTML Completions
その他のMTプラグイン

ﬂexibleSearch
MTAppjQuery
MTML Completions
ドキュメント販売中
http://bitpart.thebase.in/

ﬂexibleSearch
MTAppjQuery
MTML Completions
ドキュメント販売中
http://bitpart.thebase.in/
Sublime Text 2 は開発者だけで
なくWeb担当者様にもおすすめ！

Data API の基本

MTの管理画面にログインせずに、MT内のデータ
の取得・更新・再構築などが可能
テンプレートを書かず、再構築もせずにMT内の
データを利用することも可能
JSON形式でデータを取得できるので、JavaScript
などの言語で扱いやすい
Data API の特長

直接URLを叩いてみるサンプル
Data API で記事一覧を取得してみる

jQueryのAjaxで取得するサンプル

PHPで取得するサンプル

Data API で記事を更新してみる

Data API で記事を更新してみる
スマホアプリのようなもののサンプル

スマホアプリとして
簡易版サイト更新機能として
Webサイトの動的に表示させるパーツとして
他のシステムとの連携
mt-search.cgi に変わる検索
Data API の使いどころ

Data API + ﬂexibleSearch
検索時のサーバー負荷を
軽減するサンプル

あらかじめ作成しておいた JSON ファイルを検索
することにより、柔軟で高速な Ajax 検索を実現
する jQuery プラグイン
ページ送りや検索項目の絞り込みなどにも対応
ﬂexibleSearch.js

ﬂexibleSearch.js

PAKUTASO/ぱくたそ-WEB制作向けの無料
写真素材/商用可
ﬂexibleSearch.js

ﬂexibleSearch.js + Data API
デモ

例えばして検索対象JSOＮを振り分けることで
サーバー負荷を軽減できる
ランダム
JavaScriptの処理速度や回線速度を計測
→○○ミリ秒以内：静的なJSON
→上記以外：Data API
ﬂexibleSearch.js + Data API

Data API + MTAppjQuery
運用時の負荷を軽減する
サンプル

MTAppjQueryとは
読み方（えむてぃーあっぷじぇぃくえりー）
Movable Type 5 の管理画面を jQuery でカスタマ
イズするためのプラグイン
Perl、YAML が不要、alt-tmpl より手軽
日頃 MT のテンプレートやフロントエンドをやって
いるWebデザイナー・コーダーのためのプラグイ
ン

MTAppjQuery + Data API
クイック編集機能を追加してみたサンプル
MTAppjQuery でウィジェットを追加
Data API で記事をインクリメントサーチで取得
Data API で記事の情報を表示
Data API で記事を更新

まとめ
Data API を利用することで、例えば...

JavaScript や PHP など多くの言語で MT 内の
データを操作することができる
まとめ

スマホアプリのベースとして利用
まとめ

スマホアプリのベースとして利用
=>開発効率の向上、MTでできることの可能性拡大
まとめ

mt-search.cgi に代わる検索機能として利用
まとめ

ﬂexibleSearch.js など静的なJSON検索と併用
まとめ

ﬂexibleSearch.js など静的なJSON検索と併用
=> 開発効率向上、サーバー負荷の軽減
まとめ

MTの管理画面に入らなくても、MT 内のデータを
操作することができる
まとめ

専用更新アプリを作成
まとめ

MTAppjQueryと併用して管理画面のカスタマイズ
に利用
まとめ

MTAppjQueryと併用して管理画面のカスタマイズ
に利用
=> Web担当者・使い手の利便性、作業効率の向上
まとめ

ご静聴ありがとう
ございました。
Update bit part everyday!!
MT::Lover::bitpart

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

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

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

Plus de bitpart

Plus de bitpart (17)

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