TextMeshProで漢字やそれ以外でもふりがな(ルビ)を表示するRubyTextMeshPro

TextMeshProでルビを入れる方法

こども向けに作るコンテンツや、難しい漢字にふりがな（ルビ）を入れたいと思うことはありますよね。
でも、TextMeshProではルビのタグは無くて、自分でタグを付けないといけません。

自分で欲しいと思ったので、あまり需要は無いかもしれませんが、実は11月からGitHubでMITライセンスで公開しています。

GitHub

jp-netsis/RubyTextMeshPro

https://github.com/jp-netsis/RubyTextMeshPro

Unity Text Mesh Proでルビ(フリガナ)のタグを追加しました. Contribute to jp-netsis/RubyTextMeshPro development by creating an account on GitHub.

インポート方法

TextMeshProをPackageManagerからインポートしてください。
Asset StoreからのText Mesh Proのインストールは古いバージョンのため行わないでください。
TextMeshProの使い方は、割愛させていただきます。
GitHubからDLした中から Assets/RubyTextMeshPro を自身のUnityProjectへコピペしてください。
Unityへ読み込みが終わると、Unityのメニューに以下が追加されます。
GameObject →
　3D Object → Text – RubyTextMeshPro
　UI → Text – RubyTextMeshPro
　UI → Button – RubyTextMeshPro
※ TextMeshProではその他、DropDownやInputFieldの作成ができます。
　しかし、ルビはタグを多く使用するため、あまり多くの文字に対して行わないことを推奨します。
　（とくにモバイル環境）

使用方法（UI）

UIの作成においては、以下のように作成していただけると作られます。
Inspectorの情報はTextMeshProをベースにしております。

UneditedText にルビタグを入れた文字を入れてください。
その下にある、ConvertTextは編集不可のテキストエリアで、元々のTextMeshPro.textにあたる部分です。

ルビのタグは以下の記述方法が許容されています

<ruby=かんじ>漢字</ruby>
<ruby=”かんじ”>漢字</ruby>
<r=かんじ>漢字</r>
<r=”かんじ”>漢字</r>

その他の例（タグがあればどんな文字でも上に表示できます）

ひらがなやカタカナの上に漢字<ruby=漢字>かンじ</ruby>
英字の上に英字<ruby=kanji>KANJI</ruby>

また、実は<r=るび>ルビ</ruby>や <ruby =るび>ルビ</r>でも動作してしまいますが推奨はいたしません。

使用方法（PG）

TextMeshProが無いと動作しませんので、namespace TMPro内で宣言させていただきました。
いつもの通りに実装してしまうとルビが正しく反映されません。

public RubyTextMeshPro rubyTMP = default;
void Start() {
    // NG:そのままルビのタグごと出てしまいます
    rubyTMP.text = "<ruby=ほげ>ふが<\ruby>";
}

public RubyTextMeshPro rubyTMP = default;
void Start() {
    // OK:ただし取得は不可能にしています(getterを用意すればすぐ取れます)
    rubyTMP.UnditedText = "<ruby=ほげ>ふが<\ruby>";
}

textの直接記述をやめたのは、内部でルビのタグを置換するためです。
rubyTMP.text = “<ruby=ほげ>ふが<\ruby>”;　と記述したのに、
var text = rubyTMP.text;
また、rubyTMP.UnditedTextをSetterのみにしたのは、何度も正規表現での
チェックや書き直しをするには重いため、
ルビをふる場所以外は TextMeshPro を使用したほうが良いためです。
全てにルビをふることは無いと思いますので、適材適所で使用してください。