Data APIで広がるWebサイトのオモテとウラ

bit part 合同会社　奥脇知宏・柳谷真志

Movable Type 6 本格活用ナイトセミナー2013.11.28

bit part 紹介

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

bit part 紹介 / mersy

• 柳谷真志やなぎやまさし

• アイ・ペアーズ株式会社

bit part 紹介 / tinybeans

• 奥脇知宏おくわきともひろ

• かたつむりくんのWWW• Movable Type 5.1 プロの現場の仕事術（毎日コミュニケーションズ）

bit part 紹介 / plugins

• flexibleSearch • MTAppjQuery• MTML Completions• その他のMTプラグイン ドキュメント販売中

Data API で何ができる？

Webサイトのオモテ側

サンプルサイトSix Apart のごはんレシピ

• Movable Type on Cloud（爆速MT）• １つのウェブサイト• ウェブサイトで記事を管理（MT6 new!）• カテゴリ、タグによる分類

サンプルサイトの構成

• 一覧ページ（トップページなど）で下までスクロールすると追加で読み込む無限スクロール

• サイト内検索• タグアーカイブ

Data API をどこに使っているか

• 実際に見てみましょう

http://makanai.sixapart.jp/

サンプルサイトのデモ

DEMOサイトの構成 < デザインについて >

Data API で追加読み込み

Data API で検索

• Movable Type 6 本格活用ガイドブック• Chapter 04 参照

サンプルサイトの解説

英単語帳スマホWebアプリbitword

• 一覧ページの表示・無限スクロール• ユーザー認証• 記事の新規投稿・編集• 記事のステータスの変更、下書き記事の表示

Data API をどこに使っているか

• 実際に見てみましょう• デモ（公開画面・管理画面）

bitword のデモ

Data API を PHP で利用したダイナミックページ

• デモ

Data API を PHP で利用する

Data API で何ができる？

Webサイトのウラ側

• Webサイト構築中のサンプル記事の投稿がとっても楽に！

• Data API を使った記事の作成• デモ

アイデア１サンプル記事をまとめて作成

• ちょっとした記事の編集をサクッとやりたい！• Data API を使ったインクリメントサーチ• Data API を使った記事の更新・再構築• ウィジェットの挿入は MTAppjQuery で• デモ

アイデア２クイック編集ウィジェット

• 複数の画像をまとめてアップロードしたい！• Data API を使ったアイテムのアップロード• ウィジェットの挿入は MTAppjQuery で• デモ

アイデア３マルチファイルアップロードウィジェット

• 公開サイトを見たまま編集したい！• Google Chrome の拡張機能で Data API を使う• Data API を使った記事の編集（リッチテキストエディタも！）、新規投稿（複製）、削除

• デモ

アイデア４公開サイトを見たまま編集Chrome 拡張機能

このように Data API を使うとMovable Type のデータを

Webサイトのオモテ側・ウラ側で簡単・自由に扱える！

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

Update bit part everyday!!

MT::Lover::bitpart