Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02

by Chinen

Slide 1

Slide 1 text

Shifter staticで  REST APIしたい  2020/12/02　まぁし / 知念昌史 

Slide 2

Slide 2 text

知念昌史 / まぁし@chocodogmagic  TAM：フロントエンドエンジニア  ● 沖縄でリモートワーク + リモート新人教育を担当  ● CSS好き、JavaScript、PWA、Movable Type、 WordPress  ● 技術コミュニティ運営  ○ PWA Night（東京）/ v-okinawa（沖縄）   ● ゲーム好き  ○ ポケモン剣盾ランクマッチ挑戦中、スプラトゥーン、   キングダムハーツⅢ  

Slide 3

Slide 3 text

Shifter staticのおさらい  TAMくん

Slide 4

Slide 4 text

Shifter staticはWordPressを静的出力する  Shifter上で動くWordPressサイトから静的HTML を生成し（SSG）、AWS（CDN）で公開。（更新中以外はWordPressは停止）  サイトにアクセスしたユーザーはWordPress環境ではなく、出力後のファイルを閲覧する。  ユーザーのサイト閲覧中も、  WordPressは動いていない。  表示速度◎  安全性◎  AWS HTML HTML HTML HTML 閲覧閲覧生成

Slide 5

Slide 5 text

要望：動的な表示の切り替え 

Slide 6

Slide 6 text

アクセスしたタイミング（日時）で内容を変えたい  普通のWordPressなら、  ● アクセス日と記事の公開日を比較して動的に表示（PHP）  ● REST APIで記事情報を取得してアクセス日と比較（JavaScript）  静的HTMLだとどうする？  テンプレートに公開日を埋め込む？（）    1週間以内のお知らせ記事があれば丸い通知を出す 

Slide 7

Slide 7 text

固定ページで  jsonを出力する  WordPressテーマで、  API用の固定ページテンプレートを追加する  例：page-api.php  よくあるREST APIの書き方に近い（最後にecho） 

Slide 8

Slide 8 text

出力後のページ  /api/index.html   

Slide 9

Slide 9 text

出力後のページ  /api/index.html    ←!!!? 

Slide 10

Slide 10 text

ちょっとキモチワルイけど動いた  AjaxでよくあるXMLHttpRequest で取得できた。  HTMLの中身を取得するので【文字列】扱いとなる。  jsonとして扱いたいときは、JSON.parse(); で変換する。  右の例ではXMLHttpRequest で取得したテキスト情報をローカルストレージに保存している。 

Slide 11

Slide 11 text

WordPressが動いていなくても  REST APIの情報を取得・活用できた 

Slide 12

Slide 12 text

おまけ 

Slide 13

Slide 13 text

じつは・・・あとから気づいた  Shifterに対応したREST APIをjsonファイルで静的生成するWPプラグインが  あるとのこと（もっと早く知りたかった）  https://github.com/getshifter/wp-serverless-api       

Slide 14

Slide 14 text

とりあえずプラグイン入れてみた・・・お？  jsonファイルが生成された！でもちょっと思ってたのと違う？  カスタム投稿タイプはどうやって含ませる？   

Slide 15

Slide 15 text

GitHubのプラグインの中身を見てみると・・・  arrayの部分にカスタム投稿タイプを追加して  プラグインを上書きしてみる。  ※functions.phpでカスタム投稿タイプをRESTに含むよう設定  →動いた！！！  どうやらここでRESTに含める内容を設定している？ 

Slide 16

Slide 16 text

プラグインの中身が理解できた  jsonの出力先の設定やファイル生成の関数を見たところ、やっている処理が理解できたので、functions.phpに同様の処理を追加したらプラグイン無しでも対応できそう！  プラグイン作成者（Daniel Olsonさん）ありがとうございます！！！  うまく解決できそうなので、近いうち記事を書きます！！  （アドベントカレンダーは間に合わないかも＞＜） 

Slide 17

Slide 17 text

まとめ  ● Shifter staticは静的HTMLで公開される  ● ユーザーのサイト閲覧時にリアルタイムでREST API（DBへのアクセス）はできない  ● Shifterのgenerateでjsonファイルを生成することはできる  ● 使いたいREST APIの内容をjsonファイルで生成すれば、サイト閲覧時のJavaScript で処理できる  データを受け取るだけなら  Shifter staticでもREST APIを使った表現ができる  ※Shifterだと動的処理できない先入観があったりするので、  　知見のある人が身近にいてほしいですね！ 

Slide 18

Slide 18 text

以上です、ありがとうございました！！！  Twitter @chocodogmagic  まぁし  フォローしてね！！  PWA Night  毎月第3水曜に  開催中！！ 