Zenn
📝

TIPS: microCMSでリッチエディタのデータを扱うときは、HTML用のデータを一緒に定義すると捗る

2021/05/25に公開
Next.js
TypeScript
microCMS
tech

はじめに

プライベートで microCMS と Next.js の組み合わせを多用しておりまして、そろそろ業務にも導入してもいいかなーと考えているところです。
microCMS の良いところは、自由度の高いデータ定義ができることで、CMSというより、もはや使い勝手の良いデータストアサービスとして捉えています。

https://microcms.io/

今回はこの microCMS の一つのデータ型である、「リッチエディタ型」を扱う際のアイデアを一つ共有したいと思います。

追記
microCMS の公式さんに見つけていただけたようで、リプライいただきました。

本文部分をカスタムデータ(リッチエディタとプレーンテキスト)にして、繰り返して格納していくというアイデアです。確かにこちらの方がインタフェースとして直感的ですし、置換処理の必要がないので取り扱いやすいですね。

ちなみに、私のアイデアも、テンプレートとして同じコンテンツを何度も挿入を繰り返すというシーンにおいては、管理しやすいと思うので、このまま残させていただきたいと思います。

モチベーション

リッチエディタで編集したテキストデータに、任意のテンプレートHTMLを挿入することで、コンテンツの表現力を高める

リッチエディタで編集したテキストは、自動的にHTMLに変換されます。
エスケープ処理せずにレンダリングすれば、そのままHTMLとして扱うことが可能です。(一般的なCMSと同じなので想像しやすいかと。)

実際にブログやLPを作って運用していると、CTA を設置したり、自身でカスタマイズしたスタイルで装飾したいときがたまにあります。
しかし HTML をリッチテキスト内に入力しても、テキストとしてサニタイズされてしまうため、レンダリングしても、そのまま表示されてしまい、意図した挙動にはなりません。

解決策

早速、解決策となる設定方法、実装方法を提示します。

microCMS側の設定

まずはじめに、カスタムフィールド(ここでは shortCode)を定義します。
このカスタムデータは、データを識別するための短いテキスト(code)と、HTML本体(body)を持つように設定します。

  • フィールドID: code | 表示名: 識別コード | 種類: テキストフィールド | 必須: true
  • フィールドID: body | 表示名: HTML | 種類: テキストエリア | 必須: true

次に、APIスキーマの方でポスト本体のデータを定義します。
本文以外のタイトルやアイキャッチ画像、メタ情報などはお好きに設定してください。
ここで、先程定義した shortCode を「繰り返しデータ」として定義します。

  • フィールドID: body | 表示名: 本文 | 種類: リッチエディタ | 必須: true
  • フィールドID: shortCodes | 表示名: ショートコード | 種類: 繰り返し(shortCode)
  • それ以外のデータはお好きにどうぞ

ここまでで、察しの良い方はこの先どうするか想像ができると思います。
そうです、shortCode に 任意のHTMLと識別コードを入力し、識別コードと同じ文字列を本文の方に記載していきます。

このように、本文中では識別コードの両サイドを << >> や [[ ]] のような、実際の文章として発生しないような記号のパターンで囲ってあげてください。

クライアント側のコード

こちらでは Next.js のコードを例に出したいと思います。
適宜自身が利用している言語やフレームワークに置き換えてください。
(複雑なことはしていないので、置き換えやすいと思います。)

上で定義したデータの型はこのような定義になっています。

// post.d.ts
export interface ShortCode {
  code: string
  body: string
}

export interface Post {
  id: string
  createdAt: string
  updatedAt: string
  publishedAt: string
  revisedAt: string
  title: string
  body: string
  shortCodes?: Array<ShortCode>
  // 省略
}

データ取得時に、本文から識別コードを正規表現でマッチさせ、対応するHTMLで置換させます。

// pages/posts/[id].tsx

// getStaticPaths の実装は省略

export const getStaticProps: GetStaticProps<PageProps, { id: string }> = async ({ params }) => {
  const data = await client.get<Post>({
    endpoint: 'posts',
    contentId: params?.id ?? ''
  })
  return {
    props: {
      data: {
        ...data,
        body: replaceBody(data)
      }
    },
    revalidate: 3600
  }
}

export const replaceBody = ({ body, shortCodes }: Post): string => {
  const shortCodesMap =
    shortCodes?.reduce<Record<string, string>>(
      (res, { code, body }) => ({ ...res, [code]: body }),
      {}
    ) ?? {}
  return body
    .replace(/&lt;&lt;(.+?)&gt;&gt;/g, (...[, key]) => shortCodesMap[key])
}

interface PageProps {
  data: Post
}

const Page: FC = ({ data }) => {
  return (
    <main>
      <h1>{data.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: data.body }} />
    </main>
  )
}

export default Page

実行結果

赤枠で囲った部分が、shortCode によって置換された場所です。

その他

今回の例ではわかりやすいように、ポストデータに shortCode を内包するデータの形にしています。実際には、shortCode を共有パーツ化して使用したいケースの方が多いと思いますので、テーブルを別定義して管理した方が、使い勝手が良くなると思います。

また、置換用の HTML は microCMS で管理せずに、html-react-parser などと組み合わせて、フレームワーク側で定義したコンポネントと置換するようにすると、より開発しやすくなります。
https://www.npmjs.com/package/html-react-parser

P.S.
もし microCMS の運営さんが見られておりましたら、ぜひショートコードないし、リッチエディターで編集したテキストに、任意のHTMLを挿入できる機能の導入を検討していただけますと幸いです。ぜひご検討の程よろしくおねがいします。

GitHubで編集を提案

Discussion