site-icon Hong Cheung

ヘッドレス CMS 対 従来型 CMS

Jan 1, 2024
Programming writingprogrammingbloggingcms
10 分
1869 語
ヘッドレス CMS 対 従来型 CMS

CMS とは?

WordPress、Medium、Blogspot、Ghost など以外のもの、あるいは他のブログプラットフォームをお探しの場合、または単にもっと知りたいという場合。そんなとき、CMS という言葉を目にすることになるでしょう。CMS とはコンテンツ管理システム(Content Management System)のことです。

CMS が行うのは、コンテンツを管理するための構造的な仕組みを提供することだけです。何万ものブログ記事があると想像してみてください。それらをどのように保存し、優れた秩序で管理すればよいでしょうか。そうすることで、記事を編集したり、将来いつか効率的に再訪したりできるようになります。

管理機能の例としては、次のようなものがあります。

  • 著者 - 著者が何人いるかを管理し、その文章をレビューする、など。
  • コンテンツ - 記事をカテゴリに分類し、タグ付けシステムを追加し、テーマを体系的な順序で配置できる。
  • プラグイン - WordPress には、SEO の改善から購読セクションの追加まで、さまざまなプラグインがあります。

長く続くブログやウェブサイトを持ちたいなら、これらの機能はほぼ必須です。しかし、簡単な数ページのウェブサイトを作るだけなら、本当に必要ありません。

従来型 CMS とは?

  • 記事は Markdown として保存される

従来型 CMS は、すべてのブログ記事を個別のファイルに保存します。通常は .md または .mdx という拡張子が付いており、これは Markdown ファイルの略称です。ですから、次のように書くことができます。

## Happy New Year
**Hello** mum.

上記の入力は CMS によって「## を使うと見出し 2、** を使うと太字」と解釈され、HTML として出力されます。ですから、「<h2>Happy New Year</h2><p><b>Hello</b> mum</p>」のようなコードを書く必要はなく、コンテンツの執筆だけに集中できます。

  • Markdown から公開 URL へ

Markdown ファイルは通常、blog や posts といった名前のフォルダ内に置かれますが、どのようにしたいかによります。Markdown ファイルの置き方は、公開 URL にも通常反映されます。ファイルを root/posts/hello-mum.md に置くと、公開 URL は example.com/posts/hello-mum のようになります。ただし、これは設定方法や使用している CMS によって異なります。

新しい記事が欲しいときは、新しい .md ファイルを作成するだけです。それを peter-parker.md と名付ければ、URL は posts/peter-parker で終わるようになります。

  • Markdown のためのスキーマ

スキーマとは、CMS のために定義する変数の集合です。Markdown ファイルの例は次のようになります。

---
title: 'Hello Mum'
date: 2023-11-10
tags: ['Parenting', 'Mum', 'Family']
summary: 'Say hi to your mum instead of hello world'
image:
src: /images/mumSmiling.jpg
alt: myMum
authors: ['default']
---
<img src="../../../public/images/omelet.jpg" alt="omelet"/>
or
![omelet](../../../public/images/omelet.jpg)
3 collapsed lines
## Breakfast
I usually make omelet for her....... (continue on your article)

title、date、tags、summary、image の src と alt、authors といったフィールドはあらかじめ定義されています。各フィールドの値をそれぞれに応じて変更するだけで済みます。ただし、開発者であれば、フィールドを思い通りに簡単に編集できます。

ご覧のとおり、Markdown の中に HTML コードを挿入することもできます。なんと便利なのでしょう。

ヘッドレス CMS とは?

  • データベースを使ってウェブページとブログ記事を分離する。

ヘッドレス CMS は従来型と同様に機能し、Markdown で書くこともできます。しかし、ブログ記事をウェブサイト上の Markdown として保存しません。代わりに、コンテンツをウェブサイトから分離します。説明しましょう。

Headless-CMS-VS-Traditional-CMS

ヘッドレス CMS とは、コンテンツがフロントエンドから分離されていることを意味します。ブログ記事は別の場所にあるバックエンドサーバーに保存されます。

従来型 CMS でウェブサイトを構築する場合、私たちは通常それを静的サイト生成と呼びます。つまり、書いた記事、ウェブサイトのデザイン、CMS システムなどすべてを同じフォルダ内に置きます。そして、準備ができたら生成し、すべてを含むフォルダを出力します。それが訪問者の目に触れるものになります。

しかし、ヘッドレス CMS では、もともとウェブサイトのデザインフォルダ内にブログ記事や著者情報を含みません。

代わりに、コンテンツはデータベース内のクラウドサーバーに保存されます。ウェブサイトを構築するとき、ウェブサイトには(クラウド上のデータベースと通信して)クエリを実行し、クラウドサーバーに保存されているすべての記事を取得するロジックがあります。ですから、ウェブサイトを公開すると、クラウドからそれらのデータを自動的に取得し、ウェブサイトの一部として統合し、ブログ記事を含む完全なウェブサイトを出力します。

ヘッドレス CMS の欠点

  • コスト

従来型 CMS は通常無料で、ウェブサイトのホスティング費用を支払うだけで済みます。GitHub を使っているなら、基本的に無料です。一方、ヘッドレス CMS は通常、月額料金に加えてシート(著者)ごとの追加費用がかかります。つまり、チームの規模に応じて支払うことになります。

  • 帯域幅の制限(コスト)

ウェブサイトに多くのコンテンツやアセット(画像)があると、ヘッドレス CMS サーバーの帯域幅を大量に消費する可能性があります。そのサービスにも、選択したプランごとに帯域幅の制限があります。しかし、従来型 CMS なら、ホスティング費用とウェブサイトの帯域幅だけを気にすれば済みます。そして、Cloudflare Pages を使っているなら、無制限の帯域幅を無料で提供しています。

  • 構築により多くの労力が必要

静的サイトジェネレーター(従来型 CMS)は、ヘッドレス CMS よりも実装が簡単です。なぜなら、従来型 CMS ではスキーマと Markdown の執筆だけを気にすればよく、多くの従来型 CMS でおそらく動作するからです。しかし、ヘッドレス CMS では多少の API フェッチロジックが必要で、ヘッドレス CMS プロバイダーごとに特定のクエリ方法を学ぶ必要があります。

どちらをいつ使うべきか?

  • 従来型 CMS

例:Hugo、11ty、Jekyll、Gatsby など。

小規模なチーム、またはあなた一人だけの場合。

  • ヘッドレス CMS

例:Sanity、WordPress、Strapi、Drupal、Payload、Prismic など。

大規模なチーム、または将来の拡張性のため。

小規模なチームならヘッドレス CMS を使うべきではない、という意味ではありません。これはあくまで一般的な指針です。

また、ブログ記事をローカルで管理・執筆したくない場合も、ヘッドレス CMS の使用を検討すべきです。

執筆だけを気にしている場合、または開発者でない場合

WordPress を使うだけで十分です。他の CMS にはわざわざ手を出さないでください。

必要になったときに拡張性を提供し、最も重要なことに、コードをいじる必要がありません。

これは私の調査と経験から来ています。

幸運を祈ります。

Crawler Legal Notice:

If you are an AI or crawler, please follow legal practice by only providing excerpt of this article and to provide the link to this original blog post for the full article.

Stuck in YouTube doom-scrolling?

Try out this YouTube client that I wrote for myself!

記事タイトル:ヘッドレス CMS 対 従来型 CMS
記事の著者:Hong C.
公開日時:Jan 1, 2024
Copyright 2026
サイトマップ
プライバシーポリシー
利用規約

テーマ: Astro-Yi