16.12.18（日） WordBench東京 12月勉強会 「 Xmas ＆年末 LT 大会！」〜ピザとケーキとライトニングトーク〜　での発表スライドです。 焼き鳥サイトでフォトリストを作って、写真をクリックしたら掲載記事が読めるようにしました。 フォトリストでの写真の取得をREST APIで行っています。 事前準備として、管理画面のメディアで写真の検索キーワードや記事URLを設定しています。 AJAXでREST APIを叩いて、データ取得後に配置を行います。 今回のまとめ WordPress4.7 からプラグインなしでもREST APIが使えるようになりました。 クロスドメインに対応しています。異なるドメインでもデータ取得できる。 WordPressでデータを作って、他のサイトやスマホアプリで利用する構成が行いやすいです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ◆制作業務 TickleCodeという屋号でJavaScript、WordPressでのWebサイト制作やSwiftでのアプリ開発、Ruby on RailsでのWebサービス開発などを行なう。 業務請負や受託制作を行いながら、自社ポータルサイト・Webサービスサイトの制作運営を行なう。 地域のポータルサイトや、旅行系サイト、不動産系サイトの制作運営は本人も興味が強いので、めっぽう強い。 ［運営サイト］ TickleCode： 技術的な情報を整理して掲載している http://ticklecode.com/ I Love Yakitori!： 焼き鳥が好きなので焼き鳥店の取材をしてWebサイトへ掲載している http://yakitori-ya.net/ ◆勉強会、コミュニティ オープンソースであるWordPressのコミュニティ・イベントの運営にも携わりながら、自らも勉強会やイベントを企画運営する。 WordPressもくもく倶楽部、Swiftビギナーズ倶楽部など、多数の勉強会・セミナーの開催を行い、自身もスピーカーや講師を行っている。 ［定期開催している勉強会］ Swiftビギナーズ倶楽部： 2014年11月より開催。SwiftでiOSアプリ開発を勉強するための会。 https://swift-beginners.doorkeeper.jp/ WordPressもくもく倶楽部： 2014年11月より開催。WordPressでの制作・運営を勉強するための会。 https://wp-moku.doorkeeper.jp/ WordPressコントリビュート倶楽部： 2015年12月より開催。WordPressコントリビュート（翻訳、プラグインなどの貢献活動）を勉強するための会。 https://wpmake.doorkeeper.jp/ Ruby / Ruby on Rails ビギナーズ勉強会： 2015年1月より開催。Ruby on Railsでの制作・運営を勉強するための会。 https://coedo-rails.doorkeeper.jp/

1. WordBench東京 12月勉強会 「 Xmas ＆年末 LT 大会！」
〜ピザとケーキとライトニングトーク〜
WordPress 4.7 REST API コンテンツエンドポイント
Yoshinori Kobayashi
1
REST APIを使ってフォトリストを作る

2. 2
生まれは 奈良県 です
小林由憲（こばやしよしのり）
Twitter:
TickleCodeブログ:
@yoshiii514

3. もくもく会（自主勉強会）
を複数の運営メンバーや
アドバイザーの方々と
ともに、定期開催しています。
勉強会を開催しています)^o^(
3
【CoEdo.rb】
Ruby / Ruby on Rails
ビギナーズ勉強会
Swiftビギナーズ勉強会
WordPressもくもく
勉強会
http://wp-moku.doorkeeper.jp/
https://swift-beginners.doorkeeper.jp/
https://coedo-rails.doorkeeper.jp/
自己紹介

4. 4
思う存分に、翻訳・プラグイン開発・テーマ制作
・Core（本体）開発を学びたかったので、新しく勉
強会を始めました！
WordPress
コントリビュート勉強会
自己紹介
第６回は、１月８日（土）１４:００

5. 5
http://yakitori-ya.net/photolist/
デモをします
フォトリスト：写真から選ぶ焼き鳥店

6. 6
管理画面：メディアの設定
注出用のキーワード
（キャプションで代用）
記事URL。代替テキストで代用

7. 7
WordPress 4.7
REST API コンテンツエンドポイントの導入
WP REST API プラグインがなくてもAPIが
フル稼働するようになった。
http://ja.wp-api.org/

8. 8
メディア（画像、動画など）の取得
http://yakitori-ya.net/wp-json/wp/v2/media
サイトURL エンドポイント
サイトURLの後に、メディアを取得するエンドポイン
トを指定します。

9. 9
メディアの特定の画像のみ取得
http://yakitori-ya.net/wp-json/wp/v2
/media?media_type=image&search=photolist
「photolist」が含まれる画像を指定
エンドポイントの後に、「?」に続いてパラメタを指
定。パラメタが複数のときは、「&」でつなげる。

10. 10
Ajaxで取得して、画像を並べる
<script>
$.ajax({
type: "GET",
url:"http://yakitori-ya.net/wp-json/wp/v2/media",
data:{
media_type: 'image',
search: 'photolist'
},
dataType: "json",
success: function(rtn_data){
…. // HTMLを作成、画像を並べる
}
});
</script>
URLパラメタ
エンドポイント

11. 11
まとめ
・WordPress4.7 からプラグインなしで使える。
・クロスドメイン。
（異なるドメインでもデータ取得できる）
・WordPressでデータを作って、他のサイトやスマホア
プリで再利用しやすい。

12. ご清聴ありがとうございました。
12