Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

953ea92402e87bce54a4a95ed7f54825?s=128

佐藤あゆみ

January 27, 2022
Tweet

More Decks by 佐藤あゆみ

Other Decks in Technology

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