2021/09/08のShifter オンラインミートアップ! Shifterを提案する時のベストプラクティスを聞いてみよう!!の登壇資料です。
エンジニア目線での Shifter 2021/9/8 まぁし / 知念 昌史
View Slide
知念 昌史 / まぁし@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水曜 オンライン開催