Contentfulのアプリを自作してみよう！単語数カウンターを導入してみる。

#Contentful

#jamstack

小西諒

2021.07.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ベルリンオフィスの小西です。

ヘッドレスCMSのContentfulでは、Appsという機能を使って、ダッシュボードや記事入力機能を自分で拡張することができます。

WordPressのプラグインを簡単に自作できるイメージが近いと思います。

今回は、記事内の入力単語数と、読み終わるまでの目安時間をサイドバーに表示する、簡単なアプリを作ってみたいと思います。

そもそもContentfulのAppsって？

Contentfulの機能を拡張する外部プラグインを指します。

Appsでできること

既存のエントリーフィールドのカスタマイズ
エディターに独自のフィールドを追加する
ABテストのためのコンテンツのバージョン管理
CIビルドやサードパーティサービスをトリガーする

本記事で紹介するように自作もできますし、マーケットプレイスからサードパーティ（DropboxやCloudinaryなどなど）のアプリをインストールしてContentfulを使いやすくすることも可能です。

1. Contentful側の準備

まずはContentfulのダッシュボードで準備をします。

新たにContent modelを作成します。今回は Sample post という名前にします。

[Long text]でフィールドを作成します。名前は Content (Field ID: contnt )にしておきます。ここで設定する[Field ID]をメモしておいてください。

2. ローカルでアプリの作成

ローカルでアプリを作成します。

npx @contentful/create-contentful-app init my-sample-app
cd my-sample-app
npm run start

これで http://localhost:3000 にアクセスして、下記のような表示が出たらOKです。

アプリを終了し、読了時間を表示するためのパッケージをインストールします。

npm install reading-time

reading-timeは https://medium.com/ のような想定読了時間の表示が可能になるパッケージです。

/my-sample-app の中のsrc/components/Sidebar.tsx を開き、下記の通りに変更します。 ENTRY_FIELD_ID に、先ほどContentfulで作成したフィールドID content を記載するのをお忘れなく。

import React, { useState, useEffect } from 'react';
import { List, ListItem, Note } from '@contentful/forma-36-react-components';
import { SidebarExtensionSDK } from '@contentful/app-sdk';
import readingTime from 'reading-time';

interface SidebarProps {
  sdk: SidebarExtensionSDK;
}

const CONTENT_FIELD_ID = 'ENTRY_FIELD_ID';

const Sidebar = (props: SidebarProps) => {
  const { sdk } = props;

  const contentField = sdk.entry.fields[CONTENT_FIELD_ID];

  const [blogText, setBlogText] = useState(contentField.getValue());

  // Listen for onChange events and update the value
  useEffect(() => {
    const detach = contentField.onValueChanged((value) => {
      setBlogText(value);
    });
    return () => detach();
  }, [contentField]);

  // Calculate the metrics based on the new value
  const stats = readingTime(blogText || '');

  // Render the metrics with Forma36 components
  return (
    <>
      <Note style={{ marginBottom: '12px' }}>
        Metrics for your blog post:
        <List style={{ marginTop: '12px' }}>
          <ListItem>Word count: {stats.words}</ListItem>
          <ListItem>Reading time: {stats.text}</ListItem>
        </List>
      </Note>
    </>
  );
};

export default Sidebar;

これでローカル側の準備は完了です。

再び npm run start でアプリを立ち上げておきます。