使えばわかる！Jamstackの前に microCMS × PHP から始めてみる という選択肢

https://pentaprogram.tokyo/blog/microphp

Transcript

1. Pentaprogram 佐藤あゆみ Jamstackの前に microCMS × PHP から始めてみる 
 という選択肢 使えばわかる！
2. 佐藤あゆみ @Pentaprogram •HTMLコーダー •いわゆるWeb制作屋 •Jamstack愛好🥰 2019年には本も書いたよ 「Webページ高速化超入門」 技術評論社
3. ࠓ೔ͷओு Jamstackͷલʹɺ ·ͣPHPͰ microCMSΛࢼͦ͏ʂ
4. • Web制作はするがWeb開発 はしたことがない • JavaScriptフレームワー クを使ったことがほとん どない • PHP触ったことある 🙆 ର৅ऀ • JavaScriptフレームワー クをよく使う • Vercel、Netlify、 Firebase Hosting等を 使っている 🙅 ର৅֎ ➡ Jamstack直行でOK ➡ まずPHP + ヘッドレスCMS 
 （microCMS）
5. ೖ໳ऀ͕ૺ۰͕ͪ͠ͳ Jamstackͷ᠘
6. • どこでコケたかわかりにくい 
 （ローカル環境作り？フレームワーク？ホスティング？） • バージョンアップ激しくてドキュメントが古い • ドキュメントや操作画面が英語がち • プレビュー実装に一癖ある • Twitter等の埋め込みが表示されないかも • Webフォントが適用されないかも ೖ໳ऀΛͱΓ·͘Jamstackͷ᠘
7. • どこでコケたかわかりにくい
8. • 構成がシンプルでエラーが特定しやすい • PHPは枯れているし、microCMSは親切（私調べ） • microCMSは日本語表示、PHPも日本語ドキュメントいっぱい • プレビュー実装が超簡単 • Twitter等の埋め込みが普通に表示される • Webフォントが普通に適用される ೖ໳ʹmicroCMS+PHPΛ͢͢ΊΔཧ༝ 1
9. • レンタルサーバーで運用中の案件に「チョイのせ」しやすい • (jQuery等と比べて)レイアウトシフトが起きない • APIキーを隠蔽できる 
 ※しなくても良いが、初心者のうちはできた方がより安心では • 即時反映だからデプロイ待ちがない=修正しやすい • ヘッドレスCMSの良さはそのまま！！ • microCMSの画像APIは超最高に便利！！！ 
 ※今日は詳しく話しませんが、本当に便利だから試してほしい ॳ৺ऀʹmicroCMS+PHPΛ͢͢ΊΔཧ༝ 2
10. • 公開サイト側を好きなように作れる 
 （カスタムフィールドのデータに好きなように色付けできる感じ） • 同じデータで複数サイトを運用できる 
 （異なるドメインのサイトを一元更新） • 同じデータをスマホアプリにも表示できる • データはそのままで好きなプラットフォームに移動できる • 管理画面と公開サイトが別々だから 
 管理画面への攻撃を受けにくい ϔουϨεCMSͷྑ͞ͱ͸
11. ͲΕ͙Β͍ख͔ܰ ΍ͬͯΈΑ͏
12. • PHPが動く適当なレンタルサーバー • 適当なドメイン 
 （既存サイトサブドメインや、無料のサブドメインでも） • microCMSのアカウント（無料） • 「microCMS をPHPで動かすサンプル」 
 https://github.com/trickstar13/microphp • やる気 ༻ҙ͢Δ΋ͷ
13. αϯϓϧϑΝΠϧΛμ΢ϯϩʔυˍల։
14. FTPͰΞοϓϩʔυ
15. _htaccessΛ.htacessʹϦωʔϜ
16. ϒϥ΢βͰυϝΠϯʹΞΫηεˠͰ͖ͨ☺
17. ΍ͬͯΈΑ͏2
18. microCMSͰʮαʔϏεʯΛ࡞Δ ※他の人が既に使っているとエラーになるので その場合は違うIDを入力する
19. ʮαʔϏεʯͷதʹʮAPIʯΛ࡞Δ ※次のステップでは「リスト形式」を選ぶ。
20. ʮAPIʯʹεΩʔϚʢೖྗ߲໨ʣΛఆٛ͢Δ
21. χϡʔεͷݪߘΛ͍ΕΔ
22. APIΩʔΛखʹ͍ΕΔ
23. template.class.phpΛࣗ෼ͷ৘ใʹॻ͖׵͑ͯΞοϓϩʔυ
24. αΠτʹΞΫηεʂʂˠͰ͖ͨ☺
25. APIʹϓϨϏϡʔURLΛઃఆ͢Δ ※実際にはあなたのドメイン名を入力します https://あなたのドメイン/news/{CONTENT_ID}?draftKey={DRAFT_KEY}
26. • 運用中の静的サイトに組み込みやすかった • microCMSはクライアントにも分かりやすいと好評 • microCMSは機能が追加されてもUIが変わらないので 
 マニュアルを書き換えずに済んだ • フレームワークのバージョンに振り回されずにゆっくり運用できた • 将来的にJamstackに移行するにも、クライアント側の操作は全く変えず に済むので、説得しやすそう ࣮ࡍʹ microCMS × PHP ͰҊ݅Λӡ༻ͯ͠Έͯ…
27. まとめ • Jamstackは楽しいけど初心者にとっては罠も多い • 使い慣れた道具（PHP）で手軽にヘッドレスCMSを始めよう • ヘッドレスCMSなら、microCMSがいいぞ • ヘッドレスで作っておけば、いつでもJamstackに移行できるよ
28. Pentaprogram 佐藤あゆみ ありがとうございました "If you put your mind to it, you can accomplish anything." - Back to the Future