夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

HoloLensでアプリ内で日本語のキーボードを実装する。Osaka HoloLens Hackathon 2022二日目

本日はOsaka HoloLens Hackathon 2022二日目の記事です。

11日からOsaka HoloLens Hackathon2022が開催されています。

筆者は指文字のアイデアで参加しています。

redhologerbera.hatenablog.com

今回は指文字のために日本語のキーボードを作成します。

〇キーボードの作成

MRTKではアプリ内で使用できるキーボードが提供されています。

しかし今回はあいうえおの日本語が入力できるキーボードを使用したいです。

指文字自体はアルファベットもあり、海外でも使用することができますが、今回の最小構成では日本語のみを想定しています。そのため日本語のみが使用できるキーボードを新規作成します。

ベースには以前作成したテンキーを使用します。

redhologerbera.hatenablog.com

①次のスクリプトを作成します。

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using TMPro;

public class JapaneeseKeyBoard : MonoBehaviour
{
    [Serializable] public class MyEvemt :UnityEvent<string>
    {}
    
    [SerializeField] private MyEvemt _Keyevent;
    private string _Field;
    [SerializeField] private TextMeshPro _text; 
    public void KeyInput(string number)
    {
        _Field += number;
        _Keyevent.Invoke(_Field);
    }

    public void BackSpace()
    {
        int _Dsize = _Field.Length-1;
       Debug.Log(_Field);
       Debug.Log(_Dsize);
       _Field = _Field.Remove(_Dsize, 1);
       _text.text = _Field;
    }
}

②シーンにMRTKで提供されているボタンプレファブを配置します。

今回は[PressableButtonHoloLens2Circular_32x32]を使用しています。

f:id:Holomoto-Sumire:20220212105457p:plain

③[PressableButtonHoloLens2Circular_32x32]のインスペクターウィンドウから[Button Config Helper]コンポーネントの[Enable Main Lavel]と[Enable See it and Say it Lavel]のチェックを外します。

f:id:Holomoto-Sumire:20220212105857p:plain

これによってボタンがアイコンのみになります。

MRTKのボタンではIconSetを作成することで任意のアイコンを使用することができますが、作業の都合でアイコンは一度飛ばします。

④[JapaneeseKeyBoard]コンポーネントをボタンにアタッチします。

⑤シーンにTextMeshProの3Dテキストを配置し、[JapaneeseKeyBoard]コンポーネントの[KeyEvent]にアタッチし、Functionは[TextMeshPro.Text]を指定します。

f:id:Holomoto-Sumire:20220212110149p:plain

⑥[Button Config Helper]コンポーネントの[Basic Events]にイベントを加え[JapaneeseKeyBoard]コンポーネントをアタッチし関数を[JapaneeseKeyBoard.KeyInput]を指定します。

また引数にはひらがなを入力します。

f:id:Holomoto-Sumire:20220212112632p:plain

以上でボタンを押すとTextMeshProのフィールドにひらがなが入力されるようになります。

しかしデバッグをすると文字化けしてしまいます。

f:id:Holomoto-Sumire:20220212113143p:plain

これはTextMeshProで使用しているフォントが日本語に対応していないためです。日本語に対応する別のフォントを入れる必要があります。

〇日本語のフォントの導入

今回はGoogle fontから以下のフォントを使用します。

fonts.google.com

①Unityワールドメニューから[Windows]→[TextMeshPro]→[Font Assets Creater]を開きます。

f:id:Holomoto-Sumire:20220212113810p:plain

②[Sauce font file]にダウンロードしたフォントファイルをアタッチします。

f:id:Holomoto-Sumire:20220212114017p:plain

③設定を画像のように指定します。

f:id:Holomoto-Sumire:20220212114322p:plain

④[Custom Charactor List]には次のGithubからテキストをコピーして貼り付けます。

gist.github.com

⑤作成したフォントアセットを保存しすでにあるテキストのFontAssetsへ入れ替えます。

f:id:Holomoto-Sumire:20220212115143p:plain

以上で日本語が表示できるようになりました。

f:id:Holomoto-Sumire:20220212115319p:plain