WP REST API、話題になってきていますね。 ですが実案件ではなかなか使用することがないのではないかと思います。 今回は個人で手軽に楽しめつつ、Webアプリケーションっぽいものを作る方法をご紹介します。
さっきのスライドです。
— hidetaka okamoto (@motchi0214) 2016年10月9日
WP REST API + React / AngularJSで はじめるWebアプリケーションhttps://t.co/wxJrqrER1G#wbkyoto #ng_kyoto #wordbench #fb
WP REST API + React / AngularJSではじめるWebアプリケーション
Wordpressのこれ使わないと出来ないと思っていたことがJS使って簡単にできるよねという話をしたいと思います。
Amimotoの中の人やってます。
WP Rest API のおさらい
WP Rest API といえばこのプラグインです。
(Version 2) とついているところがポイントです。
このPlug Inは突然開発が止まることは有りますか？
Wordpressの新機能はPlug Inで実装されてから本体に入る。Wordpressのコミュニティの方が、WordpressもRest APIつけようぜという話になって、Plug Inでの開発が始まった。
Wordpressは後方互換性を重視するので、新しい機能をいきなりCoreに入れることには慎重です。
フィードバックを受けて改善したりして、安定してからCoreに入ります。
たとえばcurlで取得するとこのようになります
wp-jeon/wp/のあとに独自エンドポイントを追加する。
filterクエリがあって、記事検索のときのクエリとほぼ同じものを指定できる。
ドキュメント日本語あるけど追いついていなくて翻訳してくれる人募集です！
WordpressでAngularを扱うためのプラグインがあります
WordpressのPHPのテンプレートタグとほぼ同じ形でマークアップできるように作られています
テンプレートやっている人が触ろうという場合は触りやすいようになっていると思います
本格的にすべてのことが出来るわけではないですが、基本的な部分は大抵できるようになっています。
クエリはこれだけ利用可能
- wpi-root
- post-type
- par-page
- offset
- post-id
- filter
何が出来るのか
ここにエンドポイントを指定
瀬戸内海の小さな島にWorpCapm歴代実行委員長が2人移住していて、民家を再生して男木島図書館を作った。三宮からフェリーで明日とか言ってみて下さい。このサイト、Wordpressで出来ています。
このサイトのスマホ版がさっきのフレームワークで作られています。
お知らせとかを
こういうコードでとってきています。
あとReactやってみたい人、ReactのチュートリアルがWordpressを題材にやってみるのがちょうどいい感じになっています。
フォームがあって投稿すると記事が追加されるという仕組みをやるんですが、まずはこのチュートリアルをひたすらやってもらって、
これだけ変更します
最後にサンプルのやつが持ってるデータ構造とWP Rest APIのデータ構造が違うのでここもちょっと買える
と、
Reactで記事をリスト出来ます
投稿までやるには
サンプルはPOSTしておけば3秒か4秒ごとにAPI叩くので3秒後には新しい投稿をとってきてくれて表示されるはず。
JS と WP Rest API で変わる
いままでWordpressのPHPやテンプレートタグだけでやっていたところにとらわれなくなって
例えば音声
イベントでセッションを自分たちが見れるように、スポンサーブースを無人にする計画
Amazon Echoに接客をさせた。
キャプチャした音声を文字列に置き換えて、後ろでAPIを呼ぶ。呼び出すコードを裏で書いて、WP REST API で記事を検索して、返して、音声で再生。
質問すると記事を検索して答えを読み上げる。このへん見ていただくと。でもでやり取りしているところと事故っているところを見れます。
記事をWP REST APIでとってくるけど、カスタム投稿タイプとかをやっていると検索が難しいので、検索はElasticSearchにやらせるとか、ステップメール送りたいとかでPHP書いたりせず、オープンソースのマーケティングツールに任せるとか。
そうするとWordpressの開発辛くなくて、得意な個にそれぞれ任せるということが出来る。
あとはSingle Page Applicationのコンテンツ部分をWordpressで管理するようにするとか
うちの会社はこういうの作ってます、チュートリアルなんですが、内容ベタ打ちでGithub管理している。
更新が面倒で、ベタ打ちになってるテキスト部分をREST APIでとってくるようにすると、ここ触らずにWordpressのここ書き換えといて、ということが出来るようになる。
いままでは媒体毎にコンテンツを更新していた。イベントの日程が変わったら各管理者に連絡しないといけない。
それを、データはWordpressに書いて他の媒体はAPIで取得するようにするとすべての情報を簡単に書き換えられるようになる。
これめっちゃ面白い本です。AnlugarとかのSPAでサイト作る人にはすごく向いているので、呼んで翻訳してはてなブログとかに投稿してくれるととても助かります。
読書会とかします？
今まで通りの作り方がなくなるわけではない
こういうサイト作ってと言われたら、テーマとプラグイン組み合わせて作ったほうが早い。 無理に頑張ってRC版に手を出して辛い目に会いながらリリースするとかしなくても、さっさと作って、自分の時間で触りたいもの触るほうが良いと思います。
どっち使うべき
モバイルアプリやオムニチャネル展開が見えていればAPI入れたら良いかもしれないし、AngularとかバリバリやっていてWordpress覚えたくないとかだったら良いのではないか
テーマやプラグインの設定で済むなら済ませたほうがよいだろうし、チームにテーマ作れる人がいるならその人が好きなように作ったほうが良いと思う。
QA
クラウドフロントSLA90％台だった気がする
2014年に一度落ちて2時間止まったらしい
Route 53 は100％なので切り替えられるクラウドフロント用意するか、S3にバックアップを静的ホスティングしておいて、落ちたらS3の静的賀されたサイトに流すとかすると、Route53以外が落ちたときにもなんとかなるかなと思います。
ただ、費用対効果で、実はその2時間ごめんなさいしている方が安かったということもあるので。そのあたりを見てもらって予算見て検討するのが良いとおもいます。
最後から2つ目のスライド、JSが得意なチームで裏がWordpressってどんなパターンかなと思った
既存WordpressでJSエンジニアチームがやる時。JSでフロントをオシャレにしたいけどPHP触りたくないときとか。
Reactのサンプルを調整せずに動かすとどうなりますか
変換できずに落ちます、何も出ません。Reactは処理が終わったら描画を更新するが、コケたら表示されない。
WP Angular使う必要があるか
作ってみたみたいな感覚で作られたもの。試してみたいとかの用途で。
Angular使うんだったら自分で作りゃよくないかと思った
出来るならやっちゃえば出来ると思う。まぁ使える人たちばかりではないので。知ってもらえるように。
Fetch API派です。
みんなの反応
twitter.comVue.js「翻訳募集してます」
— Potato4d (@potato4d) 2016年10月9日
WP「翻訳募集してます」#wordbench #wbkyoto #ng_kyoto
twitter.comデータストアとしての WordPress めいている #wbkyoto
— ミーハー (@utgwkk) 2016年10月9日
twitter.com岡本さんの話の後で毎回触りたくなる #wbkyoto
— コニタン (@skd_nw) 2016年10月9日
