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
990
Shifterを選定するまでに検討したこと / shifter-meetup0603
Chinen
June 03, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
110
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.6k
MTDDC Meetup TOKYO 2023
chinen
2
380
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
2k
WWDC2023-Recap-LT
chinen
1
160
Web Push対応状況2023
chinen
0
580
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
210
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
220
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
ゼロからはじめる採用広報
yutadayo
3
1k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
500
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
TableauLangchainとは何か?
cielo1985
1
140
TLSから見るSREの未来
atpons
2
190
インフラ寄りSREの生存戦略
sansantech
PRO
8
3.3k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
620
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
3
570
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
140
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
14
8k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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も よろしくね!