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
使えばわかる!Jamstackの前に microCMS × PHP から始めてみる という選択肢
Search
佐藤あゆみ
January 27, 2022
Technology
1
2.6k
使えばわかる!Jamstackの前に microCMS × PHP から始めてみる という選択肢
https://pentaprogram.tokyo/blog/microphp
佐藤あゆみ
January 27, 2022
Tweet
Share
More Decks by 佐藤あゆみ
See All by 佐藤あゆみ
necco 阿部さんの記事を見て Shifter Headless + Faust.js + Vercel したらかんたんに実装できちゃった話
trickstar13
0
2.3k
おきらく!みんなのWeb高速化入門
trickstar13
0
280
Other Decks in Technology
See All in Technology
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
810
Connect 100+を支える技術
kanyamaguc
0
190
怖くない!はじめてのClaude Code
shinya337
0
380
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
110
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
510
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.2k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
100
PO初心者が考えた ”POらしさ”
nb_rady
0
190
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
360
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Statistics for Hackers
jakevdp
799
220k
Visualization
eitanlees
146
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
270
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
Pentaprogram 佐藤あゆみ Jamstackの前に microCMS × PHP から始めてみる という選択肢 使えばわかる!
佐藤あゆみ @Pentaprogram •HTMLコーダー •いわゆるWeb制作屋 •Jamstack愛好🥰 2019年には本も書いたよ 「Webページ高速化超入門」 技術評論社
ࠓͷओு Jamstackͷલʹɺ ·ͣPHPͰ microCMSΛࢼͦ͏ʂ
• Web制作はするがWeb開発 はしたことがない • JavaScriptフレームワー クを使ったことがほとん どない • PHP触ったことある 🙆
ରऀ • JavaScriptフレームワー クをよく使う • Vercel、Netlify、 Firebase Hosting等を 使っている 🙅 ର֎ ➡ Jamstack直行でOK ➡ まずPHP + ヘッドレスCMS (microCMS)
ೖऀ͕ૺ۰͕ͪ͠ͳ Jamstackͷ᠘
• どこでコケたかわかりにくい (ローカル環境作り?フレームワーク?ホスティング?) • バージョンアップ激しくてドキュメントが古い • ドキュメントや操作画面が英語がち • プレビュー実装に一癖ある
• Twitter等の埋め込みが表示されないかも • Webフォントが適用されないかも ೖऀΛͱΓ·͘Jamstackͷ᠘
• どこでコケたかわかりにくい
• 構成がシンプルでエラーが特定しやすい • PHPは枯れているし、microCMSは親切(私調べ) • microCMSは日本語表示、PHPも日本語ドキュメントいっぱい • プレビュー実装が超簡単 • Twitter等の埋め込みが普通に表示される
• Webフォントが普通に適用される ೖʹmicroCMS+PHPΛ͢͢ΊΔཧ༝ 1
• レンタルサーバーで運用中の案件に「チョイのせ」しやすい • (jQuery等と比べて)レイアウトシフトが起きない • APIキーを隠蔽できる ※しなくても良いが、初心者のうちはできた方がより安心では • 即時反映だからデプロイ待ちがない=修正しやすい
• ヘッドレスCMSの良さはそのまま!! • microCMSの画像APIは超最高に便利!!! ※今日は詳しく話しませんが、本当に便利だから試してほしい ॳ৺ऀʹmicroCMS+PHPΛ͢͢ΊΔཧ༝ 2
• 公開サイト側を好きなように作れる (カスタムフィールドのデータに好きなように色付けできる感じ) • 同じデータで複数サイトを運用できる (異なるドメインのサイトを一元更新) • 同じデータをスマホアプリにも表示できる
• データはそのままで好きなプラットフォームに移動できる • 管理画面と公開サイトが別々だから 管理画面への攻撃を受けにくい ϔουϨεCMSͷྑ͞ͱ
ͲΕ͙Β͍ख͔ܰ ͬͯΈΑ͏
• PHPが動く適当なレンタルサーバー • 適当なドメイン (既存サイトサブドメインや、無料のサブドメインでも) • microCMSのアカウント(無料) • 「microCMS
をPHPで動かすサンプル」 https://github.com/trickstar13/microphp • やる気 ༻ҙ͢Δͷ
αϯϓϧϑΝΠϧΛμϯϩʔυˍల։
FTPͰΞοϓϩʔυ
_htaccessΛ.htacessʹϦωʔϜ
ϒϥβͰυϝΠϯʹΞΫηεˠͰ͖ͨ☺
ͬͯΈΑ͏2
microCMSͰʮαʔϏεʯΛ࡞Δ ※他の人が既に使っているとエラーになるので その場合は違うIDを入力する
ʮαʔϏεʯͷதʹʮAPIʯΛ࡞Δ ※次のステップでは「リスト形式」を選ぶ。
ʮAPIʯʹεΩʔϚʢೖྗ߲ʣΛఆٛ͢Δ
χϡʔεͷݪߘΛ͍ΕΔ
APIΩʔΛखʹ͍ΕΔ
template.class.phpΛࣗͷใʹॻ͖͑ͯΞοϓϩʔυ
αΠτʹΞΫηεʂʂˠͰ͖ͨ☺
APIʹϓϨϏϡʔURLΛઃఆ͢Δ ※実際にはあなたのドメイン名を入力します https://あなたのドメイン/news/{CONTENT_ID}?draftKey={DRAFT_KEY}
• 運用中の静的サイトに組み込みやすかった • microCMSはクライアントにも分かりやすいと好評 • microCMSは機能が追加されてもUIが変わらないので マニュアルを書き換えずに済んだ • フレームワークのバージョンに振り回されずにゆっくり運用できた
• 将来的にJamstackに移行するにも、クライアント側の操作は全く変えず に済むので、説得しやすそう ࣮ࡍʹ microCMS × PHP ͰҊ݅Λӡ༻ͯ͠Έͯ…
まとめ • Jamstackは楽しいけど初心者にとっては罠も多い • 使い慣れた道具(PHP)で手軽にヘッドレスCMSを始めよう • ヘッドレスCMSなら、microCMSがいいぞ • ヘッドレスで作っておけば、いつでもJamstackに移行できるよ
Pentaprogram 佐藤あゆみ ありがとうございました "If you put your mind to it,
you can accomplish anything." - Back to the Future