はじめに
microCMSのリッチエディタでは見出し、太字、リンクなどを使って自由度の高いコンテンツを作成することができます。リッチエディタで作成したコンテンツはmicroCMSのAPIからHTML形式で取得できるため、HTMLの知識がない人でも気軽に見栄えの良いコンテンツを作成することができます。
そんな便利なリッチエディタですが、2025年12月時点ではページ内の任意の箇所に飛ぶような「ページ内リンク」は実現することができません。とはいえ記事などのコンテンツを管理する場合はページ内リンクが必要になってきますよね？
今回はそんなページ内リンクをmicroCMSのリッチエディタで実現してみたのでご紹介します。
今回ご紹介する方法で実現したページ内リンク
現状の課題
microCMS公式のヘルプに記載されている通り、リッチエディタでは任意の箇所にid属性を付与することはできません。
また、ヘルプの課題にも記載されている通り、URLが#sampleのような#から始まるリンクはリッチエディタ内では付与することができません。
これらの課題からmicroCMSのリッチエディタでは任意の箇所へのページ内リンクを作成することはできません。
ページ内リンクの実現方法
ここから本題です。まずはmicroCMSのリッチエディタに以下のような独自のタグ付きのテキストを記載します。XXXXXの部分はダミーのテキストで特に意味はありません。
これをフロントエンドまたはバックエンドで解析してHTMLに置換することで、ページ内リンクと特定の箇所へのid属性の付与を実現します。置換前後のイメージは以下の通りです。
| 置換前の独自タグ | 置換後のHTML | |
|---|---|---|
| ページ内リンク | [テキスト](#sample) |
<a href="#sample">テキスト</a> |
| id属性の付与 | [テキスト]{id=sample} |
<span id="sample">テキスト</span> |
実装例
先ほどご説明した実現方法を踏まえた置換処理の実装例をご紹介します。置換処理の実装例はJavaScript・Laravelの2パターン用意しており、最後にはReactで実装した場合の完成イメージも合わせて掲載しています。
前提
先ほどリッチエディタで作成したコンテンツはmicroCMSのAPIから以下の形式でレスポンスが返却されます。
{
"article": [
{
"fieldId": "richText",
"richText": "<p>XXXXX[ページ内リンク](#sample)XXXXX</p> ...中略... <p>XXXXX[idを付与したテキスト]{id=sample}XXXXX</p>"
},
],
}
こちらの"<p>XXXXX[ページ内リンク](#sample)XXXXX</p> ...中略... <p>XXXXX[idを付与したテキスト]{id=sample}XXXXX</p>"の部分が「richText」という名前の変数に格納されているイメージで実装を進めます。
ページ内リンク
まずはページ内リンクの置換処理の実装例です。変数「richText」の中から[]で囲まれたテキストと()で囲まれたURLを探して、ページ内リンク付きのaタグに置換します。
richText.replace(/\[([^\]]+)]\(([^)]+)\)/g, (_, text, href) => {
return `<a href="${href}">${text}</a>`;
});
preg_replace_callback(
'/\[([^]]+)]\(([^)]+)\)/',
function ($matches) {
$text = $matches[1];
$href = trim($matches[2]);
return '<a href="'.$href.'">'.$text.'</a>';
},
$richText
);
id属性の付与
次にid属性の付与の実装例です。今度は[]で囲まれたテキストと{}で囲まれた属性を探して、id属性付きのspanタグに置換します。
richText.replace(/\[([^\]]+)]\{([^}]+)}/g, (_, text, attribute) => {
return `<span ${attribute}>${text}</span>`;
});
preg_replace_callback(
'/\[([^]]+)]\{([^}]+)}/',
function ($matches) {
$text = $matches[1];
$attribute = trim($matches[2]);
return '<span '.$attribute.'>'.$text.'</span>';
},
$richText
);
完成イメージ
今回ご紹介した方法を使ってReactで実装した場合のイメージがこちらになります。今回はページ内リンクを実現するために必要不可欠な処理を中心にご紹介しているためサニタイジング処理などは割愛していますが、業務で利用する際にはより安全に実装していただければと思います。
export const RichText = ({ richText }: { richText: string }) => {
const replacedRichText = useMemo(() => {
let result = richText;
result = result.replace(/\[([^\]]+)]\(([^)]+)\)/g, (_, text, href) => {
return `<a href="${href}">${text}</a>`;
});
result = result.replace(/\[([^\]]+)]\{([^}]+)}/g, (_, text, attribute) => {
return `<span ${attribute}>${text}</span>`;
});
return result;
}, [richText]);
return <div dangerouslySetInnerHTML={{ __html: replacedRichText }} />;
};
最後に表示されたページをGoogle Chromeのデベロッパーツールから確認すると、指定した箇所に「ページ内リンク」「id属性」が付与されていることがわかりますね。
おわりに
今回はmicroCMSのリッチエディタでページ内リンクを実現する方法をご紹介しました。公式から提供されている機能ではないものの、かなり使い勝手の良い実現方法なのではないかと思います。皆さんの日々の開発に少しでもお役立ていただければ幸いです。