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

by 佐藤あゆみ

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

佐藤あゆみ @Pentaprogram •HTMLコーダー •いわゆるWeb制作屋 •Jamstack愛好🥰 2019年には本も書いたよ「Webページ高速化超入門」技術評論社

Slide 3

Slide 3 text

ࠓ೔ͷओு Jamstackͷલʹɺ ·ͣPHPͰ microCMSΛࢼͦ͏ʂ

Slide 4

Slide 4 text

• Web制作はするがWeb開発はしたことがない • JavaScriptフレームワークを使ったことがほとんどない • PHP触ったことある 🙆 ର৅ऀ • JavaScriptフレームワークをよく使う • Vercel、Netlify、 Firebase Hosting等を使っている 🙅 ର৅֎ ➡ Jamstack直行でOK ➡ まずPHP + ヘッドレスCMS   （microCMS）

Slide 5

Slide 5 text

ೖ໳ऀ͕ૺ۰͕ͪ͠ͳ Jamstackͷ᠘

Slide 6

Slide 6 text

• どこでコケたかわかりにくい   （ローカル環境作り？フレームワーク？ホスティング？） • バージョンアップ激しくてドキュメントが古い • ドキュメントや操作画面が英語がち • プレビュー実装に一癖ある • Twitter等の埋め込みが表示されないかも • Webフォントが適用されないかも ೖ໳ऀΛͱΓ·͘Jamstackͷ᠘

Slide 7

Slide 7 text

• どこでコケたかわかりにくい

Slide 8

Slide 8 text

• 構成がシンプルでエラーが特定しやすい • PHPは枯れているし、microCMSは親切（私調べ） • microCMSは日本語表示、PHPも日本語ドキュメントいっぱい • プレビュー実装が超簡単 • Twitter等の埋め込みが普通に表示される • Webフォントが普通に適用される ೖ໳ʹmicroCMS+PHPΛ͢͢ΊΔཧ༝ 1

Slide 9

Slide 9 text

• レンタルサーバーで運用中の案件に「チョイのせ」しやすい • (jQuery等と比べて)レイアウトシフトが起きない • APIキーを隠蔽できる   ※しなくても良いが、初心者のうちはできた方がより安心では • 即時反映だからデプロイ待ちがない=修正しやすい • ヘッドレスCMSの良さはそのまま！！ • microCMSの画像APIは超最高に便利！！！   ※今日は詳しく話しませんが、本当に便利だから試してほしい ॳ৺ऀʹmicroCMS+PHPΛ͢͢ΊΔཧ༝ 2

Slide 10

Slide 10 text

• 公開サイト側を好きなように作れる   （カスタムフィールドのデータに好きなように色付けできる感じ） • 同じデータで複数サイトを運用できる   （異なるドメインのサイトを一元更新） • 同じデータをスマホアプリにも表示できる • データはそのままで好きなプラットフォームに移動できる • 管理画面と公開サイトが別々だから   管理画面への攻撃を受けにくい ϔουϨεCMSͷྑ͞ͱ͸

Slide 11

Slide 11 text

ͲΕ͙Β͍ख͔ܰ ΍ͬͯΈΑ͏

Slide 12

Slide 12 text

• PHPが動く適当なレンタルサーバー • 適当なドメイン   （既存サイトサブドメインや、無料のサブドメインでも） • microCMSのアカウント（無料） • 「microCMS をPHPで動かすサンプル」   https://github.com/trickstar13/microphp • やる気 ༻ҙ͢Δ΋ͷ

Slide 13

Slide 13 text

αϯϓϧϑΝΠϧΛμ΢ϯϩʔυˍల։

Slide 14

Slide 14 text

FTPͰΞοϓϩʔυ

Slide 15

Slide 15 text

_htaccessΛ.htacessʹϦωʔϜ

Slide 16

Slide 16 text

ϒϥ΢βͰυϝΠϯʹΞΫηεˠͰ͖ͨ☺

Slide 17

Slide 17 text

΍ͬͯΈΑ͏2

Slide 18

Slide 18 text

microCMSͰʮαʔϏεʯΛ࡞Δ ※他の人が既に使っているとエラーになるのでその場合は違うIDを入力する

Slide 19

Slide 19 text

ʮαʔϏεʯͷதʹʮAPIʯΛ࡞Δ ※次のステップでは「リスト形式」を選ぶ。

Slide 20

Slide 20 text

ʮAPIʯʹεΩʔϚʢೖྗ߲໨ʣΛఆٛ͢Δ

Slide 21

Slide 21 text

χϡʔεͷݪߘΛ͍ΕΔ

Slide 22

Slide 22 text

APIΩʔΛखʹ͍ΕΔ

Slide 23

Slide 23 text

template.class.phpΛࣗ෼ͷ৘ใʹॻ͖׵͑ͯΞοϓϩʔυ

Slide 24

Slide 24 text

αΠτʹΞΫηεʂʂˠͰ͖ͨ☺

Slide 25

Slide 25 text

APIʹϓϨϏϡʔURLΛઃఆ͢Δ ※実際にはあなたのドメイン名を入力します https://あなたのドメイン/news/{CONTENT_ID}?draftKey={DRAFT_KEY}

Slide 26

Slide 26 text

• 運用中の静的サイトに組み込みやすかった • microCMSはクライアントにも分かりやすいと好評 • microCMSは機能が追加されてもUIが変わらないので   マニュアルを書き換えずに済んだ • フレームワークのバージョンに振り回されずにゆっくり運用できた • 将来的にJamstackに移行するにも、クライアント側の操作は全く変えずに済むので、説得しやすそう ࣮ࡍʹ microCMS × PHP ͰҊ݅Λӡ༻ͯ͠Έͯ…

Slide 27

Slide 27 text

まとめ • Jamstackは楽しいけど初心者にとっては罠も多い • 使い慣れた道具（PHP）で手軽にヘッドレスCMSを始めよう • ヘッドレスCMSなら、microCMSがいいぞ • ヘッドレスで作っておけば、いつでもJamstackに移行できるよ

Slide 28

Slide 28 text

Pentaprogram 佐藤あゆみありがとうございました "If you put your mind to it, you can accomplish anything." - Back to the Future