Unity)HTMLタグをテキストに反映させたい

Question

CSVデータを参照してprefabのテキストに入れて表示したいのですが
データの一部がHTMLです。

質問はHTMLタグで囲まれている箇所の色を赤にしたいのですが
HTMLをラップするような良い方法分かる方教えて下さい。

環境）
PC: mac
Unity2018.2
言語：C#

CSVデータ：ReadCsv.catecsvDatas

こんにちわ！私は<font color="red">太郎</font>です。
こんにちわ！私は<font color="red">花子</font>です。
さようなら<font color="red">太郎</font>さん。
さようなら。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ScrollController : MonoBehaviour
{
    [SerializeField] GameObject prefab; // ButtonのPrefab
    [SerializeField] GameObject panel; // オブジェクト紐づけ先のPanel

    // Start is called before the first frame update
    void Start()
    {
        for (int i=0; i < 3; i++) {

            var item = GameObject.Instantiate(prefab) as GameObject;
            item.transform.SetParent(panel.transform, false);
            item.GetComponent<Text>().text = ReadCsv.catecsvDatas[i][0]):

    }

}

Answer 1

UnityにはリッチテキストというHtmlタグに似たものがあるので該当タグをリッチテキストに置換するのがシンプルかと思います。

簡単な実装サンプル

リッチテキストを有効にするにはTextコンポーネントのRich Textを有効にする必要があります。

HtmlタグをRich Textタグに変換するスクリプト
変換文字列に正規表現を使えばもっとシンプルになると思いますが、すみませんがあまり詳しくありません。

using System.Text;

public static class HtmlTagToRichTextCombater
{
    /// <summary>
    /// 削除する文字
    /// </summary>
    static readonly string[] DeleteWords =
    {
        "\"", "'"
    };

    /// <summary>
    /// 変換する文字
    /// </summary>
    static readonly string[][] ReplaceWords =
    {
        new string[]{"<font ", "<"},
        new string[]{"< font ", "<"},
        new string[]{"</font", "</color"},
        new string[]{"</ font", "</color"}
    };

    /// <summary>
    /// HTMLタグをリッチテキストに変更する
    /// </summary>
    /// <returns>The tag to rich text.</returns>
    /// <param name="stg">Stg.</param>
    public static string HtmlTagToRichText(this string stg)
    {
        StringBuilder sb = new StringBuilder(stg);

        foreach (var word in DeleteWords)
        {
            sb.Replace(word, string.Empty);
        }

        foreach (var words in ReplaceWords)
        {
            sb.Replace(words[0], words[1]);
        }

        return sb.ToString();
    }
}

利用側

using UnityEngine;
using UnityEngine.UI;

public class HtmlTagToRichTextTest : MonoBehaviour
{
    [SerializeField] Text TextRender;

    const string Txt = "こんにちわ！私は<font color=\"red\">太郎</font>です。\nこんにちわ！私は<font color=\"red\"> 花子</font>です。\nさようなら<font color=\"red\"> 太郎</font>さん。\nさようなら。";

    void Start ()
    {
        //HTMLタグをリッチテキストに変換してTextに表示
        TextRender.text = Txt.HtmlTagToRichText();
    }
}

最後に

CSVデータはUnityで扱えないので

[追記]
CsVはUnity上で扱えます。エクセル形式(xml)と勘違いしておりました。
xmlはビルドしてもビルド内に含まれませんがCSVは含まれて割と簡単に中身を取り出せますが、ScriptableObjectの方が負荷も少なく軽いのでオススメです。下記はエクセル形式(xml)からScriptableObjectへの変換方法です。エクセルをお持ちであれば簡単にCsVをエクセル形式(xml)に変換できます。
[追記終了]

ScriptableObjectに変換すると良いと思います。
変換のタイミングでHTMLタグも合わせて変換すればパフォーマンスも良くなると思います。

もしUnity-Excel-Importer-Makerを使うとすればEditorフォルダ内に変換用スクリプトが出力されるので、簡単に好きな処理を挟むことができオススメです。

Comments

[navesanta]

HTMLを変換する方法理解しました。
ScriptableObjectとUnity-Excel-Importer-Makerも今まで知らなかった知識なので
大変参考になります。今までUnityの参考書は10冊ほど読みましたがどこにも
書いてなかった情報です。ありがとうございました。これからもよろしくお願いします。

[IShix]

本10冊はすごいですね！僕なら心が折れそうですｗ
すみません、1点間違ってました。Unity-Excel-Importer-MakerはCSVではなくエクセル形式(xls)を変換するプラグインです。エクセルお持ちでしたらCSVからエクセル形式へ変換可能です。

いつもマスターデータ(レベルバランス、アイテムの詳細、キャラの詳細)はすべてGoogleスプレッドシートで制作して、Excelデータとして出力しUnity上でScriptableObjectに変換して利用しています。

そうするとGoogleスプレッドシート上でソートや動的に計算したものを共有したり、アイテムやキャラの翻訳を依頼したりなど楽なのでおすすめです。

[navesanta]

>CsVはUnity上で扱えます。
そうですよね。実際に扱っています。

>エクセルお持ちでしたらCSVからエクセル形式へ変換可能
実はエクセルデータをあえてCSVに変換して使っていたので
仰る方法は大変有用です。ありがとうございました。