Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Shifter staticでREST APIしたい / Shifter Meetup 2020-12-02
Chinen
December 02, 2020
Programming
0
440
Shifter staticで REST APIしたい / Shifter Meetup 2020-12-02
Chinen
December 02, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
chinen
0
35
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
chinen
1
160
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
chinen
0
780
実践PWA 2020 / charitycon_oki2020
chinen
0
370
Shifterを選定するまでに検討したこと / shifter-meetup0603
chinen
0
500
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
chinen
1
330
ポートフォリオ作る話 / PWA Night vol.12
chinen
0
49
Vue.jsの基礎 / v-okinawa meetup #2
chinen
0
110
Vue.js初級編 / v-okinawa meetup #1
chinen
0
240
Other Decks in Programming
See All in Programming
Monadic Java
mariofusco
4
250
Android Architecture Design With Koin
agiuliani
0
200
C言語でメモリ管理を考えた話
hkawai
0
180
読みやすいコードを書こう
yutorin
0
340
UI State Modeling 어떤게 좋을까?
laco2951
0
170
A technique to implement DSL in Ruby
okuramasafumi
0
450
TechFeed Conference 2022 - Kotlin Experimental
jmatsu
0
470
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
140
よりUXに近いSLI・SLOの運用による可用性の再設計
kazumanagano
3
440
Yumemi.apk #6 ~ゆめみのAndroidエンジニア 日頃の成果大発表会!~ Session 2
blendthink
1
200
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
270
Kotlin KSP - Intro
taehwandev
0
410
Featured
See All Featured
Building Your Own Lightsaber
phodgson
94
4.6k
The Pragmatic Product Professional
lauravandoore
19
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Creatively Recalculating Your Daily Design Routine
revolveconf
205
10k
Web development in the modern age
philhawksworth
197
9.3k
What’s in a name? Adding method to the madness
productmarketing
11
1.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
38
12k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Code Review Best Practice
trishagee
41
6.7k
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水曜に 開催中!!