自動でふりがな付きのHTML文字列を作成するライブラリはないでしょうか

Question

入力例１

const a = "お疲れ様です。";
const b = "おつかれさまです。";

入力例２

const a = "試される大地北海道";
const b = "ためされるだいちほっかいどう";

という、a：漢字交じり文章、b:全部ひらがな文章
があったときに、
二つの文章の差分をとって、自動でふりがな付きのHTML文字列を作成するライブラリはないでしょうか。
あったら教えてください。
jsdiffという差分検出のライブラリは見つけたのですが、自動ふりがなまで自動でやってくれるライブラリくらい誰かが先に作っているのではないかと。
期待する出力１

<p>お<ruby>疲<rt>つか</rt></ruby>れ<ruby>様<rt>さま</rt></ruby>です。</p>

期待する出力２

<p><ruby>試<rt>ため</rt></ruby>される<ruby>大地北海道<rt>だいちほっかいどう</rt></ruby></p>

Comments

[Sleepy_Eutychus]

期待する出力の1と2それぞれで最初のruby要素の終了タグが開始タグになっていますよ。

[yutampp]

修正しました

Answer 1

面白そうなので、正規表現の置換だけでどの程度出来るかやってみました。
この手のプログラムはRubyが一番書くのが楽そうなのでRubyで。

def ruby(kanji, kana)
	regexp = Regexp.new(("^("+kanji.gsub(/[^ぁ-ん]+/,")(.+?)(")+")$").gsub("()",""))
	kanji_split = kanji.split(/(?<=[ぁ-ん])(?=[^ぁ-ん])|(?<=[^ぁ-ん])(?=[ぁ-ん])/)
	kana_split = regexp.match(kana)[1..]
	kanji_split.zip(kana_split).map do |x,y|
		x == y ? x : "<ruby>#{x}<rt>#{y}</rt></ruby>"
	end.join
end
puts ruby("お疲れ様です。", "おつかれさまです。")
puts ruby("試される大地北海道", "ためされるだいちほっかいどう")
puts ruby("中々な金物","なかなかなかなもの")
puts ruby("李も桃も桃のうち", "すもももももももものうち")

kanji_splitの所はもうちょっと上手く書きたいけど、あまり考えるとJavaScriptに書き直すときに困るので。

アウトプットは、

お<ruby>疲<rt>つか</rt></ruby>れ<ruby>様<rt>さま</rt></ruby>です。
<ruby>試<rt>ため</rt></ruby>される<ruby>大地北海道<rt>だいちほっかいどう</rt></ruby>
<ruby>中々<rt>なか</rt></ruby>な<ruby>金物<rt>かなかなもの</rt></ruby>
<ruby>李<rt>す</rt></ruby>も<ruby>桃<rt>も</rt></ruby>も<ruby>桃<rt>ももももも</rt></ruby>のうち

で、普通のパターンはOKですが、ややこしいのは駄目ですね。
直感的には一般の文章だと9割くらいは大丈夫な気がしますが、残りは手作業。
これが99%位なら、手作業無しで公開して指摘があったらそこだけ対応という手抜きも出来ますが。

これ以上精度を上げるためには、正規表現メソッドを使わず、自分で複数パターン検出して、
案1：人間がその中の1つを選択する
案2：何らかの評価関数でスコアを付けて最も高い物を選ぶ
案3：Chat-GPTに選んでもらう

案2だと、日本語解析データが必要そうで大変。自動化するなら今なら案3でしょうか。さらにそれを人間がチェックするか、手抜きでそのまま公開するか。

JavaScript版はzip相当が無いのでそこだけちょっとダサい。

function ruby(kanji, kana) {
  const regexp = new RegExp(("^(" + kanji.replace(/[^ぁ-ん]+/g, ")(.+?)(") + ")$").replace(/\(\)/g, ""));
  const kanji_split = kanji.split(/(?<=[ぁ-ん])(?=[^ぁ-ん])|(?<=[^ぁ-ん])(?=[ぁ-ん])/);
  const kana_split = kana.match(regexp).slice(1);
  return kanji_split.map((x, i) => {
    const y = kana_split[i];
    return x === y ? x : `<ruby>${x}<rt>${y}</rt></ruby>`;
  }).join("");
}
console.log( ruby("お疲れ様です。", "おつかれさまです。") )
console.log( ruby("試される大地北海道", "ためされるだいちほっかいどう") )
console.log( ruby("中々な金物","なかなかなかなもの") )
console.log( ruby("李も桃も桃のうち", "すもももももももものうち") )

Comments

[yutampp]

ありがとうございます。正規表現でもできるんですね。
diff_match_patchを使ってrubyタグをつける部分は結局自力コーディングしました。
これ以上の精度を求めると、DeepLearningするかAI使うかになりますよね。
形態素解析ライブラリ使うのが楽そうですが、やっぱりしんどいので手抜きします。

Answer 2

ChatGPTにより生成された文章です

正しくはChatGPTにより生成された文章を含んでいます。

以下本文

たとえば、

中々な金物
なかなかなかなもの

