Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

06753262e041911692e9a771b1877036?s=47 Chinen
September 08, 2021

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

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

06753262e041911692e9a771b1877036?s=128

Chinen

September 08, 2021
Tweet

More Decks by Chinen

Other Decks in Technology

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水曜
 オンライン開催