Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Shifter staticで REST APIしたい / Shifter Meetup 20...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Chinen Chinen
December 02, 2020
Programming
1.1k
0

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

Avatar for Chinen

Chinen

December 02, 2020

More Decks by Chinen

See All by Chinen
v-okinawa meetup vol.11 / CMSでゲーム開発を効率化する
Avatar for Chinen chinen
1
61
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
Avatar for Chinen chinen
0
220
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
Avatar for Chinen chinen
3
3.3k
MTDDC Meetup TOKYO 2023
Avatar for Chinen chinen
2
450
Nuxt 3でJamstackテンプレートを作るときの考え方
Avatar for Chinen chinen
3
2.3k
WWDC2023-Recap-LT
Avatar for Chinen chinen
1
210
Web Push対応状況2023
Avatar for Chinen chinen
0
650
技術記事が書けない人はGPTに背中を押してもらおう
Avatar for Chinen chinen
2
300
Three.jsで3Dぷわんを動かす / PWA Night vol.46
Avatar for Chinen chinen
0
290

Other Decks in Programming

See All in Programming
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
200
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
4
730
XHTMLが残したもの
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
830
難しいけど、読めた。- OSSの入口に立った話。
Avatar for shota sts11142
0
110
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
330
The Rails Doctrine Decade
Avatar for Koichi ITO koic
2
250
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
500
UPDATE をやめる — EF Core でマスタをバージョン管理する
Avatar for HideyukiKitao panda728
PRO
0
320
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
260
海上で動くGoサーバー: goroutineとchannelでさばく航行データストリーム
Avatar for Atsuki Seo atsuki_seo
0
850
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
530
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
640

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
320
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
370
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k

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水曜に
 開催中！！