Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shifter staticで REST APIしたい / Shifter Meetup 2020-12-02

06753262e041911692e9a771b1877036?s=47 Chinen
December 02, 2020
Programming
0
440

Shifter staticで REST APIしたい / Shifter Meetup 2020-12-02

06753262e041911692e9a771b1877036?s=128

Chinen

December 02, 2020
Tweet

More Decks by Chinen

See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
06753262e041911692e9a771b1877036?s=48 chinen
0
35
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
06753262e041911692e9a771b1877036?s=48 chinen
1
160
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
06753262e041911692e9a771b1877036?s=48 chinen
0
780
実践PWA 2020 / charitycon_oki2020
06753262e041911692e9a771b1877036?s=48 chinen
0
370
Shifterを選定するまでに検討したこと / shifter-meetup0603
06753262e041911692e9a771b1877036?s=48 chinen
0
500
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
06753262e041911692e9a771b1877036?s=48 chinen
1
330
ポートフォリオ作る話 / PWA Night vol.12
06753262e041911692e9a771b1877036?s=48 chinen
0
49
Vue.jsの基礎 / v-okinawa meetup #2
06753262e041911692e9a771b1877036?s=48 chinen
0
110
Vue.js初級編 / v-okinawa meetup #1
06753262e041911692e9a771b1877036?s=48 chinen
0
240

Other Decks in Programming

See All in Programming
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
250
Android Architecture Design With Koin
E02cd1d0fc5c51ac491b484a258a63a6?s=48 agiuliani
0
200
C言語でメモリ管理を考えた話
F17bbe02fb6dda24d29196c2479121b1?s=48 hkawai
0
180
読みやすいコードを書こう
A7048be18b1c2e712e5b564b1adb1f7e?s=48 yutorin
0
340
UI State Modeling 어떤게 좋을까?
Afcab07a7473e163949d85424a81cb85?s=48 laco2951
0
170
A technique to implement DSL in Ruby
110cd4dcaed019b3bd9809e541afdeb6?s=48 okuramasafumi
0
450
TechFeed Conference 2022 - Kotlin Experimental
D4133d8efb46ae872d7a563b619bfc83?s=48 jmatsu
0
470
Go言語仕様輪読会の開催を通じた振り返り
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
1
140
よりUXに近いSLI・SLOの運用による可用性の再設計
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
3
440
Yumemi.apk #6 ～ゆめみのAndroidエンジニア 日頃の成果大発表会！～ Session 2
7e5089310d68eca7e2ad404a1c8f2292?s=48 blendthink
1
200
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
270
Kotlin KSP - Intro
7589a5a8fec022e8af4e46525150a291?s=48 taehwandev
0
410

Featured

See All Featured
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
94
4.6k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
205
10k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
What’s in a name? Adding method to the madness
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
11
1.5k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
38
12k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.1k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
41
6.7k

Transcript

  1. Shifter staticで
 REST APIしたい
 2020/12/02　まぁし / 知念 昌史


  2. 知念 昌史 / まぁし@chocodogmagic
 TAM：フロントエンドエンジニア
 • 沖縄でリモートワーク + リモート新人教育を担当
 •

    CSS好き、JavaScript、PWA、Movable Type、 WordPress
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 • ゲーム好き
 ◦ ポケモン剣盾ランクマッチ挑戦中、スプラトゥーン、 
 キングダムハーツⅢ 


  3. Shifter staticのおさらい
 TAMくん

  4. Shifter staticはWordPressを静的出力する
 Shifter上で動くWordPressサイトから静的HTML を生成し（SSG）、AWS（CDN）で公開。（更新中以 外はWordPressは停止）
 サイトにアクセスしたユーザーはWordPress環境 ではなく、出力後のファイルを閲覧する。
 ユーザーのサイト閲覧中も、
 WordPressは動いていない。
 表示速度◎


    安全性◎
 AWS HTML HTML HTML HTML 閲覧 閲 覧 生成

  5. 要望：動的な表示の切り替え


  6. アクセスしたタイミング（日時）で内容を変えたい
 普通のWordPressなら、
 • アクセス日と記事の公開日を比較して動的に表示（PHP）
 • REST APIで記事情報を取得してアクセス日と比較（JavaScript）
 静的HTMLだとどうする？
 テンプレートに公開日を埋め込む？（<body data-news=”20201116”>）


    
 1週間以内のお知らせ記事 があれば丸い通知を出す


  7. 固定ページで
 jsonを出力する
 WordPressテーマで、
 API用の固定ページテンプ レートを追加する
 例：page-api.php
 よくあるREST APIの書き方に 近い（最後にecho）


  8. 出力後のページ
 /api/index.html
 


  9. 出力後のページ
 /api/index.html
 
 ←!!!?


  10. ちょっとキモチワルイけど動いた
 AjaxでよくあるXMLHttpRequest で取得でき た。
 HTMLの中身を取得するので【文字列】扱い となる。
 jsonとして扱いたいときは、JSON.parse(); で 変換する。
 右の例ではXMLHttpRequest

    で取得したテ キスト情報をローカルストレージに保存して いる。


  11. WordPressが動いていなくても
 REST APIの情報を取得・活用できた


  12. おまけ


  13. じつは・・・あとから気づいた
 Shifterに対応したREST APIをjsonファイルで静的生成するWPプラグインが
 あるとのこと（もっと早く知りたかった）
 https://github.com/getshifter/wp-serverless-api
 
 
 


  14. とりあえずプラグイン入れてみた・・・お？
 jsonファイルが生成された！でもちょっと思ってたのと違う？
 カスタム投稿タイプはどうやって含ませる？
 


  15. GitHubのプラグインの中身を見てみると・・・
 arrayの部分にカスタム投稿タイプを追加して
 プラグインを上書きしてみる。
 ※functions.phpでカスタム投稿タイプをRESTに含むよう設定
 →動いた！！！
 どうやらここでRESTに含める内容を設定している？


  16. プラグインの中身が理解できた
 jsonの出力先の設定やファイル生成の関数を見たところ、やっている処理が理解できた ので、functions.phpに同様の処理を追加したらプラグイン無しでも対応できそう！
 プラグイン作成者（Daniel Olsonさん）ありがとうございます！！！
 うまく解決できそうなので、近いうち記事を書きます！！
 （アドベントカレンダーは間に合わないかも＞＜）


  17. まとめ
 • Shifter staticは静的HTMLで公開される
 • ユーザーのサイト閲覧時にリアルタイムでREST API（DBへのアクセス）はできない
 • Shifterのgenerateでjsonファイルを生成することはできる
 •

    使いたいREST APIの内容をjsonファイルで生成すれば、サイト閲覧時のJavaScript で処理できる
 データを受け取るだけなら
 Shifter staticでもREST APIを使った表現ができる
 ※Shifterだと動的処理できない先入観があったりするので、
 　知見のある人が身近にいてほしいですね！


  18. 以上です、ありがとうございました！！！
 Twitter @chocodogmagic
 まぁし
 フォローしてね！！
 PWA Night
 毎月第3水曜に
 開催中！！