Webの文書にルビを振る

Webの文書にルビを振る実装をしてみた。内部ではJavaScriptにより、用意した辞書に登録されている文字列を探して、ルビ入りのHTMLに置換している。素のJavaScriptで実装したからWebブラウザ上でそのまま動作する。

ルビ用の辞書は別途生成する必要がある。今回の焦点は辞書の作り方ではなかった為、scriptタグ内に直接記述した。これはHTMLのレンダリングをする時に、コンテンツで使用されている文字列を解析し、MeCabを使って生成できる(たぶん)。

静的サイトジェネレータを使用している場合は、ビルドのタイミングで全ての文字を洗い出して、そこからルビ用の辞書をHTML内に直接入れてしまう方が良いだろう。サーバーサイドレンダリングしている場合も同様だろう。SPAのような実装形態の場合は、辞書を返すAPIを用意して、そこから取得する形になるかもしれない。ただし、今回の実装ではinnerHTMLによって、HTMLを書き換えているためセキュリティの面で少し注意が必要かもしれない。

また、複数の読み方などの対応の為に、一致する文字列が長いものからHTMLの置換を行う等をする必要がある。

今回は時間の都合上、そこまでやる余裕がなかったから実装しなかった。実際に動作させるためのデモページを貼っておく。

デモページ

<meta http-equiv="Content-Type"  content="text/html; charset=utf-8">

<fieldset>
  <legend>ルビ</legend>

  <div>
    <input type="radio" id="enable" name="ruby-enabling"
	   value="enable" checked
	   onClick="document.querySelectorAll('rt').forEach(elm => elm.style.visibility = 'visible')"
	   />
    <label for="enable">表示する</label>
  </div>

  <div>
    <input type="radio" id="disable" name="ruby-enabling"
	   value="disable"
	   onClick="document.querySelectorAll('rt').forEach(elm => elm.style.visibility = 'hidden')"
	   />
    <label for="disable">表示しない</label>
  </div>

</fieldset>

<hr />
<h1>変換後に展開されるおおよその形</h1>
<p>
  <ruby>
    日本語
    <rp></rp>
    <rt>にほんご</rt>
    <rp></rp>
  </ruby>
  の
  <ruby>
    文章
    <rp></rp>
    <rt>ぶんしょう</rt>
    <rp></rp>
  </ruby>
  にルビを
  <ruby>
    振
    <rp></rp>
    <rt>ふ</rt>
    <rp></rp>
  </ruby>
  る。
</p>


<hr />
  
<h1>変換対象</h1>
<p id="main">
  日本語の文章にルビを振る。
</p>

<script type="text/javascript">
  const dic = {
      "日本語": "にほんご",
      "文章": "ぶんしょう",
      "振": "ふ",
  }

  const dom = document.querySelector("#main");
  var text = dom.innerHTML;
  for (const [target, ruby] of Object.entries(dic)) {
    text = text.replace(
      target,
      `<ruby>${target}<rp>(</rp><rt>${ruby}</rt><rp>)</rp></ruby>`
    );
    console.log(text);
  }

  dom.innerHTML = text;
</script>