Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shifter staticでREST APIしたい / Shifter Meetup 20...
Search
Chinen
December 02, 2020
Programming
0
960
Shifter staticで REST APIしたい / Shifter Meetup 2020-12-02
Chinen
December 02, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
120
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.7k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
220
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
Flutterと Vibe Coding で個人開発!
hyshu
1
260
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
300
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.3k
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
490
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
200
兎に角、コードレビュー
mitohato14
0
150
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
840
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.4k
Rancher と Terraform
fufuhu
0
100
ゲームの物理
fadis
5
1.5k
Constant integer division faster than compiler-generated code
herumi
2
690
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Navigating Team Friction
lara
189
15k
It's Worth the Effort
3n
187
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Transcript
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水曜に 開催中!!