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

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

参加者にアンケート

知念 昌史 / まぁし 株式会社TAM　フロントエンドエンジニア ● 沖縄出身、大学卒業後に就職を期に東京へ ● 未経験からWeb業界へ転職：美容師→エンジニア ● 2019年に沖縄へ戻りそのままTAMでリモート勤務 ● リモートで新人教育を担当中 ● 技術コミュニティ運営 ○ PWA Night（東京） ○ v-okinawa（沖縄） ● GWからスプラトゥーン始めました

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

なぜShifterを採用したか

なぜShifterを採用したか ● サイト運用はWordPressでの更新を希望 ● WordPressと相性が良いサーバー ● CDNで配信ができる ● パフォーマンス視点で静的化したい ● CMSが直接攻撃されない安心

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

やりたいこと（プロジェクト要件） ● Webコンテンツ（PWA）を作りたい ● ターゲットが海外ユーザーのため高速化は必須（CDN） ● SEOも重要（静的化したい） ● クライアントがWebに詳しくないのでCMSが必要 ● ユーザーごとに閲覧履歴によって表示を切り替えたい ● ユーザーごとに設定した内容で表示を切り替えたい ● ログイン管理までは不要（サーバーサイドの開発はしない）

やりたいこと（プロジェクト要件） - 検討 ● Webコンテンツ（PWA）を作りたい → JavaScriptで実装できる ● ターゲットが海外ユーザーのため高速化は必須（CDN）→CDNサービス検討 ● SEOも重要（静的化したい）→ SPAよりは各HTML生成できるのが理想 ● クライアントがWebに詳しくないのでCMSが必要 →WordPress / MT ● ユーザーごとに閲覧履歴によって表示を切り替えたい → JSで実装 ● ユーザーごとに設定した内容で表示を切り替えたい → JSで実装 ● ログイン管理までは不要 → JSで実装

技術選定の候補

技術選定の候補 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で実装できる前提

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

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

要件として外せないポイント ● Webに詳しくない人でもサイト更新できる運用方法 ○ CMS（できればWordPress→慣れているから） ○ ブラウザベース（コマンドラインでの操作は厳しい） ○ FTPクライアントでのファイル転送も心配 ● 海外ユーザーからのアクセスを想定した環境 ○ CDN ○ 静的化

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

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

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

なぜShifterを採用したか ● サイト運用はWordPressでの更新を希望 ● WordPressと相性が良いサーバー ● CDNで配信ができる ● パフォーマンス視点で静的化したい ● CMSが直接攻撃されない安心

おまけ

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

今までShifterを使わなかった理由（2〜3年前の話） ● PHPで判定して切り替えるような動的な表示ができない ● データベースを参照して表示を切り替えるようなことができない ● 複雑なディレクトリ構造だとページの生成がうまくいかない ● カスタム投稿タイプで複雑な処理をしているとページがうまく生成されない ● 記事が0件のときにアーカイブページの生成がうまくいかない ● 24時間対応でサーバー保守できるわけではない 今は解決されてるかも！

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

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