$30 off During Our Annual Pro Sale. View Details »

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

Chinen
December 02, 2020

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

Chinen

December 02, 2020
Tweet

More Decks by Chinen

Other Decks in Programming

Transcript

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


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

    CSS好き、JavaScript、PWA、Movable Type、 WordPress
 • 技術コミュニティ運営
 ◦ PWA Night(東京)/ v-okinawa(沖縄) 
 • ゲーム好き
 ◦ ポケモン剣盾ランクマッチ挑戦中、スプラトゥーン、 
 キングダムハーツⅢ 

  3. Shifter staticのおさらい
 TAMくん

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


    安全性◎
 AWS HTML HTML HTML HTML 閲覧 閲 覧 生成
  5. 要望:動的な表示の切り替え


  6. アクセスしたタイミング(日時)で内容を変えたい
 普通のWordPressなら、
 • アクセス日と記事の公開日を比較して動的に表示(PHP)
 • REST APIで記事情報を取得してアクセス日と比較(JavaScript)
 静的HTMLだとどうする?
 テンプレートに公開日を埋め込む?(<body data-news=”20201116”>)


    
 1週間以内のお知らせ記事 があれば丸い通知を出す

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


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


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


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

    で取得したテ キスト情報をローカルストレージに保存して いる。

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


  12. おまけ


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


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


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


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


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

    使いたいREST APIの内容をjsonファイルで生成すれば、サイト閲覧時のJavaScript で処理できる
 データを受け取るだけなら
 Shifter staticでもREST APIを使った表現ができる
 ※Shifterだと動的処理できない先入観があったりするので、
  知見のある人が身近にいてほしいですね!

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