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

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

Transcript

1. エンジニア目線での

   Shifter

   2021/9/8　まぁし / 知念 昌史

   

   View Slide

2. 知念 昌史 / まぁし@chocodogmagic

   TAM/TAMTOのフロントエンドエンジニア

   ● 沖縄でリモートワーク

   ● 技術コミュニティ運営

   ○ PWA Night（東京）/ v-okinawa（沖縄）
   

   ○ 平日朝9時からTwitter SpacesでWeb雑談
   

   ● ものづくりが好き

   ○ イラスト、ゲーム、アプリ、漫画、小説
   

   ● ベテランポケモントレーナー

   ● スプラトゥーン頑張ってウデマエSめざしてる

   

   View Slide

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 

   

   

   View Slide

4. Shifterの良いところ

   1. Staticである

   → 静的ファイル生成ができること

   2. WordPressである

   3. CMSと公開サーバーが別である

   4. バックエンド/インフラがほぼ不要

   

   View Slide

5. 1. Staticであること

   なぜStaticがメリットなのか

   Static（静的）とDynamic（動的） → WordPressは動的

   WordPressは、ブラウザからサーバーへリクエストしたらサーバー側でデータを処理して
   から表示するHTMLを返す

   Shifterは、WordPressのデータを事前にHTMLファイルとして生成

   （generate）しておくため、ブラウザからサーバーへリクエストしたら

   生成済みのHTMLをそのまま返す

   

   View Slide

6. Staticのメリット

   ● ページの表示スピードが速い（SEO・UX）

   ○ ページの表示が遅いとユーザーは離脱する、早い方が良い
   

   ○ Core Web Vitals

   ● 攻撃されるリスクが低い

   ○ ユーザーの入力によって内容が変わることがない
   

   ● マシンリーダブル

   ○ クロウラー等のbotでも問題なく読み取れる（JSだと少し遅れる）
   

   

   View Slide

7. 2. WordPressであること

   有名・ユーザーが多いことはメリット※提案しやすい

   → お客さん（コードがわからない人）でも知っている・使い慣れている

   → テーマ開発できるエンジニアが多い

   HeadlessやJamstackだとReact（Next）・Vue.js（Nuxt）等の

   フレームワークと組み合わせることが多く、難易度が上がる。

   → 実装できるエンジニアが限られる

   

   

   View Slide

8. 3. CMSと公開サーバーが別である

   有名なCMSは外部から攻撃されやすい → オープンソースかつ多種多様なプラグインが
   あり脆弱性をつかれやすい

   WordPressを公開環境に置いている場合、管理画面へのアクセスを制限したり、監視
   ツールを導入するなど※徹底すればするほど工数もスキルも必要になる

   → 目に見える部分ではないのでお客さんにも伝わりづらい

   Shifterを契約したらすぐCMSと公開サーバーを分けた環境を使える

   → WordPressは非公開かつ操作中しか起動しない

   

   View Slide

9. 4. バックエンド/インフラがほぼ不要

   一からShifterと同等の環境を用意するとなると・・・

   サーバーを手配、必要なモジュール追加、DBの用意、WordPressのインストール、アクセ
   ス制限、死活監視、さらにCDNも入ってくる

   Shifterならフロントエンド専門のエンジニアでも十分。

   バックエンドやインフラのスキルがなくても開発を進められる。

   ※ドメイン設定周りは必要。

   

   View Slide

10. WordPressテーマ開発スキルがあれば

    サーバー構築、CDN、

    セキュリティ対策、静的generate

    これらの環境が

    揃っている状態で開発できる

    

    View Slide

11. Shifterの困ったところ

    1. 自由にファイルを置けない

    2. すべてのページを静的化できるわけではない

    3. WordPressプラグインがすべて使えるとは限らない

    4. Tier 1でBasic認証が使えない

    

    View Slide

12. 1. 自由にファイルを置けない

    PWAの実装でJavaScriptをドキュメントルート直下に置く必要がある（Service Workerの
    scope）が置けない → プラグインで対応

    Shifterのサーバーには直接アクセスできず、テーマ内のファイルしか自由に扱えない。
    プラグインやfunctions.phpを使ってファイルを生成するような処理が必要。.htaccessも使
    えない。

    画像の変更もShifterのWordPress管理画面か、テーマフォルダを

    更新するしかない。

    

    View Slide

13. 2. すべてのページを静的化できるわけではない

    カスタム投稿タイプの日別・年別アーカイブのgenerateがうまくできない

    （カスタム投稿タイプの投稿自体は静的化できる）

    同様に、プラグインの機能によって提供されるページも出力できない場合がある。

    どのようなWebサイトにしたいのか、構成を考える段階で考慮が必要。

    ※とくにWordPressではPHPを使えば何でもできるという発想だと

    注意。

    

    View Slide

14. 3. WordPressプラグインがすべて使えるとは限らない

    StaticなHTMLを配信するという都合で、アクセス時に内容を書き換えるような動的な処
    理ができない。そういったプラグインは使えない可能性もある。

    フォームは使えないと思いきや対応しているプラグインもあり、

    Shifterでも使えるかどうかは動かしてみないとわからないこともある。

    仮にうまく動作しなかった場合、Shifter側の都合なのかプラグインの

    不具合なのか原因の切り分けが難しいことがある。

    

    View Slide

15. 4. Tier 1でBasic認証が使えない

    
主に開発中・テスト用の環境で使う場合、転送量やデータ量が少ないためTier 1を使い
    たい。公開状態にはしたくないためBasic認証をかけたいが、Tier 2以上のプランのみ。

    ● .htaccessでの設定はできない

    ● WordPressのBasic認証プラグインも動的な処理になるので使えない

    

    

    View Slide

16. まとめ

    

    View Slide

17. Shifterが向いている条件

    ● WordPressを使いたい

    ● 静的ページで完結するサービス

    ● サイトの表示高速化

    ● CDNで配信したい

    ● セキュリティ面を重視する

    

    View Slide

18. ありがとうございました！！！

    Twitter @chocodogmagic

    まぁし

    フォローしてね！！

    PWA Night

    毎月第3水曜

    オンライン開催

    

    View Slide