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
490
エンジニア目線での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 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
53
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2k
MTDDC Meetup TOKYO 2023
chinen
2
350
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.8k
WWDC2023-Recap-LT
chinen
1
130
Web Push対応状況2023
chinen
0
530
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
160
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
180
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.4k
Other Decks in Technology
See All in Technology
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
210
20241220_S3 tablesの使い方を検証してみた
handy
4
630
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
15k
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
110
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.4k
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
760
事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance
oomatomo
0
100
Qiita埋め込み用スライド
naoki_0531
0
5.1k
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
5
210
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
260
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
290
Oracle Cloud Infrastructure:2024年12月度サービス・アップデート
oracle4engineer
PRO
0
210
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Building an army of robots
kneath
302
44k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
The Pragmatic Product Professional
lauravandoore
32
6.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
GitHub's CSS Performance
jonrohan
1030
460k
Typedesign – Prime Four
hannesfritz
40
2.4k
KATA
mclloyd
29
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Optimizing for Happiness
mojombo
376
70k
Testing 201, or: Great Expectations
jmmastey
40
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水曜 オンライン開催