WP-APIを使ってみよう&No PHPテーマという考え方
-
Upload
hidetaka-okamoto -
Category
Engineering
-
view
399 -
download
1
Transcript of WP-APIを使ってみよう&No PHPテーマという考え方
![Page 1: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/1.jpg)
PHP使わんでもいけるWordPressテーマの話
2015 WordBench 奈良
![Page 2: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/2.jpg)
はじめに
![Page 3: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/3.jpg)
今日持って帰って欲しいもの
• WP-APIという新しいAPIの存在
• JavaScriptで記事リストや検索機能を作るアイデア
• 「Polymerすげぇ!」という気持ち
• WordCamp Kansai 2015の参加確認メール
![Page 4: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/4.jpg)
なまえ:おかもとひでたか
いえ:きょうと
しごと:PHPえんじにあ
そのほか:WordCamp Kansai 2015広報
きになること:WP-API, React.js, Polymer,JSON-LD
![Page 5: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/5.jpg)
1WP-APIとは?
![Page 6: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/6.jpg)
WP-APIとは?
• 「WordPressそのもの」のAPI
• 投稿・固定ページ・メディア・コメントetc..
• コア機能実装予定のβ版プラグインが存在する
![Page 8: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/8.jpg)
2とりあえずつかってみよう
![Page 10: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/10.jpg)
![Page 11: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/11.jpg)
WP-API 実験場
![Page 12: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/12.jpg)
URLを入れて・・・
Submit!
![Page 13: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/13.jpg)
WP-APIがある時
![Page 14: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/14.jpg)
サイトの情報が表示される
![Page 15: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/15.jpg)
WP-APIが無い時
![Page 16: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/16.jpg)
![Page 17: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/17.jpg)
Try it!
• http://wp-kyoto.net/
• http://www.aiship.jp/knowhow/
• http://demo.media-assembly-kit.com/
![Page 18: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/18.jpg)
APIらしくデータを
指定してみよう
![Page 20: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/20.jpg)
![Page 21: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/21.jpg)
filterクエリ 実験場
![Page 22: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/22.jpg)
2:Submit!
1:取りたいデータを設定して・・・
![Page 23: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/23.jpg)
記事リスト
![Page 24: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/24.jpg)
RSSよりも 絞り込みが効く
![Page 26: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/26.jpg)
jQueryでいろいろといじってみよう
![Page 28: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/28.jpg)
![Page 29: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/29.jpg)
Click!!
![Page 30: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/30.jpg)
Customize:)
![Page 31: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/31.jpg)
3こんなこともできるWP-API
![Page 32: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/32.jpg)
1No PHPなWebサイト
![Page 34: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/34.jpg)
Media Assembly Kit
• WP-APIを活用したサイト構築サービス
• PHPを使わないテーマも存在している
• GitHubにテーマファイルも公開されている
![Page 37: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/37.jpg)
React.js
• Facebookが開発したJSライブラリ
• 双方向ではなく1方向のデータフロー(Flux)
• React-Routerなどでサイト構築も可能
![Page 39: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/39.jpg)
Polymer
• 2015年のGoogle I/Oでついに1.0公開
• WebComponentsが(比較的)簡単に使える
• もっと注目されるべき
![Page 40: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/40.jpg)
2モダンな検索フォーム
![Page 41: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/41.jpg)
モダンな検索フォーム
• JSを使ってAPI経由でデータを取得する
• $.ajaxなどで非同期データ処理が可能
• 入力に即反応する検索フォームが作成可能
![Page 42: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/42.jpg)
3アプリ基盤
![Page 43: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/43.jpg)
アプリ基盤としてのWordPress
• 実は記事投稿とかもできちゃうWP-API
• WordPressでデータ処理⇔アプリで表示・操作
• 今あるサイトをそのままアプリに転用!?
![Page 44: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/44.jpg)
WP-APIの
今後
![Page 45: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/45.jpg)
WP-APIの今後
• 現在のバージョンは1.2.2(2015/06/01時点)
• GitHubでは2.0が開発進行中
• 2015年内のコア実装目指している・・・らしい
![Page 46: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/46.jpg)
WP_Queryとの共存• PHPの方が便利・早い時も多い
• PHP7.0やHHVMの方がいいかも・・・?
• 用法用量に応じて使い分けるのが吉
• Above The FoldはPHPで
• サブコンテンツはAPIでLazy loadする
![Page 47: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/47.jpg)
というかNoPHPでは
公式テーマは多分ムリ
![Page 48: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/48.jpg)
JSON-LD
&
WebComponent
![Page 56: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/56.jpg)
https://wordpress.org/plugins/ejls-easy-json-ld-setter/
![Page 57: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/57.jpg)
https://wordpress.org/plugins/make-json-ld-for-custom-fields/
![Page 58: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/58.jpg)
https://wordpress.org/plugins/make-json-ld-for-custom-fields/
JSON-LDも もっと流行れ
![Page 59: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/59.jpg)
おわりに(宣伝)
![Page 60: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/60.jpg)
![Page 61: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/61.jpg)
1WordCampとは?
![Page 62: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/62.jpg)
WordCampとは?
• WordPressのユーザーが集まるカンファレンス
• WordPressに関する様々なセッションを開催
• 初心者~コア開発者までが交流できる場所
• 日本では2014年に東京・関西の2地域で開催
![Page 63: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/63.jpg)
![Page 64: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/64.jpg)
WordCamp Kansai2015
• 2015年7月25日26日の土日開催
• 会場は大阪大学豊中キャンパス
• 入場無料、定員両日500名
![Page 65: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/65.jpg)
22015年の見どころ
![Page 66: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/66.jpg)
1参加型!
![Page 67: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/67.jpg)
参加型コンテンツが沢山!
• テーマ制作
• ユニットテスト/継続的インテグレーション
• 初心者のためのWordPress.com入門
• etc..
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。
![Page 68: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/68.jpg)
2WordPress × ?
![Page 69: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/69.jpg)
周辺技術も学べるセッション• GitHub
• オープンデータ
• 継続的インテグレーション/デプロイ
• NPO/NGO/地域化活動
• コアコントリビューション
現時点での情報です。追加・変更等が発生する可能性がございますのでご了承ください。
![Page 70: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/70.jpg)
3参加費無料!
![Page 71: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/71.jpg)
3参加方法
![Page 72: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/72.jpg)
![Page 75: WP-APIを使ってみよう&No PHPテーマという考え方](https://reader034.fdocuments.net/reader034/viewer/2022042518/55beb780bb61eb2b3c8b477a/html5/thumbnails/75.jpg)
ぜひご参加を
٩( ‘ω’ )و