Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Chinen Chinen
December 02, 2020
Programming
1.1k
0

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

Avatar for Chinen

Chinen

December 02, 2020

More Decks by Chinen

See All by Chinen
v-okinawa meetup vol.11 / CMSでゲーム開発を効率化する
Avatar for Chinen chinen
1
63
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
Avatar for Chinen chinen
0
220
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
Avatar for Chinen chinen
3
3.3k
MTDDC Meetup TOKYO 2023
Avatar for Chinen chinen
2
460
Nuxt 3でJamstackテンプレートを作るときの考え方
Avatar for Chinen chinen
3
2.3k
WWDC2023-Recap-LT
Avatar for Chinen chinen
1
210
Web Push対応状況2023
Avatar for Chinen chinen
0
660
技術記事が書けない人はGPTに背中を押してもらおう
Avatar for Chinen chinen
2
310
Three.jsで3Dぷわんを動かす / PWA Night vol.46
Avatar for Chinen chinen
0
290

Other Decks in Programming

See All in Programming
Vue Fes Japan の “作る側”に関わってみて
Avatar for Naoki Haba naokihaba
0
150
[2026-09-26]空論ジェネリックプロセス～テスト資産とAIで紡ぐ、再現可能なパフォーマンスチューニングの話～
Avatar for tosite tosite
0
270
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
Avatar for がむ gam0022
0
360
Everything will be SERVERLESS — 信じて運用した10年の経験値 / Everything Will be Serverless — Lessons Learned from 10 Years of Operational Experience
Avatar for shiro seike seike460
PRO
1
1k
CodeRabbitの効果検証と過ごしてみた3ヶ月
Avatar for armondando armondando
0
230
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
170
個人開発者よ、Honoを使え（おじさんver）
Avatar for tanahiro2010 tanahiro2010
2
250
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
3
760
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
250
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
980
パーソナライズPodcastを作った話
Avatar for repunit11 repunit11
0
140
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
1
150

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
4
490
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
270
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
300
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
How to make the Groovebox
Avatar for あそなす asonas
2
2.5k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
600
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
250
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
630
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
930
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
370

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水曜に
 開催中！！