みたいなのを差分アルゴリズムだけでどうこうできるものなのかな……という疑問を持ちました。
形態素解析やふりがなAPIを使うぐらいではないと難しいのでは。

とりあえず、ChatGPTに聞いてみました。

---

以下の例のように、かな漢字混じり文とそのふりがなが入力で与えられた時に、HTMLのrubyタグでふりがなをコーディングしたいです。

例1：
かな漢字混じり入力が"お疲れ様です。"
ふりがな入力が"おつかれさまです。"
この場合の出力が"<p>お<ruby>疲<rt>つか</rt><ruby>れ<ruby>様<rt>さま</rt></ruby>です。</p>"

例2：
かな漢字混じり入力が"試される大地北海道"
ふりがな入力が"ためされるだいちほっかいどう"
この場合の出力が"<p><ruby>試<rt>ため</rt><ruby>される<ruby>大地北海道<rt>だいちほっかいどう</rt></ruby></p>"

以下の入力の場合はどのような出力になりますか？

かな漢字混じり入力が"中々な金物"
ふりがな入力が"なかなかなかなもの"

---

入力されたかな漢字混じり文とふりがなに基づいて、HTMLのrubyタグを使ってふりがなをコーディングすると、以下のような出力になります。

入力:
かな漢字混じり入力: "中々な金物"
ふりがな入力: "なかなかなかなもの"

出力:

<p><ruby>中々<rt>なかなか</rt></ruby>な<ruby>金物<rt>かなもの</rt></ruby></p>

この出力では、漢字の部分が<ruby>タグで囲まれ、ふりがなが<rt>タグで指定されています。それぞれのふりがなが対応する漢字にマッピングされています。

---

ありがとうございます。たとえば、この処理を JavaScript のコードで書くとすると、どのようなコードになりますか？

---

JavaScriptを使用して、与えられたかな漢字混じり文とふりがなを基に、HTMLのrubyタグでふりがなをコーディングするコードは以下のようになります。

function generateRubyTag(kanji, furigana) {
  // 文字列を文字ごとに分割
  const kanjiArray = Array.from(kanji);
  const furiganaArray = Array.from(furigana);

  let rubyTag = '';

  // 文字ごとにループしてrubyタグを生成
  for (let i = 0; i < kanjiArray.length; i++) {
    const kanjiChar = kanjiArray[i];
    const furiganaChar = furiganaArray[i];

    // rubyタグを生成して連結
    rubyTag += `<ruby>${kanjiChar}<rt>${furiganaChar}</rt></ruby>`;
  }

  // 最終的な出力のHTMLタグを生成
  const output = `<p>${rubyTag}</p>`;

  return output;
}

// 例の入力に対して出力を生成
const kanjiInput = "中々な金物";
const furiganaInput = "なかなかなかなもの";
const outputHTML = generateRubyTag(kanjiInput, furiganaInput);

console.log(outputHTML);

このJavaScriptのコードでは、generateRubyTagという関数を定義しています。この関数は、かな漢字混じり文とふりがなを受け取り、HTMLのrubyタグを生成します。文字列を文字ごとに分割し、ループを使って各文字に対応するrubyタグを生成します。最終的に、生成されたrubyタグを<p>タグで囲み、出力のHTMLタグを生成します。

上記のコードを実行すると、以下のような出力がコンソールに表示されます。

<p><ruby>中々<rt>なかなか</rt></ruby>な<ruby>金物<rt>かなもの</rt></ruby></p>

この出力は、指定したかな漢字混じり文とふりがなに基づいて、HTMLのrubyタグが正しく生成された結果です。

---

コードを試してみましたが、動作しませんでした。ChatGPTには問題は解決できるのですが、それをアルゴリズムにするのはやはり難しいようですね。

Comments

[yutampp]

回答ありがとうございます。
ちょっと複雑になると期待通りに差分をとってくれないことがあるんですよね。
jsdiffのデモサイトで「庭には二羽鶏がいる」という文章の差分をとるとなぜか「わに」が出現します。
http://incaseofstairs.com/jsdiff/
'''html
<pre id="result"><del>庭</del>に<ins>わに</ins>は<del>二羽鶏</del><ins>にわにわとり</ins>がいる</pre>
'''
これについてはgoogle-diff-match-patch というライブラリでセマンティッククリーンアップをしないでやったところ試した限りでは問題発生しませんでしたのでそれを使うことにしました。
'''html
<div id="outputdiv"><del style="background:#ffe6e6;">庭</del><ins style="background:#e6ffe6;">にわ</ins><span>には</span><del style="background:#ffe6e6;">二羽鶏</del><ins style="background:#e6ffe6;">にわにわとり</ins><span>がいる</span><br>Time: 0s</div>
'''

[yutampp]

あ、でも「李も桃も桃のうち」は駄目ですね。
李が「すもももももも」になってしまう。

Answer 3

chrome用のふりがな拡張機能とかでよければサテライトオフィスから無償版が提供されているようです

• サテライトオフィス・ふりがな付与機能 | Google Workspaceの事ならサテライトオフィス

Comments

[yutampp]

回答ありがとうございます。
単に読みやすいようにしたいわけではなく、画像に変換したいので、ちょっと違うんですよね。