ヘッドレスCMSでの、フリガナや傍点の実現方法

TL;DR

フリガナや傍点による表記に対応していないヘッドレスCMSにおいて、特定のマークダウン記法を利用することで、それらの表記を実現しました。

背景

弊社で運営しているメディアでは、microCMSというヘッドレスCMSを利用しています。とても便利で使いやすく、使用方法の説明ブログも充実しています。

ただ、リッチエディタでは、HTMLタグを使えない仕様になっています。それについても対処法は丁寧に説明してくださっているのですが、フィールドを切り替えるのが少し大変です。

特に今回は、文章中にフリガナふりがなや傍点・・をふりたかったため、文章ごとに切り替えるのは大変で現実的ではありませんでした。そのためいくつか工夫を加えて、フリガナと傍点を実現しました。

解決策

非エンジニアが利用するツールなので、書きやすい記法が必要でした。そのためHTMLタグではなく、Markdownの記法を利用することとしました。
また、リッチエディタのフィールドでのみ解決するのではなく、様々な場所で広く使えるということも考慮に入れました。

それぞれの解決策

フリガナ

{フリガナ|ふりがな}という記法を検知して、rubyタグを使った<ruby>フリガナ<rt>ふりがな</rt></ruby>に置き換え、フリガナふりがなを表示できるようにしました。

傍点

《《傍点》》という記法を検知して、CSSのtext-emphasisを適用し、傍点・・を表示できるようにしました。

なぜそれぞれで解決策を分けたのか？

当初は、傍点もフリガナと同じ記法で利用していましたが2つの問題が発生しました。

1. 1文全体など長い範囲に傍点をふりたい場合に、文字数を数えるのが大変
2. 画面幅が狭く、傍点をふっている文章に改行が入ってしまうと対応できず、改行がおかしくなる

2つ目の問題については、改行が入ってしまうと傍点が１行目に偏り、改行位置も文字間もおかしくなってしまいます。

実装

適用したいフィールドの全ての文字列で、正規表現を用いて該当のMarkdown記法を検知し、それぞれ置き換えを行いました。

const replaceToRubyTags = (text: string): string => {
  // {漢字|かんじ}のようなMarkdown記法を検知できる正規表現
  const regex = /{([^{|]+)\|([^|}]+)}/g
  const replaceTag = '<ruby>$1<rt>$2</rt></ruby>'
  return text.replaceAll(regex, replaceTag)
}

const replaceToEmphasis = (text: string): string => {
  // 《《傍点》》のようなMarkdown記法を検知できる正規表現
  const regex = /《《([^《》]+)》》/g
  const replaceTag = "<span style='text-emphasis:filled'>$1</span>"
  return text.replaceAll(regex, replaceTag)
}

今回のMarkdown記法は、いくつかのMarkdownで使われているものの中で、通常の文章表現では出現しにくいものという観点で選びました。

まとめ

フリガナや傍点による表記に対応していないヘッドレスCMSにおいて、それらを表示する工夫についてお伝えしました。参考になりましたら幸いです。