エンジニア目線でのShifter / Shifter Meetup 2021-09-08

2021/09/08のShifter オンラインミートアップ！ Shifterを提案する時のベストプラクティスを聞いてみよう!!の登壇資料です。

Transcript

1. エンジニア目線での
 Shifter
 2021/9/8　まぁし / 知念 昌史

2. 知念 昌史 / まぁし@chocodogmagic
 TAM/TAMTOのフロントエンドエンジニア
 • 沖縄でリモートワーク
 • 技術コミュニティ運営
 ◦ PWA Night（東京）/ v-okinawa（沖縄） 
 ◦ 平日朝9時からTwitter SpacesでWeb雑談 
 • ものづくりが好き
 ◦ イラスト、ゲーム、アプリ、漫画、小説 
 • ベテランポケモントレーナー
 • スプラトゥーン頑張ってウデマエSめざしてる

3. 今までの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 
 

4. Shifterの良いところ
 1. Staticである
 → 静的ファイル生成ができること
 2. WordPressである
 3. CMSと公開サーバーが別である
 4. バックエンド/インフラがほぼ不要

5. 1. Staticであること
 なぜStaticがメリットなのか
 Static（静的）とDynamic（動的） → WordPressは動的
 WordPressは、ブラウザからサーバーへリクエストしたらサーバー側でデータを処理して から表示するHTMLを返す
 Shifterは、WordPressのデータを事前にHTMLファイルとして生成
 （generate）しておくため、ブラウザからサーバーへリクエストしたら
 生成済みのHTMLをそのまま返す

6. Staticのメリット
 • ページの表示スピードが速い（SEO・UX）
 ◦ ページの表示が遅いとユーザーは離脱する、早い方が良い 
 ◦ Core Web Vitals
 • 攻撃されるリスクが低い
 ◦ ユーザーの入力によって内容が変わることがない 
 • マシンリーダブル
 ◦ クロウラー等のbotでも問題なく読み取れる（JSだと少し遅れる） 

7. 2. WordPressであること
 有名・ユーザーが多いことはメリット※提案しやすい
 → お客さん（コードがわからない人）でも知っている・使い慣れている
 → テーマ開発できるエンジニアが多い
 HeadlessやJamstackだとReact（Next）・Vue.js（Nuxt）等の
 フレームワークと組み合わせることが多く、難易度が上がる。
 → 実装できるエンジニアが限られる
 

8. 3. CMSと公開サーバーが別である
 有名なCMSは外部から攻撃されやすい → オープンソースかつ多種多様なプラグインが あり脆弱性をつかれやすい
 WordPressを公開環境に置いている場合、管理画面へのアクセスを制限したり、監視 ツールを導入するなど※徹底すればするほど工数もスキルも必要になる
 → 目に見える部分ではないのでお客さんにも伝わりづらい
 Shifterを契約したらすぐCMSと公開サーバーを分けた環境を使える
 → WordPressは非公開かつ操作中しか起動しない

9. 4. バックエンド/インフラがほぼ不要
 一からShifterと同等の環境を用意するとなると・・・
 サーバーを手配、必要なモジュール追加、DBの用意、WordPressのインストール、アクセ ス制限、死活監視、さらにCDNも入ってくる
 Shifterならフロントエンド専門のエンジニアでも十分。
 バックエンドやインフラのスキルがなくても開発を進められる。
 ※ドメイン設定周りは必要。

10. WordPressテーマ開発スキルがあれば
 サーバー構築、CDN、
 セキュリティ対策、静的generate
 これらの環境が
 揃っている状態で開発できる

11. Shifterの困ったところ
 1. 自由にファイルを置けない
 2. すべてのページを静的化できるわけではない
 3. WordPressプラグインがすべて使えるとは限らない
 4. Tier 1でBasic認証が使えない

12. 1. 自由にファイルを置けない
 PWAの実装でJavaScriptをドキュメントルート直下に置く必要がある（Service Workerの scope）が置けない → プラグインで対応
 Shifterのサーバーには直接アクセスできず、テーマ内のファイルしか自由に扱えない。 プラグインやfunctions.phpを使ってファイルを生成するような処理が必要。.htaccessも使 えない。
 画像の変更もShifterのWordPress管理画面か、テーマフォルダを
 更新するしかない。

13. 2. すべてのページを静的化できるわけではない
 カスタム投稿タイプの日別・年別アーカイブのgenerateがうまくできない
 （カスタム投稿タイプの投稿自体は静的化できる）
 同様に、プラグインの機能によって提供されるページも出力できない場合がある。
 どのようなWebサイトにしたいのか、構成を考える段階で考慮が必要。
 ※とくにWordPressではPHPを使えば何でもできるという発想だと
 注意。

14. 3. WordPressプラグインがすべて使えるとは限らない
 StaticなHTMLを配信するという都合で、アクセス時に内容を書き換えるような動的な処 理ができない。そういったプラグインは使えない可能性もある。
 フォームは使えないと思いきや対応しているプラグインもあり、
 Shifterでも使えるかどうかは動かしてみないとわからないこともある。
 仮にうまく動作しなかった場合、Shifter側の都合なのかプラグインの
 不具合なのか原因の切り分けが難しいことがある。

15. 4. Tier 1でBasic認証が使えない
 
主に開発中・テスト用の環境で使う場合、転送量やデータ量が少ないためTier 1を使い たい。公開状態にはしたくないためBasic認証をかけたいが、Tier 2以上のプランのみ。
 • .htaccessでの設定はできない
 • WordPressのBasic認証プラグインも動的な処理になるので使えない
 

16. まとめ

17. Shifterが向いている条件
 • WordPressを使いたい
 • 静的ページで完結するサービス
 • サイトの表示高速化
 • CDNで配信したい
 • セキュリティ面を重視する

18. ありがとうございました！！！
 Twitter @chocodogmagic
 まぁし
 フォローしてね！！
 PWA Night
 毎月第3水曜
 オンライン開催