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

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

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

Shifter staticのおさらい  TAMくん

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

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

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

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

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

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

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

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

おまけ 

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

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

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

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

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

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

Shifter staticでREST APIしたい / Shifter Meetup 20...

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

Chinen

More Decks by Chinen

Other Decks in Programming

Featured

Transcript

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

知念昌史 / まぁし@chocodogmagic  TAM：フロントエンドエンジニア  • 沖縄でリモートワーク + リモート新人教育を担当  •

Shifter staticのおさらい  TAMくん

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

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

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

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

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

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

おまけ

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

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

まとめ  • Shifter staticは静的HTMLで公開される  • ユーザーのサイト閲覧時にリアルタイムでREST API（DBへのアクセス）はできない  • Shifterのgenerateでjsonファイルを生成することはできる  •

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

Shifter staticで REST APIしたい / Shifter Meetup 20...

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

More Decks by Chinen

Other Decks in Programming

Featured

Transcript

Shifter staticでREST APIしたい / Shifter Meetup 20...