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.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.8k
おきらく!みんなのWeb高速化入門
trickstar13
0
240
Other Decks in Technology
See All in Technology
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
Azure AI ことはじめ
tsubakimoto_s
0
130
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
Featured
See All Featured
It's Worth the Effort
3n
181
27k
What's new in Ruby 2.0
geeforr
338
31k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Designing for humans not robots
tammielis
247
25k
How to Ace a Technical Interview
jacobian
274
23k
Embracing the Ebb and Flow
colly
81
4.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
How GitHub (no longer) Works
holman
305
140k
Building Applications with DynamoDB
mza
89
5.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Being A Developer After 40
akosma
72
580k
Writing Fast Ruby
sferik
623
60k
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