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

TextMeshProでルビを入れる方法

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

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

GitHub

インポート方法

  1. TextMeshProをPackageManagerからインポートしてください。
    Asset StoreからのText Mesh Proのインストールは古いバージョンのため行わないでください 。
    TextMeshProの使い方は、割愛させていただきます。
  2. GitHubからDLした中から Assets/RubyTextMeshPro を自身のUnityProjectへコピペしてください。
  3. 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 を使用したほうが良いためです。
全てにルビをふることは無いと思いますので、適材適所で使用してください。

RubyTextMeshProのパラメータ

RubyShowType

RUBY_ALIGNMENT  : ルビに合わせて文字を表示します
BASE_ALIGNMENT  : 元の文字に合わせて文字を表示します

AllVCompensation

TextMeshProのタグでルビを作成すると、ルビを使用した行のみ、縦の幅を取ります。
そのため、複数行で表示させたり、複数の TextMeshPro 要素を用意し、一つだけルビ対応したりすると表示崩れが発生します。

そのような場合に備え、allVCompensationRubyLineHeight値(1.945em値)などで
ルビを使用しない場合に同じ隙間を持たせる機能として作成しました。

こちらの値は自動化したいところだったのですが、全ての文字列をなめ回し、
一番縦幅の高い値を反映させる必要があります。
処理的にも負荷が高くなるため、ルビのサイズなどに合わせて、
AllVCompensationをONにしてもOFFにしても座標が変わらない大きさにしてください。

既知の問題

  1. TextMeshPro のソースは改変していません。アラインでいくつか問題が起こります。
  2. ルビの最大文字数よりもテキストボックスを小さくしないでください。表示崩れが起きます。
  3. ‘BASE_ALIGN’で左寄せの場合かつルビが行頭にありつつ元の文字より多い場合、枠の外まで表示されます (1. アライン問題の例)

4. ‘BASE_ALIGN’で中央寄せの場合かつルビが元の文字より多い場合、中央に表示されません。
‘RUBY_ALIGN’ を使用すると解消される場合があります。 (1. アライン問題の例)

5. ‘BASE_ALIGN’で右寄せの場合かつルビが行頭にありつつ
  元の文字より多い場合、(1)_1と違い、枠の内まで表示されます (1. アライン問題の例)

使用させていただいたデータ、参考にさせていただいたサイト様

フォント:RoundedM+(自家製フォント工房様)

参考サイト様

Unityフォーラムの方々

コガネブログ様

その他、ルビ対応ライブラリの一覧

さけのさかな 様 Unity_TSKT_UI

天神いな 様 TextMeshProRuby

さいごに

こどもが安心してたのしく遊べるアプリが増えますように!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください