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
2k
使えばわかる!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
1.7k
おきらく!みんなのWeb高速化入門
trickstar13
0
230
Other Decks in Technology
See All in Technology
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
160
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
Cracking the KubeCon CfP
inductor
2
270
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
650
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.3k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
700
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
180
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
4
570
ルーターでプレゼンする
puhitaku
1
3.3k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
515
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
How to Ace a Technical Interview
jacobian
273
22k
Side Projects
sachag
451
41k
BBQ
matthewcrist
80
8.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
What's in a price? How to price your products and services
michaelherold
238
11k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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