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
970
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
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.8k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人は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
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
180
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Laravel Boost 超入門
fire_arlo
3
220
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
チームのテスト力を鍛える
goyoki
3
830
1から理解するWeb Push
dora1998
7
1.9k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
print("Hello, World")
eddie
2
530
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Building a Scalable Design System with Sketch
lauravandoore
462
33k
A Tale of Four Properties
chriscoyier
160
23k
Statistics for Hackers
jakevdp
799
220k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The World Runs on Bad Software
bkeepers
PRO
70
11k
A better future with KSS
kneath
239
17k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Applications with DynamoDB
mza
96
6.6k
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水曜に 開催中!!