「ヘッドレスCMSとは」社内勉強会資料

2021/04/07 ONE SWORD株式会社社内でヘッドレスCMSについての勉強会を行いました。
その時の資料を公開します。

Transcript

1. ヘッドレスCMS 社内勉強会資料 1 ONE SWORD株式会社
2. はじめに 2
3. 目次 - ヘッドレスCMSとは何なのか - SSG/ISRのメリット - 自社開発したWordPressAPIの紹介 - まとめ、ヘッドレスCMSを使うべきかどうか 3
4. そもそもCMSとは 4
5. そもそもCMSとは - WordPressに代表されるContent Management Systemの略 - HTML等のファイルの書き換えなしにブログ等のコンテンツを更新する仕組み - →非開発者がブログを更新するのに便利 - WordPress以外にもShopify等いろいろある 5
6. ヘッドレスCMSとは 6
7. ヘッドレスCMSとは - サイト訪問者はCMSを介してページを表示 する - すべてのページはCMSで管理される - サイト訪問者はページに直接アクセスす る - 各ページから必要に応じて CMSにアクセ スする 一般的なCMSの構成 ヘッドレスCMSの構成 7
8. この違いが何に影響するか 8
9. サイトの目的と実装者都合で 使用する技術を選定出来る。 一般的なCMS ヘッドレスCMS CMSで採用されている言語等により、使 用する技術に制限が発生する CMS部分が切り離されているため、 技術を自由に選定できる WordPressであればPHP、Shopifyであ ればliquid等、CMSで指定されている言 語やフレームワーク等に則って開発するこ とを強要される 9
10. 構成例 10
11. 一般的なCMS フロントエンド＆CMS - WordPressの仕組みの制限の中で 実装する - どのページでも毎度 CMSにアクセス してページを生成する必要がある 11
12. ヘッドレスCMS フロントエンド コンテンツの更新のみに利用 ヘッドレスCMS React開発の恩恵を受けれる SSG（後述）を採用することで - 表示速度が速い - SEOに強い - 負荷に強い 12
13. SSGとは 13
14. SSGとは - Static Site Generator（静的化） - 動的なページを静的なページ化する（HTML/CSS/JSのファイルに書き出す）こと で、アクセスする前からページが生成されてる状態を作る - この技術によってヘッドレスCMSが盛り上がった（？） 14
15. 15 一般的なCMS ヘッドレスCMS ×SSG
16. SSGのメリット①　表示速度向上 - 従来のCMSでは、ページにアクセスする度にCMSがページの内容を生成していた - SSGでは、アクセスしたタイミングですでに静的ファイルに書き出された状態になっ ているので、表示に必要なページ生成等のステップが少ない 表示速度が速くなるとユーザーが喜ぶ！ だけではない SSGを採用している onesword.jpの得点（Desktop）💯 16
17. Core Web Vitals - Core Web Vitalsとは、Googleが打ち出したWebUXの指標 - LCP、FID、CLSの3つの指標があり、それぞれの得点が高いほど UXの高いサイトとして、検索ラン キングで優遇することが発表された - LCPはページの表示速度、FIDはユーザーが始めて操作出来るようになるまでの時間で、ページの 表示速度はSEOに求められる要素となった 画像引用元 :https://web.dev/vitals/ 17
18. SSGのメリット②　アクセス集中に強い - 毎表示ごとにCMSがデータベースにアクセスしてページ内容を生成してると、アク セス集中時にサーバーに負荷がかかって落ちるなんてことがありえる - 静的ファイルであればそういった処理が発生しないのでまず落ちない - CDN（エッジサーバー）にキャッシュを溜めてそれを返して負荷分散も出来る - 参考) 水樹奈々さん結婚おめでとうございます！発表のブログが落ちない理由 (わけ) 18
19. 表示速度が向上し、 検索ランキングに強く、 アクセスが集中しても落ちない サイトが作れる！！ つまりSSGを採用すると... 19
20. 最強すぎるSSG...😎 デメリットはある？ 20
21. ある😭 21
22. SSGのデメリット... データがリアルタイムのものではないので、コンテンツ更新の 度に静的ファイルを再生成する必要がある ブログ内の1文字だけを修正したとしても、反映までに2~3分かかる そのため - 頻繁に更新されるサイト - 訪問者がコンテンツを生成するサイト には不向き 22
23. そんなSSGのつらみを（ある程度） 解決してくれた技術があります 23
24. Next.jsはいいぞ https://nextjs.org/ - Reactの代表的フレームワーク - Socket.ioの開発者であるGuillermo Rauchによって開発された - 2020年に凄まじい成長を見せて、開発元が40億円を超える資金調達に成功 - TikTok、Twitch、Hulu等そうそうたるサービスで使われている 24
25. SSGのデメリットをカバーする技術① fallback 25
26. fallbackとは - 通常SSGではブログ記事を追加しても、ファイルの生成が完了しないとアクセスし てもNot Foundとなる - fallbackを使えば、Not Found時に動的にページを生成して表示してくれ、さらにそ の裏でページファイルを生成してくれるので、次回以降のアクセス時にそのページ ファイルが表示されるようになる 26
27. 27 1. 記事はあるがページファイルがまだ生成されていない URLにアクセスするとNot Foundとなる （fallbackがなければここで終わり） 2. サーバーにアクセスして該当の記事データがあればページを動的に生成してユーザーに返却する 3. その裏で同記事のページファイルを生成する 4. それ以降にアクセスしたユーザーには 3で生成したページファイルを返却する ① ② ③ ④
28. SSGのデメリットをカバーする技術② ISR 28
29. ISRとは - Incremental Static Regeneration（インクリメンタル静的再生成） - SSGで生成された静的な内容からの差分を自動で再生成してくれる 29
30. 30 SSG ISR 差分だけ生成される！
31. 画像引用元：Qiita 31
32. ISRによって - コンテンツの差分だけ再生成されるので速い - 自動で静的ファイルが再生成される→更新後に手動で反映する必要がなくなった ※ただしだれか一人が犠牲になる必要がある - ISRのデモサイト作りました 32
33. 通常の WordPress ヘッドレスCMS構成 SSG Next.js SSG+fallback ISR 自由な技術選定 - ⭕ ⭕ 表示速度 - ⭕ ⭕ SEO ⭕ ◎ ※CoreWebVital◯ ◎ ※CoreWebVital◯ 負荷耐性 - ⭕ ⭕ コンテンツ追加反 映速度 ⭕ - ⭕ コンテンツ更新反 映速度 ◎ ※リアルタイム - ⭕ ※リアルタイムではない 33
34. 34 SSGを採用することで表示速度が速くな り、 - 表示が速い - SEOに強い - 負荷に強い サイトに出来る。 SSGの欠点である - コンテンツの更新に時間がかかる という点をfallback・ISRで補完。
35. こっちをどうするか 35
36. 最後に バックエンド（ヘッドレスCMS）側の選択肢 36
37. - MicroCMS - Contentful 等々色々あるが - MicroCMS以外は基本英語のみのサービスなので人を選ぶ - 無料プランはあるが、コンテンツ量やデータ通信量に制限があり、一定値を超えるとだいたい 5000 円/月くらいかかる といったデメリットがある😕 代表的なヘッドレスCMSサービス 37
38. そこでWordPressAPI 38
39. メリット👍 - 基本利用無料。サーバー代もメールサーバー込みでだいたい1000円/月くらい - 管理画面を使い慣れてる人が多い - ソースコードレベルで自由にカスタマイズできる（ショートコード等） デメリット👎 - 構築作業が必要 - WordPressの更新やサーバー管理が必要 - 実用化にあたりWordPressの専門的なカスタマイズが必要 - プレビューが出来ない等 WordPressAPIの特徴 39
40. （わだけんが) WordPressAPIテーマ作りました 40
41. - プレビュー対応（ここが結構大変だった） - WordPress内でプレビューボタンを押した際の挙動と、プレビュー時のデータ操作を整備 - GraphQLでのAPI連携（主にプラグインで実現） - アクセス回数節約、レスポンス時間短縮 - その他細かい調整 自前WordPressAPIテーマの特徴 41
42. MicroCMS Contentful WordPressAPI 自前 WordPressAPI 月額料金（おおよそ） 4900円 ※無料プランあり $489? ※無料プランあり 1000円 ※サーバー代 1000円 ※サーバー代 コンテンツ・通信量制 限 無料だと制限あり 無料だと制限あり 基本なし 基本なし サーバー管理不要 ⭕ ⭕ - - 日本語対応 ⭕ - ⭕ ⭕ 自由なカスタマイズ - - ⭕ ⭕ 管理画面の操作経 験 - - ⭕ ⭕ 記事プレビュー ⭕ ⭕ - ⭕ GraphQLでの高効率 データ取得 - ⭕ - ⭕ 42
43. ※補足　WordPressAPI以外を使ったほうが良いパターン - WordPressAPIのために新しくサーバーを契約する - メールサーバーが不要 - コンテンツ量が少ない - サイトのアクセス数もあまりない の条件がすべて満たされるのであれば、MicroCMSを無料枠で使うのが得策 43
44. まとめ 44
45. ヘッドレスCMSとは - サイト訪問者はCMSを介してページを表示 する - すべてのページはCMSで管理される - サイト訪問者はページに直接アクセスす る - 各ページから必要に応じて CMSにアクセ スする 一般的なCMSの構成 ヘッドレスCMSの構成 45
46. フロントエンド ヘッドレスCMS - 使い慣れた管理画面 - 料金が安い - 容量や通信量の制限を気にしないでよ い - ショートコード等自由にカスタマイズ出 来る - プレビューが出来る 最も大変な構築・実装部分は完了した。 🥳 SSGを採用することで、 - 表示が速い - SEOに強い - 負荷に強い サイトに出来る。 SSGの欠点である - コンテンツの更新に時間がかかる という点をfallback・ISRで補完。 46 （自前API）
47. フロントエンド比較表 47 通常の WordPress ヘッドレスCMS構成 SSG Next.js SSG+fallback ISR 自由な技術選定 - ⭕ ⭕ 表示速度 - ⭕ ⭕ SEO ⭕ ◎ ※CoreWebVital◯ ◎ ※CoreWebVital◯ 負荷耐性 - ⭕ ⭕ コンテンツ追加反 映速度 ⭕ - ⭕ コンテンツ更新反 映速度 ◎ ※リアルタイム - ⭕ ※リアルタイムではない
48. バックエンド（ヘッドレス CMS）比較表 48 MicroCMS Contentful WordPressAPI 自前 WordPressAPI 月額料金（おおよそ） 4900円 ※無料プランあり $489? ※無料プランあり 1000円 ※サーバー代 1000円 ※サーバー代 コンテンツ・通信量制 限 無料だと制限あり 無料だと制限あり 基本なし 基本なし サーバー管理不要 ⭕ ⭕ - - 日本語対応 ⭕ - ⭕ ⭕ 自由なカスタマイズ - - ⭕ ⭕ 管理画面の操作経 験 - - ⭕ ⭕ 記事プレビュー ⭕ ⭕ - ⭕ GraphQLでの高効率 データ取得 - ⭕ - ⭕
49. ヘッドレスCMSを選択するべきかどうか - ❌保守契約できない 先方にReact等が書ける人がいないとメンテナンスできないので、 WordPressで普通に実装してソースコード一式をすべて渡 すのが安全 - ❌とにかく安くサイトを作りたい ヘッドレスCMSは構築費用がいくらか追加で必要なのでWordPressで組んだほうが安くなりやすい ※ヘッドレスCMS関係ないが、そもそも CMSが必要ないLP等であればReactのフレームワークを使って組んだほうが安く出来るパターンはあ ります 49
50. ヘッドレスCMSを選択するべきかどうか - ⭕特別な機能をサイトに持たせる必要がある 機能によるが、WordPress等の制限を受けずに開発できるヘッドレスCMSパターンのほうが向いてる（高品質なものが出来る）可能 性が高い - ⭕メディア露出等で多くのアクセスが集中する見込みがある SSGの出番です。すでに WordPressで動いているサイトであれば、 WordPressをSSG化するプラグインで応急処置も出来ま すが、新規サイトであれば初めからヘッドレス CMSの構成でやったほうがいいかと。 - ⭕コンバージョン目的の強いサイト SSGがオススメです。表示速度が早くて離脱されにくく、SEOに強く、回遊率が上がることが見込めます。 50
51. ヘッドレスCMS開発案件 お待ちしております󰞐 51
52. おわり 52