それではこちらのセッションでは、奥和さんにご答えいただきます。ワードプレスの次のステップにチャレンジ、レストAPIを使ったデータ表示ことはじめということでお話いただきます。奥和さんは横浜在住のフロントエンドエンジニアで、フリランスとして活動されていらっしゃいます。主にウェブサイト政策を行い、ワードプレスでの構築も得意で、SUOなどにも生通していらっしゃいます。最近ではリアクトやビュー、ララベルなどのフレームワークを使った開発も行っていらっしゃいます。本日を奥和さんには、ご自身のサイトを基にWPレストAPIを使って、記事一覧を表示する方法をデモを交えながらご紹介していただきます。それでは、奥和さん、よろしくお願いいたします。はい、よろしくお願いいたします。ちょっと待ってください。すみません。次のステップ、ニンチャレンジ、SAPIを使ったデータ表示ことはじめということで、セッションの方をはじめさせていただきます。よろしくお願いいたします。お願いいたします。今度もご紹介いただいたんですけれども、奥和さんと言います。本名は奥田雄と言います。別に隠しているわけではなくて、単純にこの名前でやっていこうかなという感じでやっています。普通に、HTPS、奥和さんとJPで調べたらこの名前を普通に載っているので、また良かったら見てください。あと、Twitterとかもフォロー、よかったらよろしくお願いします。3文字なんで検索しやすいです。僕は、先ほどご紹介いただいたんですけれども、フロントエンドエンジニアというのをしてまして、ワードプレスとかをもとにウェブ製作ですね。コンホレート系のサイトとかをよく作っています。最近では、リアクトとか、ユーとか、ラーベルとか、使った開発とかも行っています。あとは、僕地元見え県なんですけれども、そこのハンドウェブマガジーっていうのがあって、ウェブメディアですね。それを運営したり、いろいろしています。もちろんこれもワードプレスで作っています。ということで、今日はお紹介したりなと思っています。今日お話しすることは一つ目。ワードプレスレスとAPIについて概要。ということで、ワードプレスレスレスで何ですか?みたいなところをちょっと概略ですね。お話ししようかなと思っています。その後、ワードプレスレスレスで使い方ですね。ここは主に、今回は取得と表示。どうやってワードプレスレスPIを取得して表示するのかっていうのをちょっと説明したいなと思っています。ワードプレスレスとAPIで、どこに使ったらいいの?ってあると思うんですけれども、こういうところに使ったらいいんじゃないの?っていうちょっと提案も、こんなサイトで使えるっていうところで説明できたらなと思っていきます。最後というか、実際にやってみましょうということで、デモみたいなのをちょっとしたいなと思っていきます。デモはたぶん15分くらい、15分か2時間くらいかかるかなって思ってますので、よろしくお願いします。その最後に、質疑応答ということで、もしあれが質疑応答の方を手上げてもらって聞いてもらえればなと思っています。ということで、改めましてよろしくお願いいたします。気をつけます?気をつけます?気をつけます。ということで、ワードプレスレスとAPIに移って、その前にレスとAPIって何なんでしょうというところを説明したいなと思っています。レスとAPIってはリソースと呼ばれるパラメータを操ることで、ニーのデータをゲットしたりポストしたりできるべきAPIのことを言います。イメージはこんな感じです。クライアントというのは僕たちですね。ある固定のサービス名、何とかネットとかやって、これがサービスから提供されているんですね、何とかAPI。バツバツバツって書いてあるところが、リソースっていわれるパラメータを入れることによって、自分が欲しいデータを持ってくることができる。サービスがそれを受け取って、クライアントに返すという感じですね。ワードプレスの前はJSONで返ってきます。こういうことを使ってやるサービスというかレスとAPIというのはそういうものです。次、ということでワードプレスレスとAPIということは、レビューアレールを叩いてならデータが貰えるやつみたいな感じで覚えていてもらえたらなと思っていきます。ワードプレスレスとAPIはって言うと、いわれいただいてもらえずワードプレスパンみたいな感じですね。ということで、レスAPIについて分かったところで改めてまして、ワードプレスレスAPIについてお話したいなと思っております。ワードプレスレスAPIってポッドでできたわけじゃなくて、ワードプレスから。あとはプラグインの一つだったんです。WPレストAPIというものがプラグインとしてもともとあったんですよ。それをインストールすることによってレスAPIを使えますよっていうことだったんですけども、ワードプレスの4.7から正式にコアの方に導入されて、ワードプレスインストールをサークするだけで使えるようになるということですね。基本的にデフォルトでレストAPIが働いているので、ワードプレスのサイトとか見てある、これから話すコードとかを打てばデータが帰ってくる。何も拒否とかしていなかったらそのサイトでという形になります。一曲このワードプレスレストAPIって何ができるのということなんですけども、ワードプレスに限らず、レストAPIって結構できることがいろいろあって、ワードプレスでは投稿やページ、メーキやカテゴリー、ユーザーとか、それの取得とか追加、編集削除っていうのがワードプレスの管理画面外からできるようになります。要はさっきの表というか、2でURLをたかえてだけでこの追加取得追加編集削除が来ちゃいますみたいな感じです。取得についてはそのままURLをたたけば取得できるんですけども、追加編集削除っていうところは、そのままやっちゃったら困る人がすごいいっぱいなので、印象みたいなのがあって、それをちゃんと設定しているところ、ものしか追加とか編集とか削除とかになっています。今回は一番簡単というか取って取っつきやすい取得というところにフォーカーするとお話しできればなと思っています。ということでワードプレスレスAPIのデータの取得の例というところで出してみております。形っていうのも決まっていてワードプレスレスAPIっていうのはこんな形になります。htpsample.netwpjsonwpv2を出すとか、これを分解するとURL部分があって、あとはwpjsonwpv2っていうものをすらして嫌いったもの。これはおまじないみたいな感じで入れてください。何も思わずに。リゾースって言われても一番始めに話した、ここでパラメ、いろいろ変えれますよっていう。ここを価値くることでいろんな情報を取得することができます。例えばPostID1のデータを取ろうとしたときは、sample.netwpjsonwpv2 Post-1っていうことで、見た目的には分かりやすいっていう感じで、そこの位置を2に帰れば2本のデータを取得できたりします。あとは最新記事ご検を取得したい、それを並べたいリストで言うときには、こういう書き方して、PostHatなPage5みたいな感じで書くことによって、最新記事ご検を取得することができるんですけれども、詳しいオプションはワードプレイスレスクAPI Handbookっていうところにあるので、そこを見てもらったらいいかなと思います。後でスライドを共有するので、ここにリンク貼ってるので押したら飛べるようになってます。またチェックを具合します。かっと言って、このまま終わるわけではなくて、1個ちょっと例出したいなと。僕のサイトコーキックスっていう技術的なブログを書いたものがあるんですけど、皆さんご存知だと思うんですが、ここに来てるということは、それで、Page1ということで最新記事1件取ってこようと、そうするとこんな感じで定存形式で帰ってきますと。これを後はごにょごにょするっていう感じです。例えばこんな感じで取れます。ITが2043とか日付、あとタイトル、コンテントっていうのが記事の中身ですよね。とか色々取れるようになっています。こんな感じで取れますっていうところです。だけど、僕はスタート。データ取れるのが分かったけども、実際取れて使うんですか?みたいな。話がよく上がってくるんですけども、僕がちょっとおすすめというか、こういうときに使っていいんじゃないの?っていうのは、この感じで3つぐらい目を上げました。例えば、Heartpressのウェブサイトに表示したいとき、これは何を言うかというと、例えばECサイトとブログのもの、立ち上げた時期が違う。思想も違うが。だけど、ECサイトのところに、ワートプレスの記事を載せるとき、そういうときには、レストAPIでECサイトのところに載せれば、そこで見た目的にガッチャンができたような感じで使えるかな?っていう感じです。サーバー違いときなどに使うときがいるかなと思っています。あとは独自管理画面を作りたいとき、ワートプレスの管理画面って、シェルアートの人だと慣れたら使えるんですけど、ハードルが高いというのはガチガチして、ちょっと使いづらい。入れてもらえるところをおかすしたいときは、独自で管理画面、こことここを入れればOKみたいな感じで、あとは追加とかになるんですけども、ポストみたいなんで、レストAPIで問わして投稿しちゃうとか。っていうのができたりします。最後、ウェブアップリサイトなどに表示したいとき、例えば最近入ってるリアクトとか、リューとか、そういうのJSKで作ってるときに、ワートプレスそこにぶっ込むのもなぁみたいな感じのときとかは、こういう感じで、ワートプレスを本当にIPS側に使ってあげるという感じですね。これは、要はめっちゃ、なんかこれ話に聞いたところによると、普通のスマホのアプリとかにも、お知らせ、記事講師、質量をみたいなところのデータはワートプレスで使ってますっていうところもあったりとかして、何がいいかってデータベース1から設計しなくていいので、使いやすいようにも与えだけ取ってくれるようなデータベースが勝手にインシロートでもバック知らなくても作ることができると。こういうところで使っていけば結構充実した使い方ができるのかなと思っています、ですとAPIで。で、今回はですね、ECサイトじゃないんですけども、ペライチのHTMLサイト、僕のオクワースの公式のサイトに、コーキティプスのワートプレスのサイトをちょっと入れたいなって思う。あそこでちょっと出募しようかなと思っています。オクワースのサイトはAWPサイト、コーキティプスがWPサイトとなっているので、ここにコーキティプスの記事の情報をオクワースの方にちょっと流したいなと思います。というところで、今回これJSONなんでいろんな人表示の仕方があると思うんですけども、さっき言ってたリアクトとかでも使えるような感じでいくと、JavaScriptで今回ちょっと実装しようかなと思っています。はい。というところで出募します。少々お待ちください。ローカルのサイトになっています。こんな作りになってるんですけども、今までテーカーリックっていうのはなかったんですけど、これ今回追加しました。で、見た目的にはこんな感じで3件くらい表示したいなと思っています。ここにデータが入るよっていう感じです。これをちょっとしたいなと思っています。で、さっきのリストのところがここになりますね。これをですね、検して、ここのURLの中にデータをオープンみたいなと思っています。これくらいちょっと入れます。JavaScript作っていますと、これはファクションで、インポート先でこのファクションを呼び出しているんですけども、ここにちょっと入れると動くようにしたいなと思っています。で、まずというところなんですけども、このWP PostってさっきUNのところですね、で、他には影響を与えてないので、ここで一旦、これが効かないようにします。で、イメージ的には、ここの中で、ここにドームっていうので、さっきのリスト一個といっていて、これをこう入れますと。で、あとはこの中身のところを変えるだけですね。で、一旦これを花の状態にします。ポッケーしているので、これに関連してください。こんな感じで、絡みになりました。入れるところといえば、このHFの中とか、イメージの中とか、デートタイトルとか、これも入れていきたいなと思っています。で、最後のこれを入れたやつを、アペンドでWP Postの中に入れたいなという、ここでちょっとやっていきたいなと思っています。まずは、AJAXで倒しておいてきます。この中にこれを入れたやつを、入れます。で、次URLですね。もう入れたらこんな感じで。で、今回の場合だと、3件取ってくるんですけど、ちっちゃいですかね。で、これUndoMVというのが、クダゾーガーしておくできる。で、これは、しておくできるので、Blessless APIだと、これをまあ、欲し方に入れてくださいという感じですね。で、これで、前でつなぎます。で、ここで、Responseっていう返しが来た場合、で、選んでください。ちっちゃいのわかんないですけど、ちっとれてるんですけど、これをこのブラウザージョンチュン出しちゃうと、言われただけば、その程度までできるので、で、これ、偏性の仕方というのが、これが程度ですね。程度なのかというので、仕方に入れてされるようなのが良かったら使ってください。で、これで1軒のゲームですね。2軒のゲームを3軒のゲームでやっております。で、これちゃんと入れてるからOKですね。というので、これをほんのいい位置で回していきたいなと。これ取れたのに、これいらないですね。で、いい位置で、これを回していきたい。そして、その都度を入れていくということを知っています。では、特に実は何回やっていきましょうかというか、あとはこれを入れた点で例えばリンクが一番初めなんでリンクの回りに行きたいなと思っています。リンクの回り方ですけども、で、そんでみます。で、これみます。リンクってどこにあるかというと、ちょっとかのリンクなので、書き方的には、こんな感じで取れるので、これが表現できます。で、これはドットを追加していけばそこの値が取れますよという感じですごい分かりやすいなと。なので、これで良かったと思いました。で、次は、簡単なところにもタイプで他も取っていきたいなと思っています。相手もタイプル、ベンダー、とっても良いことがでいると、で、そのまま書く。で、ドットをベンダーに書けて気付け、いいので。なので、相手をデートと言うので、こういったニューで、大人みたいなものを書いております。で、デートで、デートのこれですね、この情報が入って2018年8月にとか、それがまんまの相手なのでそこにちょっと分割していきたいと思います。例えばね、取り越した場合に、こんな感じゲットフルイヤーというので、ゲットフルイヤーというので、ゲットフルイヤーが取れます。こういう感じで、つき、まんすとでいを取れます。ゲットフルイヤーは全然ブラス位置しないと、つき取るかならないので、こういう衣装としてあるのが。で、最後これで、イヤー、年と月とデイというのが取れたので、あとは、デートで、イヤー、スラッシュ、まんす、スラッシュ、デイという風にしてあげると、2018年スラッシュ、何月にスラッシュ、何日?で、次、画像ですね。画像をちょっと取り取りしたりですと、で、画像については、ここでつまざわすと、こんな感じで取れますと、WP Futureed Mediaというここ見る限りないんですよ。で、 Futureed Mediaというのはどこにあるかというと、これなんですけども、これって手にあって、1個目にはないんですね。これ何かというと、アイキャッチが設定されてない。アイキャッチ設定されてなかったらWP Futureed Mediaというのは出てこないんですよ。なので、そこらへんの処理とか、もしないといけないという感じになっています。で、さっきの感じだと、ここのやつもいいんですけど、リサイズされているやつがあったので、ここらへんのちょっと取ってこないんです。で、メディと、ここですね。で、ここはどこかというと、WP Futureed Mediaの中の、ボクったところのソースURL。で、単純にこのボクったところやったら番号でいけるんですよ。何番目とか。なので、書き方的にはFutureed Media結構ゼロ番目というのが出て、ソースURLが出る。で、これと言いますと。だけど、さっきのやつが、その時に処理しないといけないんです。その時どうするかというと、さっきの相って、それはコンテンツが入っているところです。で、レンダードというのが、その中に書いてある、レンダードの中にコンテンツ内容が入っています。で、それをコンテンツという風にして、要は基準の中で一番初めの画像を取ってきて、それを相気圧にしましょう。ということがですね。で、書き方はコンテンツの中で、リプレーズしてあると。で、処理的には一番初めのイメージを、URAですね。すら、この中のココを取っていきたいので、ココを取ってきて、さまに入れてあげましょうという処理です。で、これをまとめると、これもこれも、両方入りますよね。感じなくと、こんな感じになります。画像がフューチャーあるときは、こんな書き方ができます。ないときは、コンテンツ取ってきて、それは当てもらってくださいよ、という感じですね。じゃあ、これあとは、長感覚で、ここの中に入れていくだけですね。で、さっきリンクだったって言えることができます。で、画像の関しては、ロールさんの、あとリンクも入れますね。ここにも入れますね。で、あとタイトルのデートが必要ですね。はい、これで完成です。はい、設定を頂戴ですね。ここで一応、多分形成の問題と違えるです。はい。で、こんな感じで、謎が取れてきて、書いて、日付タイトル。で、こっちも3千分取れてますね、という話です。で、これで表示できました、という感じです。はい、これが一応テポイントです。すみません。はい。ということで、ちょっと最後、ごちゃごちゃになっちゃいましたけれども、まあ、イメージ的には、見て、その中にどんどん潜っていって、いえたら行けますよ、という形になっていきます。で、じゃあ、ということで、ちょっとまとめます。STMPIは、意外と簡単、WP、まあ、URLを打つだけで、簡単にデートを返ってくるので、扱いやすいですよ、という感じです。あとは、JSONが返ってくるので、JSONの処理をすれば、基本的には、回数もグッていくことにとうとうつけた、言ったければ、基本的には表示できるので、その辺で、まあ、取れないってことはないかな、と思っています。ワードプレスがあって、使えなくても、単純にワードプレスインソールして、そういった、その記事の内容だけを、あとはJSが使えれば、それで、いろいろ運用はできると思うので、だから、こんな感じで、ワードプレス、SAPIは、まだまだ全然使えますよ、ということですね。ということで、まとめになりました。はい、ご清聴ありがとうございました。ご清聴ありがとうございました。それでは続きまして、質疑応答の方に移らせていただきたいと思います。会場の中に、ご質問の方はいらっしゃいませんか。ご質問の方、居酒お願いします。私がマイクを持って、伺いますので、質問の方、居酒の方、お願いいたします。ジョーソンデータの中に、ステータスでパブリシューがあったと思うんですけど、そのままパブリシューがあるということは、下書き保存には非公開になったやつも取得できちゃうんですかね。そこは、多分できると思う。ちょっとそこらへんをまだ入れてないので、何とも言えないですけど、はい。おそらく、でもどうなんでしょうね。ちょっとそこらへんを僕のこの確認したいなと思います。すいません。はい、質問はよろしいでしょうか。一夜の質問がありましたので、この後、お暮らしさはネットワーキングルームの方にいらっしゃいますでしょうか。はい、そちらの方にぜひお越しください。それでは、お話と手文実念どうもありがとうございました。ありがとうございました。ありがとうございました。