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
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Programming
See All in Programming
テスト環境にCDを導入してみた
yasaigaoisi
0
100
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
290
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
460
Googleの新しいコーディングAIエージェントJulesを使ってみた
tonionagauzzi
0
120
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
480
テスト駆動Kaggle
isax1015
1
880
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.2k
効率的な開発手段として VRTを活用する
ishkawa
1
180
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
CDK引数設計道場100本ノック
badmintoncryer
2
560
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
A better future with KSS
kneath
238
17k
The Cult of Friendly URLs
andyhume
79
6.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Automating Front-end Workflow
addyosmani
1370
200k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Unsuck your backbone
ammeep
671
58k
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水曜に 開催中!!