Data APIで広がるWebサイトの
オモテとウラ
Movable Type 6 本格活用ナイトセミナー
2013.11.28

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

• 柳谷真志(@mersy)、奥脇知宏(@tinybeans)
• 2013年1月結成のユニット
• 2013年8月「bit part 合同会社」設立
• Movable Typeやアルファサード株式会社の
Power...
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)
• 1つのウェブサイト
• ウェブサイトで記事を管理(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サイトのウラ側
アイデア1
サンプル記事をまとめて作成

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

• Data API を使った記事の作成
• デモ
アイデア2
クイック編集ウィジェット
• ちょっとした記事の編集をサクッとやりたい!
• Data API を使ったインクリメントサーチ
• Data API を使った記事の更新・再構築
• ウィジェットの挿入は MTAppjQuery で
•...
アイデア3
マルチファイルアップロードウィジェット
• 複数の画像をまとめてアップロードしたい!
• Data API を使ったアイテムのアップロード
• ウィジェットの挿入は MTAppjQuery で
• デモ
アイデア4
公開サイトを見たまま編集
Chrome 拡張機能
• 公開サイトを見たまま編集したい!
• Google Chrome の拡張機能で Data API を使う
• Data API を使った記事の編集(リッチテキストエ
ディタも!)...
このように Data API を使うと
Movable Type のデータを
Webサイトのオモテ側・ウラ側
で簡単・自由に扱える!
ご静聴ありがとう
ございました。

Update bit part everyday!!

MT::Lover::bitpart
Data APIで広がるWebサイトのオモテとウラ
Upcoming SlideShare
Loading in …5
×

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

741
-1

Published on

2013.11.28 マイナビさんでの「Movable Type 6 本格活用ナイトセミナー」のスライドです。

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
741
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. Data APIで広がるWebサイトの オモテとウラ Movable Type 6 本格活用ナイトセミナー 2013.11.28 bit part 合同会社 奥脇知宏・柳谷真志
  2. 2. bit part 紹介 • 柳谷真志(@mersy)、奥脇知宏(@tinybeans) • 2013年1月結成のユニット • 2013年8月「bit part 合同会社」設立 • Movable Typeやアルファサード株式会社の PowerCMSを利用した構築がメイン業務
  3. 3. bit part 紹介 / mersy • 柳谷真志 やなぎやまさし • アイ・ペアーズ株式会社
  4. 4. bit part 紹介 / tinybeans • 奥脇知宏 おくわきともひろ • かたつむりくんのWWW • Movable Type 5.1 プロの現場の仕事術 (毎日コミュニケーションズ)
  5. 5. bit part 紹介 / plugins • flexibleSearch • MTAppjQuery • MTML Completions • その他のMTプラグイン ドキュメント販売中
  6. 6. Data API で何ができる? Webサイトのオモテ側
  7. 7. サンプルサイト Six Apart のごはんレシピ
  8. 8. サンプルサイトの構成 • Movable Type on Cloud(爆速MT) • 1つのウェブサイト • ウェブサイトで記事を管理(MT6 new!) • カテゴリ、タグによる分類
  9. 9. Data API をどこに使っているか • 一覧ページ(トップページなど)で下までスクロー ルすると追加で読み込む無限スクロール • サイト内検索 • タグアーカイブ
  10. 10. サンプルサイトのデモ • 実際に見てみましょう http://makanai.sixapart.jp/
  11. 11. DEMOサイトの構成 < デザインについて > Data API で 追加読み込み
  12. 12. Data API で 検索
  13. 13. サンプルサイトの解説 • Movable Type 6 本格活用ガイドブック • Chapter 04 参照
  14. 14. 英単語帳スマホWebアプリ bitword
  15. 15. Data API をどこに使っているか • 一覧ページの表示・無限スクロール • ユーザー認証 • 記事の新規投稿・編集 • 記事のステータスの変更、下書き記事の表示
  16. 16. bitword のデモ • 実際に見てみましょう • デモ(公開画面・管理画面)
  17. 17. Data API を PHP で利用した ダイナミックページ
  18. 18. Data API を PHP で利用する • デモ
  19. 19. Data API で何ができる? Webサイトのウラ側
  20. 20. アイデア1 サンプル記事をまとめて作成 • Webサイト構築中のサンプル記事の投稿がとっても 楽に! • Data API を使った記事の作成 • デモ
  21. 21. アイデア2 クイック編集ウィジェット • ちょっとした記事の編集をサクッとやりたい! • Data API を使ったインクリメントサーチ • Data API を使った記事の更新・再構築 • ウィジェットの挿入は MTAppjQuery で • デモ
  22. 22. アイデア3 マルチファイルアップロードウィジェット • 複数の画像をまとめてアップロードしたい! • Data API を使ったアイテムのアップロード • ウィジェットの挿入は MTAppjQuery で • デモ
  23. 23. アイデア4 公開サイトを見たまま編集 Chrome 拡張機能 • 公開サイトを見たまま編集したい! • Google Chrome の拡張機能で Data API を使う • Data API を使った記事の編集(リッチテキストエ ディタも!)、新規投稿(複製)、削除 • デモ
  24. 24. このように Data API を使うと Movable Type のデータを Webサイトのオモテ側・ウラ側 で簡単・自由に扱える!
  25. 25. ご静聴ありがとう ございました。 Update bit part everyday!! MT::Lover::bitpart
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×