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

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

カスタマイズ

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

アジェンダ

Data API の基本

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

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

まとめ

Wednesday, 11 September 13

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

flexibleSearch

MTAppjQuery

MTML Completions

その他のMTプラグイン



flexibleSearch

MTAppjQuery

MTML Completions

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


http://bitpart.thebase.in



flexibleSearch

MTAppjQuery

MTML Completions

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

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




Data API の基本


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

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

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

Data API の特長


直接URLを叩いてみるサンプル

Data API で記事一覧を取得してみる


http://mt.bit-part.net/MT-6.0b/mt/mt-data-api.cgi/v1/sites/2/entries?fields=title,permalink

http://mt.bit-part.net/MT-6.0b/mt/mt-data-api.cgi/v1/sites/2/entries?fields=title,permalink

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



http://mt.bit-part.net/MT-6.0b/seminner/1.html

http://mt.bit-part.net/MT-6.0b/seminner/1.html

PHPで取得するサンプル



http://mt.bit-part.net/MT-6.0b/seminner/1.php

http://mt.bit-part.net/MT-6.0b/seminner/1.php

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


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

スマホアプリのようなもののサンプル


スマホアプリとして

簡易版サイト更新機能として

Webサイトの動的に表示させるパーツとして

他のシステムとの連携

mt-search.cgi に変わる検索

Data API の使いどころ


Data API + flexibleSearch

検索時のサーバー負荷を軽減するサンプル


あらかじめ作成しておいた JSON ファイルを検索することにより、柔軟で高速な Ajax 検索を実現する jQuery プラグイン

ページ送りや検索項目の絞り込みなどにも対応

flexibleSearch.js


flexibleSearch.js


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

flexibleSearch.js


flexibleSearch.js + Data API

デモ


http://mt.bit-part.net/MT-6.0b/website1/result.html

http://mt.bit-part.net/MT-6.0b/website1/result.html

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

ランダム

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

flexibleSearch.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 で記事を更新


http://livepage.apple.co.jp/

http://livepage.apple.co.jp/

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


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




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




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

=>開発効率の向上、MTでできることの可能性拡大



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




flexibleSearch.js など静的なJSON検索と併用




flexibleSearch.js など静的なJSON検索と併用

=> 開発効率向上、サーバー負荷の軽減



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




専用更新アプリを作成





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





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

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



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

Update bit part everyday!!

MT::Lover::bitpartWednesday, 11 September 13

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

Design

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