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

06753262e041911692e9a771b1877036?s=47 Chinen
June 03, 2020

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

06753262e041911692e9a771b1877036?s=128

Chinen

June 03, 2020
Tweet

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 まぁし お気軽にフォローください! 毎月第3水曜の PWA Nightも よろしくね!