読者です 読者をやめる 読者になる 読者になる

WP REST API + React / AngularJSではじめるWebアプリケーション - WordBench 京都 & ng-kyoto 10月勉強会 #wbkyoto #ng_kyoto #wordbench

twitter.com

WP REST API、話題になってきていますね。 ですが実案件ではなかなか使用することがないのではないかと思います。 今回は個人で手軽に楽しめつつ、Webアプリケーションっぽいものを作る方法をご紹介します。

WP REST API + React / AngularJSではじめるWebアプリケーション

f:id:niwatako:20161009140944j:plain

f:id:niwatako:20161009140946j:plain

f:id:niwatako:20161009140947j:plain

Wordpressのこれ使わないと出来ないと思っていたことがJS使って簡単にできるよねという話をしたいと思います。

Amimotoの中の人やってます。

f:id:niwatako:20161009140952j:plain

f:id:niwatako:20161009141003j:plain

f:id:niwatako:20161009141038j:plain

WP Rest API のおさらい

WP Rest API といえばこのプラグインです。

f:id:niwatako:20161009141101j:plain

(Version 2) とついているところがポイントです。

f:id:niwatako:20161009141136j:plain

4.4ではコアにAPIの機能の一部が実装済みです。


このPlug Inは突然開発が止まることは有りますか?

Wordpressの新機能はPlug Inで実装されてから本体に入る。Wordpressのコミュニティの方が、WordpressRest APIつけようぜという話になって、Plug Inでの開発が始まった。

Wordpress後方互換性を重視するので、新しい機能をいきなりCoreに入れることには慎重です。

フィードバックを受けて改善したりして、安定してからCoreに入ります。


たとえばcurlで取得するとこのようになります

f:id:niwatako:20161009141451j:plain

f:id:niwatako:20161009141509j:plain

wp-jeon/wp/のあとに独自エンドポイントを追加する。

filterクエリがあって、記事検索のときのクエリとほぼ同じものを指定できる。

f:id:niwatako:20161009141636j:plain

ドキュメント日本語あるけど追いついていなくて翻訳してくれる人募集です!

f:id:niwatako:20161009141709j:plain

f:id:niwatako:20161009141735j:plain

WordpressでAngularを扱うためのプラグインがあります

f:id:niwatako:20161009141748j:plain

f:id:niwatako:20161009141815j:plain

WordpressPHPのテンプレートタグとほぼ同じ形でマークアップできるように作られています

f:id:niwatako:20161009141903j:plain

テンプレートやっている人が触ろうという場合は触りやすいようになっていると思います

f:id:niwatako:20161009141926j:plain

f:id:niwatako:20161009141927j:plain

本格的にすべてのことが出来るわけではないですが、基本的な部分は大抵できるようになっています。

f:id:niwatako:20161009141935j:plain

クエリはこれだけ利用可能

f:id:niwatako:20161009142005j:plain

  • wpi-root
  • post-type
  • par-page
  • offset
  • post-id
  • filter

何が出来るのか

f:id:niwatako:20161009142133j:plain

f:id:niwatako:20161009142140j:plain

f:id:niwatako:20161009142152j:plain

f:id:niwatako:20161009142205j:plain

ここにエンドポイントを指定

f:id:niwatako:20161009142219j:plain

f:id:niwatako:20161009142251j:plain

f:id:niwatako:20161009142252j:plain

瀬戸内海の小さな島にWorpCapm歴代実行委員長が2人移住していて、民家を再生して男木島図書館を作った。三宮からフェリーで明日とか言ってみて下さい。このサイト、Wordpressで出来ています。

f:id:niwatako:20161009142302j:plain

このサイトのスマホ版がさっきのフレームワークで作られています。

f:id:niwatako:20161009142403j:plain

お知らせとかを

f:id:niwatako:20161009142428j:plain

こういうコードでとってきています。

あとReactやってみたい人、ReactのチュートリアルWordpressを題材にやってみるのがちょうどいい感じになっています。

f:id:niwatako:20161009142443j:plain

フォームがあって投稿すると記事が追加されるという仕組みをやるんですが、まずはこのチュートリアルをひたすらやってもらって、

これだけ変更します

f:id:niwatako:20161009142529j:plain

f:id:niwatako:20161009142537j:plain

最後にサンプルのやつが持ってるデータ構造とWP Rest APIのデータ構造が違うのでここもちょっと買える

f:id:niwatako:20161009142615j:plain

と、

f:id:niwatako:20161009142632j:plain

Reactで記事をリスト出来ます

投稿までやるには

f:id:niwatako:20161009142656j:plain

サンプルはPOSTしておけば3秒か4秒ごとにAPI叩くので3秒後には新しい投稿をとってきてくれて表示されるはず。

