Data APIを活かすJavaScript検索と管理画面の

カスタマイズ

bit part 合同会社　奥脇知宏Wednesday, 11 September 13

アジェンダ

Data API の基本

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

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

まとめ

Wednesday, 11 September 13

bit part 紹介

Wednesday, 11 September 13

bit part 紹介

柳谷真志（@mersy）、奥脇知宏（@tinybeans）

2013年1月結成のユニット

8月「bit part 合同会社」設立

Movable TypeやAlfasado社のPowerCMSを利用した構築がメイン業務

Wednesday, 11 September 13

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/

Wednesday, 11 September 13

bit part 紹介 / plugins

flexibleSearch

MTAppjQuery

MTML Completions

その他のMTプラグイン ドキュメント販売中http://bitpart.thebase.in/

Sublime Text 2 は開発者だけでなくWeb担当者様にもおすすめ！

Wednesday, 11 September 13

Data API の基本

Wednesday, 11 September 13

MTの管理画面にログインせずに、MT内のデータの取得・更新・再構築などが可能

テンプレートを書かず、再構築もせずにMT内のデータを利用することも可能

JSON形式でデータを取得できるので、JavaScriptなどの言語で扱いやすい

Data API の特長

Wednesday, 11 September 13

直接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 September 13

flexibleSearch.js

Wednesday, 11 September 13

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

flexibleSearch.js

Wednesday, 11 September 13

flexibleSearch.js + Data API

デモ

Wednesday, 11 September 13

例えばして検索対象JSOＮを振り分けることでサーバー負荷を軽減できる

ランダム

JavaScriptの処理速度や回線速度を計測→○○ミリ秒以内：静的なJSON→上記以外：Data API

flexibleSearch.js + Data API

Wednesday, 11 September 13

Data API + MTAppjQuery

運用時の負荷を軽減するサンプル

Wednesday, 11 September 13

MTAppjQueryとは

読み方（えむてぃーあっぷじぇぃくえりー）

Movable Type 5 の管理画面を jQuery でカスタマイズするためのプラグイン

Perl、YAML が不要、alt-tmpl より手軽

日頃 MT のテンプレートやフロントエンドをやっているWebデザイナー・コーダーのためのプラグイン

Wednesday, 11 September 13

MTAppjQuery + Data API

クイック編集機能を追加してみたサンプル

MTAppjQuery でウィジェットを追加

Data API で記事をインクリメントサーチで取得

Data API で記事の情報を表示

Data API で記事を更新

Wednesday, 11 September 13

まとめ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 を利用することで、例えば...

Wednesday, 11 September 13

まとめ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 September 13

まとめ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 September 13

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

専用更新アプリを作成

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

=> Web担当者・使い手の利便性、作業効率の向上

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

Wednesday, 11 September 13

ご静聴ありがとうございました。

Update bit part everyday!!

MT::Lover::bitpartWednesday, 11 September 13