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
820
Shifterを選定するまでに検討したこと / shifter-meetup0603
Chinen
June 03, 2020
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2023
chinen
1
280
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.1k
WWDC2023-Recap-LT
chinen
1
85
Web Push対応状況2023
chinen
0
430
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
110
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
120
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.2k
frontend-conf-okinawa-2022
chinen
0
350
Jamstack導入時の罠/ジャムスタックチョットデキル!! 秋のLT大会2022
chinen
1
300
Other Decks in Technology
See All in Technology
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
890
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
150
生産性向上チームの紹介
cybozuinsideout
PRO
1
840
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
180
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
260
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
120
本当のAWS基礎
toru_kubota
0
380
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.5k
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
190
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
12
2.3k
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
160
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
210
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
What the flash - Photography Introduction
edds
64
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
16
1.4k
Adopting Sorbet at Scale
ufuk
67
8.6k
Designing Experiences People Love
moore
136
23k
Design by the Numbers
sachag
274
18k
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も よろしくね!