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 / Shifter Meetup 2021-09-08
Search
Chinen
September 08, 2021
Technology
1
470
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
2021/09/08のShifter オンラインミートアップ! Shifterを提案する時のベストプラクティスを聞いてみよう!!の登壇資料です。
Chinen
September 08, 2021
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
320
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.7k
WWDC2023-Recap-LT
chinen
1
110
Web Push対応状況2023
chinen
0
500
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
130
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
150
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.3k
frontend-conf-okinawa-2022
chinen
0
410
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
350
Other Decks in Technology
See All in Technology
MLOpsの「あるある」課題の解決と、そのためのライブラリgokart
mski_iksm
1
150
Oracle Cloud Infrastructure:2024年9月度サービス・アップデート
oracle4engineer
PRO
0
350
10Xでのデータ基盤の変遷とこれから: データマネジメントのリアル 〜BtoB企業3社の歩みとこれから〜
10xinc
6
1.2k
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
1
1.1k
Rubyはなぜ「たのしい」のか? / Why is Ruby a programmers' best friend? #tqrk15
expajp
4
1.7k
第45回 MLOps 勉強会 - ML Test Score を用いた機械学習システムの定量的なアセスメント
masatakashiwagi
3
190
【swonet.conf_】NOCメンバーが語るSTMの実態!! ~ShowNetから若者への贈り物~
shownet
PRO
0
230
LINEヤフー新卒採用 コーディングテスト解説 実装問題編
lycorp_recruit_jp
1
12k
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
140
Vista FinderMx
jtes
0
160
virtme-ng
ennael
PRO
0
310
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Large-scale JavaScript Application Architecture
addyosmani
509
110k
The Cost Of JavaScript in 2023
addyosmani
43
5.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
How GitHub (no longer) Works
holman
311
140k
Learning to Love Humans: Emotional Interface Design
aarron
271
40k
Adopting Sorbet at Scale
ufuk
73
8.9k
We Have a Design System, Now What?
morganepeng
49
7.1k
Transcript
エンジニア目線での Shifter 2021/9/8 まぁし / 知念 昌史
知念 昌史 / まぁし@chocodogmagic TAM/TAMTOのフロントエンドエンジニア • 沖縄でリモートワーク • 技術コミュニティ運営 ◦
PWA Night(東京)/ v-okinawa(沖縄) ◦ 平日朝9時からTwitter SpacesでWeb雑談 • ものづくりが好き ◦ イラスト、ゲーム、アプリ、漫画、小説 • ベテランポケモントレーナー • スプラトゥーン頑張ってウデマエSめざしてる
今までのShifter関連のLT登壇 • Shifterを選定するまでに検討したこと ◦ 2020/06/03 Shifter オンラインミートアップ! ◦ https://speakerdeck.com/chinen/shifter-meetup0603
• Shifter StaticでREST APIしたい ◦ 2020/12/02 Shifter オンラインミートアップ 「Shifter 大忘年会 2020」 ◦ https://speakerdeck.com/chinen/shifter-meetup-2020-12-02 • Shifter Staticのサイトを PWAにしよう ◦ 2021/06/26 PWA Night Conference 2021 ◦ https://speakerdeck.com/chinen/pwa-night-conference-2021
Shifterの良いところ 1. Staticである → 静的ファイル生成ができること 2. WordPressである 3. CMSと公開サーバーが別である 4.
バックエンド/インフラがほぼ不要
1. Staticであること なぜStaticがメリットなのか Static(静的)とDynamic(動的) → WordPressは動的 WordPressは、ブラウザからサーバーへリクエストしたらサーバー側でデータを処理して から表示するHTMLを返す Shifterは、WordPressのデータを事前にHTMLファイルとして生成 (generate)しておくため、ブラウザからサーバーへリクエストしたら
生成済みのHTMLをそのまま返す
Staticのメリット • ページの表示スピードが速い(SEO・UX) ◦ ページの表示が遅いとユーザーは離脱する、早い方が良い ◦ Core Web Vitals
• 攻撃されるリスクが低い ◦ ユーザーの入力によって内容が変わることがない • マシンリーダブル ◦ クロウラー等のbotでも問題なく読み取れる(JSだと少し遅れる)
2. WordPressであること 有名・ユーザーが多いことはメリット※提案しやすい → お客さん(コードがわからない人)でも知っている・使い慣れている → テーマ開発できるエンジニアが多い HeadlessやJamstackだとReact(Next)・Vue.js(Nuxt)等の フレームワークと組み合わせることが多く、難易度が上がる。 →
実装できるエンジニアが限られる
3. CMSと公開サーバーが別である 有名なCMSは外部から攻撃されやすい → オープンソースかつ多種多様なプラグインが あり脆弱性をつかれやすい WordPressを公開環境に置いている場合、管理画面へのアクセスを制限したり、監視 ツールを導入するなど※徹底すればするほど工数もスキルも必要になる → 目に見える部分ではないのでお客さんにも伝わりづらい
Shifterを契約したらすぐCMSと公開サーバーを分けた環境を使える → WordPressは非公開かつ操作中しか起動しない
4. バックエンド/インフラがほぼ不要 一からShifterと同等の環境を用意するとなると・・・ サーバーを手配、必要なモジュール追加、DBの用意、WordPressのインストール、アクセ ス制限、死活監視、さらにCDNも入ってくる Shifterならフロントエンド専門のエンジニアでも十分。 バックエンドやインフラのスキルがなくても開発を進められる。 ※ドメイン設定周りは必要。
WordPressテーマ開発スキルがあれば サーバー構築、CDN、 セキュリティ対策、静的generate これらの環境が 揃っている状態で開発できる
Shifterの困ったところ 1. 自由にファイルを置けない 2. すべてのページを静的化できるわけではない 3. WordPressプラグインがすべて使えるとは限らない 4. Tier 1でBasic認証が使えない
1. 自由にファイルを置けない PWAの実装でJavaScriptをドキュメントルート直下に置く必要がある(Service Workerの scope)が置けない → プラグインで対応 Shifterのサーバーには直接アクセスできず、テーマ内のファイルしか自由に扱えない。 プラグインやfunctions.phpを使ってファイルを生成するような処理が必要。.htaccessも使 えない。
画像の変更もShifterのWordPress管理画面か、テーマフォルダを 更新するしかない。
2. すべてのページを静的化できるわけではない カスタム投稿タイプの日別・年別アーカイブのgenerateがうまくできない (カスタム投稿タイプの投稿自体は静的化できる) 同様に、プラグインの機能によって提供されるページも出力できない場合がある。 どのようなWebサイトにしたいのか、構成を考える段階で考慮が必要。 ※とくにWordPressではPHPを使えば何でもできるという発想だと 注意。
3. WordPressプラグインがすべて使えるとは限らない StaticなHTMLを配信するという都合で、アクセス時に内容を書き換えるような動的な処 理ができない。そういったプラグインは使えない可能性もある。 フォームは使えないと思いきや対応しているプラグインもあり、 Shifterでも使えるかどうかは動かしてみないとわからないこともある。 仮にうまく動作しなかった場合、Shifter側の都合なのかプラグインの 不具合なのか原因の切り分けが難しいことがある。
4. Tier 1でBasic認証が使えない 主に開発中・テスト用の環境で使う場合、転送量やデータ量が少ないためTier 1を使い たい。公開状態にはしたくないためBasic認証をかけたいが、Tier 2以上のプランのみ。 • .htaccessでの設定はできない •
WordPressのBasic認証プラグインも動的な処理になるので使えない
まとめ
Shifterが向いている条件 • WordPressを使いたい • 静的ページで完結するサービス • サイトの表示高速化 • CDNで配信したい •
セキュリティ面を重視する
ありがとうございました!!! Twitter @chocodogmagic まぁし フォローしてね!! PWA Night 毎月第3水曜 オンライン開催