JS と WP Rest API で変わる

f:id:niwatako:20161009142756j:plain

いままでWordpressPHPやテンプレートタグだけでやっていたところにとらわれなくなって

例えば音声

f:id:niwatako:20161009142817j:plain

イベントでセッションを自分たちが見れるように、スポンサーブースを無人にする計画

f:id:niwatako:20161009142832j:plain

Amazon Echoに接客をさせた。

f:id:niwatako:20161009142908j:plain

キャプチャした音声を文字列に置き換えて、後ろでAPIを呼ぶ。呼び出すコードを裏で書いて、WP REST API で記事を検索して、返して、音声で再生。

質問すると記事を検索して答えを読み上げる。このへん見ていただくと。でもでやり取りしているところと事故っているところを見れます。

f:id:niwatako:20161009143010j:plain

f:id:niwatako:20161009143042j:plain

f:id:niwatako:20161009143044j:plain

記事をWP REST APIでとってくるけど、カスタム投稿タイプとかをやっていると検索が難しいので、検索はElasticSearchにやらせるとか、ステップメール送りたいとかでPHP書いたりせず、オープンソースマーケティングツールに任せるとか。

そうするとWordpressの開発辛くなくて、得意な個にそれぞれ任せるということが出来る。

あとはSingle Page Applicationのコンテンツ部分をWordpressで管理するようにするとか

f:id:niwatako:20161009143219j:plain

うちの会社はこういうの作ってます、チュートリアルなんですが、内容ベタ打ちでGithub管理している。

f:id:niwatako:20161009143239j:plain

更新が面倒で、ベタ打ちになってるテキスト部分をREST APIでとってくるようにすると、ここ触らずにWordpressのここ書き換えといて、ということが出来るようになる。

いままでは媒体毎にコンテンツを更新していた。イベントの日程が変わったら各管理者に連絡しないといけない。

f:id:niwatako:20161009143333j:plain

それを、データはWordpressに書いて他の媒体はAPIで取得するようにするとすべての情報を簡単に書き換えられるようになる。

f:id:niwatako:20161009143416j:plain

これめっちゃ面白い本です。AnlugarとかのSPAでサイト作る人にはすごく向いているので、呼んで翻訳してはてなブログとかに投稿してくれるととても助かります。

f:id:niwatako:20161009143434j:plain

読書会とかします?

今まで通りの作り方がなくなるわけではない

f:id:niwatako:20161009143537j:plain

こういうサイト作ってと言われたら、テーマとプラグイン組み合わせて作ったほうが早い。 無理に頑張ってRC版に手を出して辛い目に会いながらリリースするとかしなくても、さっさと作って、自分の時間で触りたいもの触るほうが良いと思います。

どっち使うべき

バイルアプリやオムニチャネル展開が見えていればAPI入れたら良いかもしれないし、AngularとかバリバリやっていてWordpress覚えたくないとかだったら良いのではないか

f:id:niwatako:20161009143631j:plain

テーマやプラグインの設定で済むなら済ませたほうがよいだろうし、チームにテーマ作れる人がいるならその人が好きなように作ったほうが良いと思う。

f:id:niwatako:20161009143723j:plain

QA

AWSについてサラッと有りましたが、クラウドフロントの冗長化はすべきか

クラウドフロントSLA90%台だった気がする

2014年に一度落ちて2時間止まったらしい

Route 53 は100%なので切り替えられるクラウドフロント用意するか、S3にバックアップを静的ホスティングしておいて、落ちたらS3の静的賀されたサイトに流すとかすると、Route53以外が落ちたときにもなんとかなるかなと思います。

ただ、費用対効果で、実はその2時間ごめんなさいしている方が安かったということもあるので。そのあたりを見てもらって予算見て検討するのが良いとおもいます。

最後から2つ目のスライド、JSが得意なチームで裏がWordpressってどんなパターンかなと思った

f:id:niwatako:20161009144248j:plain

既存WordpressでJSエンジニアチームがやる時。JSでフロントをオシャレにしたいけどPHP触りたくないときとか。

Reactのサンプルを調整せずに動かすとどうなりますか

f:id:niwatako:20161009144303j:plain

変換できずに落ちます、何も出ません。Reactは処理が終わったら描画を更新するが、コケたら表示されない。

WP Angular使う必要があるか

作ってみたみたいな感覚で作られたもの。試してみたいとかの用途で。

Angular使うんだったら自分で作りゃよくないかと思った

出来るならやっちゃえば出来ると思う。まぁ使える人たちばかりではないので。知ってもらえるように。

サンプルコードが $ajax ですが Fetch API 派ですか?

Fetch API派です。

みんなの反応

twitter.com

twitter.com

twitter.com