Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shifterを選定するまでに検討したこと / shifter-meetup0603
Search
Chinen
June 03, 2020
Technology
0
1k
Shifterを選定するまでに検討したこと / shifter-meetup0603
Chinen
June 03, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
140
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.9k
MTDDC Meetup TOKYO 2023
chinen
2
390
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2.1k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
590
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
230
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
230
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.6k
Other Decks in Technology
See All in Technology
Retrospectiveを振り返ろう
nakasho
0
130
GPUをつかってベクトル検索を扱う手法のお話し~NVIDIA cuVSとCAGRA~
fshuhe
0
220
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
2
1.2k
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
340
戦えるAIエージェントの作り方
iwiwi
2
810
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
150
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
shigeruoda
1
190
re:Inventに行くまでにやっておきたいこと
nagisa53
0
720
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
340
頭部ふわふわ浄酔器
uyupun
0
240
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
320
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
320
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Site-Speed That Sticks
csswizardry
13
930
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Invisible Side of Design
smashingmag
302
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Raft: Consensus for Rubyists
vanstee
140
7.2k
Speed Design
sergeychernyshev
32
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Cult of Friendly URLs
andyhume
79
6.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Transcript
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 まぁし お気軽にフォローください! 毎月第3水曜の PWA Nightも よろしくね!