Headless CMS触ってみた【概要編】

f:id:branu_techblog:20211020125132p:plain


こんにちは🌞

Branuの開発部にてフロントエンドエンジニアとして働いております前田です!

このごろ、「HeadlessCMS」というワードをよく目にして気になっていましたのでこの度触ってみました。その備忘録として今回ブログに投稿させていただきました。

長くなりそうでしたので概要編と利用編の2回に分けて投稿する予定です。
暖かくも優しい目で見守っていただけると嬉しい限りです😇

1. HeadlessCMSとは?

その前にCMSとは?

Content Management Systemの略でテキストや画像といったコンテンツなどを管理してインターネット上に公開するシステムのことを指します。

代表的なものだとWordPressMovableTypeなどがあります。
ちなみに、弊社ではCareeconSitesという建設業界特化のCMSも開発しております。

それでHeadlessCMSとは?

Head(Viewという見た目の機能)が存在しないCMSのことを指しまして、以下のような特徴があります。

  • WordPressのようにCMS独自のタグを埋め込まなくてもよい。
  • 見た目の情報を持たないのでコンテンツを管理することに特化している。
  • APIへリクエストを送り、そのレスポンスを受け取ってフロントエンド側で見た目をカスタマイズできるので自由度が高い

つまり、APIエンドポイントを叩いてCMS側から投稿内容を受け取ればよいので、従来のWebアプリ開発の要領で、かつフロント側の実装のみでコンテンツ投稿型の動的なWebサイトを作ることができるのです!

コーポレートサイトやプロダクトのメディアサイトを作るときに役立ちそうですね😆

今回触ってみたHeadlessCMSはこちら

様々なHeadlessCMSが各社から提供されておりますが、

  • アップデートの頻度が高い
  • 管理画面が日本語対応しているので親しみやすい
  • 非エンジニアの方が運用される場合でもとっつきやすいであろうUX

という点で、microCMSを触ってみました。

2. HeadlessCMS周りの技術

周辺技術を簡単に図で示してみました。

f:id:branu_techblog:20211020115806j:plain

大まかな流れは以下のとおりです。

  • ① コンテンツを投稿

コンテンツ管理者がHeadlessCMSの管理画面にてコンテンツを投稿するとデータベースに投稿内容が格納されていきます。

  • ② デプロイ

FirebaseやNetlifyといったホスティングサービスへとデプロイします。

  • ③ 配信

ホスティングサービスを介して配信することでWEB上にサイトが公開されます。

  • ④ 投稿データを取得

ユーザーがWEBページにアクセスすることでHeadlessCMS側にリクエストが送信され、投稿データをjson形式で取得して画面上に投稿内容が表示されます。

このような流れで動的なwebサイトの公開ならびに更新を行うことができます。

また、これらの周辺技術は総称してJAMStack(Javascript APIs Markup)と呼ばれます。

終わりに

以上、HeadlessCMSの概要について簡単にご説明しました。
次の投稿では、実際にHeadlessCMSの利用方法について説明していきたいと思います。

それでは、またお会いしましょう👐
最後までご覧いただきありがとうございました!