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
980
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
140
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.9k
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
230
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.6k
Other Decks in Programming
See All in Programming
AkarengaLT vol.38
hashimoto_kei
1
110
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
300
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
260
CSC305 Lecture 09
javiergs
PRO
0
300
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
440
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
400
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
CSC509 Lecture 07
javiergs
PRO
0
240
品質ワークショップをやってみた
nealle
0
600
Introduce Hono CLI
yusukebe
6
3k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
1
150
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Building Adaptive Systems
keathley
44
2.8k
Balancing Empowerment & Direction
lara
5
700
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Language of Interfaces
destraynor
162
25k
Code Reviewing Like a Champion
maltzj
526
40k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Bash Introduction
62gerente
615
210k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
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水曜に 開催中!!