Slide 1
Slide 1 text
エンジニア目線での
Shifter
2021/9/8 まぁし / 知念 昌史
Slide 2
Slide 2 text
知念 昌史 / まぁし@chocodogmagic
TAM/TAMTOのフロントエンドエンジニア
● 沖縄でリモートワーク
● 技術コミュニティ運営
○ PWA Night（東京）/ v-okinawa（沖縄）
○ 平日朝9時からTwitter SpacesでWeb雑談
● ものづくりが好き
○ イラスト、ゲーム、アプリ、漫画、小説
● ベテランポケモントレーナー
● スプラトゥーン頑張ってウデマエSめざしてる
Slide 3
Slide 3 text
今までの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
Slide 4
Slide 4 text
Shifterの良いところ
1. Staticである
→ 静的ファイル生成ができること
2. WordPressである
3. CMSと公開サーバーが別である
4. バックエンド/インフラがほぼ不要
Slide 5
Slide 5 text
1. Staticであること
なぜStaticがメリットなのか
Static（静的）とDynamic（動的） → WordPressは動的
WordPressは、ブラウザからサーバーへリクエストしたらサーバー側でデータを処理して
から表示するHTMLを返す
Shifterは、WordPressのデータを事前にHTMLファイルとして生成
（generate）しておくため、ブラウザからサーバーへリクエストしたら
生成済みのHTMLをそのまま返す
Slide 6
Slide 6 text
Staticのメリット
● ページの表示スピードが速い（SEO・UX）
○ ページの表示が遅いとユーザーは離脱する、早い方が良い
○ Core Web Vitals
● 攻撃されるリスクが低い
○ ユーザーの入力によって内容が変わることがない
● マシンリーダブル
○ クロウラー等のbotでも問題なく読み取れる（JSだと少し遅れる）
Slide 7
Slide 7 text
2. WordPressであること
有名・ユーザーが多いことはメリット※提案しやすい
→ お客さん（コードがわからない人）でも知っている・使い慣れている
→ テーマ開発できるエンジニアが多い
HeadlessやJamstackだとReact（Next）・Vue.js（Nuxt）等の
フレームワークと組み合わせることが多く、難易度が上がる。
→ 実装できるエンジニアが限られる
Slide 8
Slide 8 text
3. CMSと公開サーバーが別である
有名なCMSは外部から攻撃されやすい → オープンソースかつ多種多様なプラグインが
あり脆弱性をつかれやすい
WordPressを公開環境に置いている場合、管理画面へのアクセスを制限したり、監視
ツールを導入するなど※徹底すればするほど工数もスキルも必要になる
→ 目に見える部分ではないのでお客さんにも伝わりづらい
Shifterを契約したらすぐCMSと公開サーバーを分けた環境を使える
→ WordPressは非公開かつ操作中しか起動しない
Slide 9
Slide 9 text
4. バックエンド/インフラがほぼ不要
一からShifterと同等の環境を用意するとなると・・・
サーバーを手配、必要なモジュール追加、DBの用意、WordPressのインストール、アクセ
ス制限、死活監視、さらにCDNも入ってくる
Shifterならフロントエンド専門のエンジニアでも十分。
バックエンドやインフラのスキルがなくても開発を進められる。
※ドメイン設定周りは必要。
Slide 10
Slide 10 text
WordPressテーマ開発スキルがあれば
サーバー構築、CDN、
セキュリティ対策、静的generate
これらの環境が
揃っている状態で開発できる
Slide 11
Slide 11 text
Shifterの困ったところ
1. 自由にファイルを置けない
2. すべてのページを静的化できるわけではない
3. WordPressプラグインがすべて使えるとは限らない
4. Tier 1でBasic認証が使えない
Slide 12
Slide 12 text
1. 自由にファイルを置けない
PWAの実装でJavaScriptをドキュメントルート直下に置く必要がある（Service Workerの
scope）が置けない → プラグインで対応
Shifterのサーバーには直接アクセスできず、テーマ内のファイルしか自由に扱えない。
プラグインやfunctions.phpを使ってファイルを生成するような処理が必要。.htaccessも使
えない。
画像の変更もShifterのWordPress管理画面か、テーマフォルダを
更新するしかない。
Slide 13
Slide 13 text
2. すべてのページを静的化できるわけではない
カスタム投稿タイプの日別・年別アーカイブのgenerateがうまくできない
（カスタム投稿タイプの投稿自体は静的化できる）
同様に、プラグインの機能によって提供されるページも出力できない場合がある。
どのようなWebサイトにしたいのか、構成を考える段階で考慮が必要。
※とくにWordPressではPHPを使えば何でもできるという発想だと
注意。
Slide 14
Slide 14 text
3. WordPressプラグインがすべて使えるとは限らない
StaticなHTMLを配信するという都合で、アクセス時に内容を書き換えるような動的な処
理ができない。そういったプラグインは使えない可能性もある。
フォームは使えないと思いきや対応しているプラグインもあり、
Shifterでも使えるかどうかは動かしてみないとわからないこともある。
仮にうまく動作しなかった場合、Shifter側の都合なのかプラグインの
不具合なのか原因の切り分けが難しいことがある。
Slide 15
Slide 15 text
4. Tier 1でBasic認証が使えない
主に開発中・テスト用の環境で使う場合、転送量やデータ量が少ないためTier 1を使い
たい。公開状態にはしたくないためBasic認証をかけたいが、Tier 2以上のプランのみ。
● .htaccessでの設定はできない
● WordPressのBasic認証プラグインも動的な処理になるので使えない
Slide 16
Slide 16 text
まとめ
Slide 17
Slide 17 text
Shifterが向いている条件
● WordPressを使いたい
● 静的ページで完結するサービス
● サイトの表示高速化
● CDNで配信したい
● セキュリティ面を重視する
Slide 18
Slide 18 text
ありがとうございました！！！
Twitter @chocodogmagic
まぁし
フォローしてね！！
PWA Night
毎月第3水曜
オンライン開催