ヘッドレスCMS Contentfulを活用したつぶやき機能の実装

2025-03-24
6 min read
Tags:
Tech,
Web

Contentfulとは

Contentfulは、ヘッドレスCMSのひとつで、コンテンツ管理とAPI配信に特化したサービスです。ウェブサイトやアプリ向けのコンテンツを一元管理し、RESTful APIや GraphQL APIを通じて、あらゆるデバイスやプラットフォームに配信できます。

構造化されたコンテンツモデルを定義でき、マークダウンやリッチテキストエディタを備え、多言語対応も可能です。開発者はフロントエンドを自由に構築でき、コンテンツ編集者は直感的なインターフェースでコンテンツを管理できます。

「つぶやき」機能を作ってみる

ブログにContentfulを使って「つぶやき」機能をつけてみましょう。

「つぶやき」コンテンツ自体はContentfulで管理します。今回つぶやき投稿についてはContentfulのデフォルトのエディタを使用し、特にコンテンツ作成用のアプリを作成しないことにします。

このブログの「つぶやき機能」ではContentfulからRESTful APIを使って読み出し、時系列で表示するものとします。Paginationも入れましょう。

以下が実現イメージです。

ContentfulでのContent Modelの定義

ContentfulではまずSpaceを作ることになりますが、今回は無料枠を利用する予定なので、デフォルトのSpace Blankを使います。

次にContent Modelを作成します。今回は whisperと名付けました。シンプルに以下のようにしました。idは現時点では不要ですが、将来編集アプリを作る時に備えて一応用意しました。

Content Model

Name	Field ID	Attribute	Unique
id	id	Decimal	Y
whisper_time	whisperTime	Date & time	N
whisper	whisper	Short text
location	location	Location

Contentfulからのつぶやきの読み出し

Contentfulからのコンテンツの読み出しには、ContentfulのSDKを使用しています。

基本的な読み出しは以下のようなコードになります。

const contentful = require("contentful");

const client = contentful.createClient({
  space: "@@@@@@@",
  environment: "master", // defaults to 'master' if not set
  accessToken: "@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@",
});

client
  .getEntry("@@@@@@@@@@@@@@@@@@@@@@@@")
  .then((entry) => console.log(entry))
  .catch(console.error);

実際には space, environment,accessTokenなどは、Amplifyのビルド設定で .envに書き込んで環境変数から読み出しています。

Paginationについては、まず10個を上限で読み出し改ページの際にレコードの開始位置を変更して実現しています。当初はISR ¹ で実装しましたが、Contentfulとうまく連携できずWebhookでの実装も試しました。しかし、いずれも思ったように動作しなかったりサーバーの負荷も高いため、クライアントコンポーネントとしてクライアント側でカーソルを管理しページ制御を実装しました。