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
590
エンジニア目線での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
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.8k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
220
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
How to achieve interoperable digital identity across Asian countries
fujie
0
110
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
310
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
250
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
970
自動テストのコストと向き合ってみた
qa
0
110
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
17k
「Verify with Wallet API」を アプリに導入するために
hinakko
1
230
許しとアジャイル
jnuank
1
120
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Faster Mobile Websites
deanohume
310
31k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Invisible Side of Design
smashingmag
301
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
We Have a Design System, Now What?
morganepeng
53
7.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Become a Pro
speakerdeck
PRO
29
5.5k
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水曜 オンライン開催