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
2k
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
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.5k
Wasmの気になる最新情報
askua
0
150
私のMCPの使い方
tsubakimoto_s
0
100
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
1k
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
Introdução a Service Mesh usando o Istio
aeciopires
0
220
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
2
740
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.7k
React19.2のuseEffectEventを追う
maguroalternative
2
520
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Become a Pro
speakerdeck
PRO
29
5.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Automating Front-end Workflow
addyosmani
1371
200k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
GitHub's CSS Performance
jonrohan
1032
470k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Practical Orchestrator
shlominoach
190
11k
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も よろしくね!