Shifterを選定するまでに検討したこと / shifter-meetup0603

Transcript

1. Shifterを選定するまでに 検討したこと 2020/06/03　知念 昌史

2. Shifter使っていますか？ （僕は今回、初めてプロジェクトで使っています）

3. 参加者にアンケート

4. 知念 昌史 / まぁし 株式会社TAM　フロントエンドエンジニア • 沖縄出身、大学卒業後に就職を期に東京へ • 未経験からWeb業界へ転職：美容師→エンジニア •

   2019年に沖縄へ戻りそのままTAMでリモート勤務 • リモートで新人教育を担当中 • 技術コミュニティ運営 ◦ PWA Night（東京） ◦ v-okinawa（沖縄） • GWからスプラトゥーン始めました

5. これから話す内容 技術選定の経緯について紹介 （守秘義務のためサービス名・クライアント名はNG） プロジェクトの目的、作りたいもの、それらの要望を技術でどう実現するか ↓ 新規プロジェクトの要件の紹介と 候補に上がった技術、選定の理由をエンジニア目線で紹介します。 今回はコード・プログラムな話はしません。

6. なぜShifterを採用したか

7. なぜShifterを採用したか • サイト運用はWordPressでの更新を希望 • WordPressと相性が良いサーバー • CDNで配信ができる • パフォーマンス視点で静的化したい •

   CMSが直接攻撃されない安心

8. やりたいこと（プロジェクト要件）

9. やりたいこと（プロジェクト要件） • Webコンテンツ（PWA）を作りたい • ターゲットが海外ユーザーのため高速化は必須（CDN） • SEOも重要（静的化したい） • クライアントがWebに詳しくないのでCMSが必要 •

   ユーザーごとに閲覧履歴によって表示を切り替えたい • ユーザーごとに設定した内容で表示を切り替えたい • ログイン管理までは不要（サーバーサイドの開発はしない）

10. やりたいこと（プロジェクト要件） - 検討 • Webコンテンツ（PWA）を作りたい → JavaScriptで実装できる • ターゲットが海外ユーザーのため高速化は必須（CDN）→CDNサービス検討 •

    SEOも重要（静的化したい）→ SPAよりは各HTML生成できるのが理想 • クライアントがWebに詳しくないのでCMSが必要 →WordPress / MT • ユーザーごとに閲覧履歴によって表示を切り替えたい → JSで実装 • ユーザーごとに設定した内容で表示を切り替えたい → JSで実装 • ログイン管理までは不要 → JSで実装

11. 技術選定の候補

12. 技術選定の候補 1. Vue.js（Nuxt.js）＋WordPress REST API（CMS）+ Netlify（CDN） ◦ Gridsome ◦ microCMS

    ◦ 流行りのJAMStack 2. WordPress + Shifter ◦ テーマ開発 ◦ 検討時、Shifter Headlessはまだリリースされていなかった 3. Movable Type クラウド版（CMS）+ CDNサービスオプション PWAで実装できる前提

13. Shifterじゃなくて JAMStackがしたかった （心の声）

14. 要件として外せないポイント

15. 要件として外せないポイント • Webに詳しくない人でもサイト更新できる運用方法 ◦ CMS（できればWordPress→慣れているから） ◦ ブラウザベース（コマンドラインでの操作は厳しい） ◦ FTPクライアントでのファイル転送も心配 •

    海外ユーザーからのアクセスを想定した環境 ◦ CDN ◦ 静的化

16. 技術選定で悩んだところ 1. Vue.js（Nuxt.js）＋WordPress REST API（CMS）+ Netlify（CDN） ◦ WordPressサーバー / ビルドサーバー

    / 配信サーバーの連携・管理ややこしそう ◦ おもしろそう 2. WordPress + Shifter ◦ REST使えない ◦ 未経験・普通のテーマ開発に手間が増える感じになりそう 3. Movable Type クラウド版（CMS）+ CDNサービスオプション ◦ 一番安定してそう ◦ 挑戦する感じではない（スキル面）

17. 手段が目的になってはいけない

18. 新技術への挑戦 学習コスト 制作コスト 納期スケジュール 運用負荷 安定性 信頼性

19. なぜShifterを採用したか • サイト運用はWordPressでの更新を希望 • WordPressと相性が良いサーバー • CDNで配信ができる • パフォーマンス視点で静的化したい •

    CMSが直接攻撃されない安心

20. おまけ

21. 今までShifterを使わなかった理由

22. 今までShifterを使わなかった理由（2〜3年前の話） • PHPで判定して切り替えるような動的な表示ができない • データベースを参照して表示を切り替えるようなことができない • 複雑なディレクトリ構造だとページの生成がうまくいかない • カスタム投稿タイプで複雑な処理をしているとページがうまく生成されない •

    記事が0件のときにアーカイブページの生成がうまくいかない • 24時間対応でサーバー保守できるわけではない 今は解決されてるかも！

23. 今、困っていること GitHubリポジトリとテーマ連携で、 プライベートリポジトリだとテーマ更新の通知が出ない（更新できない） 初回のテーマインストール時と、タグをつけてプッシュした1回目の更新はOK その後はタグを更新してもShifter上のWordPressに更新通知が出ない （GitHubではアクションが動いてzip生成まではできている） 解決したら嬉しいな・・！

24. 以上です、ありがとうございました！！！ Twitter @chocodogmagic まぁし お気軽にフォローください！ 毎月第３水曜の PWA Nightも よろしくね！