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
270
Other Decks in Technology
See All in Technology
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
本が全く読めなかった過去の自分へ
genshun9
0
270
解析の定理証明実践@Lean 4
dec9ue
0
180
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
740
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
700
Wasm元年
askua
0
140
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
340
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Adopting Sorbet at Scale
ufuk
77
9.4k
Why Our Code Smells
bkeepers
PRO
337
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Optimizing for Happiness
mojombo
379
70k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
A Tale of Four Properties
chriscoyier
160
23k
Documentation Writing (for coders)
carmenintech
72
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
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