WordCamp Tokyo 2018 「WordPress の次のステップにChallenge! REST APIを使ったデータ表示ことはじめ」のスライド

1. ocws

2. ocws
REST APIを使った
データ表示ことはじめ
WordPressの次のステップにChallenge!

3. ocws
ocws
自己紹介
フリーランス ／
フロントエンドエンジニア
横浜在住のフロントエンドエンジニア。
2015年1月からフリーランスとして独立。
Webサイト制作を主に行い、WordPressでの構築も得意としてい
る。SEOなどにも精通している。
ReactやVue、Laravelなどを使った開発も行っている。
地元三重県ではWebメディア「HANZOU Web Magazine」を運営
し、有志のチームを作り活動中。
（おくわす）
https://ocws.jp
@o9n

4. ocws
● WordPress REST APIについて（概要）
● WordPress REST API の使い方（取得／表示）
● こんなサイトに使える
● 実際にやってみましょう（私が）[デモあり]
● 質疑応答
本日のお話すること

5. ocws
WordPress REST API について

6. ocws
REST API とは
リソースと呼ばれるパラメータを操ることで
任意のデータをGETしたりPOSTしたりできるWeb APIのことを言います。
クライアント サービス
データ

7. ocws
URLを叩いたら、
データがもらえるやつ
REST API とは

8. ocws
URLを叩いたら、
データがもらえるやつ
（WordPress用）
WordPress REST API とは

9. ocws
WordPress REST API について
改めて

10. ocws
WordPress 4.7 から正式にコ
アに導入。
WordPress REST API について
https://github.com/WP-API/WP-API
WordPress REST APIは
もともとプラグイン。
https://developer.wordpress.org/rest-api/
デフォルトで
REST APIの機能が使える

11. ocws
で、何ができるの？

12. ocws
WordPress REST API はこんなことができる！
投稿や固定ページ、メディア、
カテゴリー、ユーザーなどの
取得
追加
編集
削除
がWordPressの管理画面外から
できる！
[取得] [追加] [編集] [削除]

13. ocws
WordPress REST API の
データ取得の例

14. ocws
WordPress REST API のデータ取得の例
こんな感じで書きます。
URL + /wp-json/wp/v2/ + リソース
いろいろ変える部分

15. ocws
WordPress REST API のデータ取得の例
Post ID1 のデータを取得
最新記事を5件取得
詳しいオプションについては、
WordPress REST API HandBookに書いてあります。

16. ocws
WordPress REST API のデータ取得の例
{
id: 2043,
date: "2018-08-11T14:48:10",
date_gmt: "2018-08-11T05:48:10",
guid: {
rendered: "http://koukitips.net/?p=2043"
},
modified: "2018-08-11T14:49:05",
modified_gmt: "2018-08-11T05:49:05",
slug: "post2043",
status: "publish",
以下省略・・・
}
の場合

17. ocws
データ取れるのはわかったけど、
実際どういうときに使うの？

18. ocws
実際 WordPress REST API ってどういう時に使うの？
● 非WordPressのWebサイトに表示したいとき
（サーバーが違うなど）
● 独自管理画面を作りたいとき
● Webアプリサイトなどに表示したいとき
（WordPressをデータベース代わり）

19. ocws
今回は
koukiTips (WPサイト)ocwsサイト（非WPサイト）
koukiTipsの情報をocwsサイトに表示する

20. ocws
今回はJavaScriptで実装

21. ocws
デモします

22. ocws
まとめ
● WordPress REST API は意外と簡単！
● JSONを読み解けば基本大丈夫！
● WordPress ががっつり使えなくても運用はできる！

23. ocws
ご静聴ありがとうございました