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.7k
使えばわかる!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
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
640
生成AI時代のデータ基盤
shibuiwilliam
4
2.1k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
0
150
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
110
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
2
2.1k
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
1.8k
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
430
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
290
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.6k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
210
Featured
See All Featured
Balancing Empowerment & Direction
lara
3
610
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
How GitHub (no longer) Works
holman
315
140k
The Language of Interfaces
destraynor
160
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
GraphQLとの向き合い方2022年版
quramy
49
14k
KATA
mclloyd
32
14k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Optimizing for Happiness
mojombo
379
70k
Docker and Python
trallard
45
3.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
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