2024.10.11

【Unity】TextMeshProを使用して、テキスト内のリンクをクリックすると、そのテキストの詳細情報を表示するプログラム

きたたく

TextMeshProを使用して、テキスト内のリンクをクリックすると、そのテキストの詳細情報を表示するプログラムを作成します。以下に、ステップ・バイ・ステップで実装方法を説明します。

ステップ1：環境の準備

ステップ1：環境の準備

プロジェクトのセットアップ
- Unityエディターでプロジェクトを開きます。
- TextMeshProがインポートされていない場合は、Window > Package ManagerからTextMeshProをインポートします。
シーンの作成
- 新しいシーンを作成するか、既存のシーンを使用します。

ステップ2：ボタンとTextMeshProの配置

ボタンの作成
- Hierarchyウィンドウで右クリックし、UI > Button – TextMeshProを選択します。
- ボタンがシーンに追加されます。
複数のボタンを作成
- 必要な数のボタンを作成します（例：3つのボタン）。
ボタン内のテキストを設定
- 各ボタンの子オブジェクトであるText (TMP)を選択します。
- Inspectorウィンドウで、テキストを設定します（例：「詳細を見る」）。

ステップ3：リンクを含むテキストの設定

リンクテキストの作成
- Text (TMP)オブジェクトのテキストを以下のように変更します
- この文章には<a href=”link1″>リンク1</a>と<a href=”link2″>リンク2</a>があります。
- <a href="link1">リンク1</a> の部分がリンクになります。
リッチテキストの有効化
- InspectorでRich Textがチェックされていることを確認します。
リンクのスタイル設定
- リンクの色や下線を設定するために、リッチテキストタグを使用します。
- この文章には<color=blue><a href="link1">リンク1</a></color>と<color=blue><a href="link2">リンク2</a></color>があります。

ステップ4：リンクのクリックイベントを処理するスクリプトの作成

スクリプトの作成
- Scriptsフォルダを作成し、「TextLinkHandler.cs」という新しいC#スクリプトを作成します。
TextLinkHandler.csの実装
スクリプトのアタッチ
- 各Text (TMP)オブジェクトに「TextLinkHandler.cs」スクリプトをアタッチします。

TextLinkHandler.cs

using UnityEngine;
using TMPro;
using UnityEngine.EventSystems;

public class TextLinkHandler : MonoBehaviour, IPointerClickHandler
{
    private TMP_Text textMeshPro;

    void Awake()
    {
        textMeshPro = GetComponent<TMP_Text>();
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        // リンクの検出
        int linkIndex = TMP_TextUtilities.FindIntersectingLink(textMeshPro, Input.mousePosition, null);
        if (linkIndex != -1)
        {
            // リンクがクリックされた
            TMP_LinkInfo linkInfo = textMeshPro.textInfo.linkInfo[linkIndex];
            string linkID = linkInfo.GetLinkID();

            // リンクIDに基づいて処理を行う
            Debug.Log("リンクがクリックされました。ID: " + linkID);
            ShowDetailInfo(linkID);
        }
    }

    void ShowDetailInfo(string linkID)
    {
        // リンクIDに対応する詳細情報を表示
        switch (linkID)
        {
            case "link1":
                // 詳細情報を表示する処理
                Debug.Log("リンク1の詳細情報を表示します。");
                DetailPopupManager.Instance.ShowPopup("リンク1の詳細情報です。");
                break;
            case "link2":
                Debug.Log("リンク2の詳細情報を表示します。");
                DetailPopupManager.Instance.ShowPopup("リンク2の詳細情報です。");
                break;
            default:
                Debug.Log("未知のリンクIDです。");
                break;
        }
    }
}

ステップ5：詳細情報の表示方法を実装

ポップアップウィンドウの作成
- Hierarchyで右クリックし、UI > Panelを選択します。
- パネルの名前を「DetailPopup」とします。
- パネルのRectTransformを調整して画面中央に配置し、適切なサイズに設定します。
- パネルの背景色を半透明に設定します。
詳細テキストの追加
- 「DetailPopup」の子オブジェクトとして、Text (TMP)を追加します。
- テキストの名前を「DetailText」とし、詳細情報を表示するために使用します。
閉じるボタンの追加
- 「DetailPopup」の子オブジェクトとして、UI > Button – TextMeshProを追加します。
- ボタンのテキストを「閉じる」に設定します。
ポップアップを非表示に設定
- Inspectorで「DetailPopup」のActiveを外し、最初は非表示にします。
DetailPopupManager.csの作成
- Scriptsフォルダに「DetailPopupManager.cs」を作成します。
DetailPopupManagerの設定
- DetailPopupManagerスクリプトを適当なGameObject（例えば、Canvas）にアタッチします。
- Inspectorで、popupPanelに「DetailPopup」パネルを、detailTextに「DetailText」テキストをアサインします。
閉じるボタンの設定
- 閉じるボタンのOn Click ()イベントに「DetailPopupManager」のHidePopup()メソッドを設定します。
  - 閉じるボタンを選択し、InspectorのButton (Script)コンポーネントでOn Click ()イベントを追加します。
  - DetailPopupManagerオブジェクトをドラッグし、関数としてDetailPopupManager > HidePopup()を選択します。

DetailPopupManager

using UnityEngine;
using TMPro;

public class DetailPopupManager : MonoBehaviour
{
    public static DetailPopupManager Instance;

    public GameObject popupPanel;
    public TMP_Text detailText;

    void Awake()
    {
        if (Instance == null)
        {
            Instance = this;
        }
        else
        {
            Destroy(gameObject);
        }
    }

    public void ShowPopup(string message)
    {
        detailText.text = message;
        popupPanel.SetActive(true);
    }

    public void HidePopup()
    {
        popupPanel.SetActive(false);
    }
}

ステップ6：複数のボタンに対応

各ボタンのText (TMP)で、リンクIDや表示する詳細情報を変更します。
TextLinkHandler.csは共通のスクリプトとして使用できるため、複数のボタンにアタッチできます。

ステップ7：動作確認

シーンを再生
- Unityエディターで再生ボタンをクリックします。
リンクのクリック
- ボタン内のテキストで、リンクになっている部分をクリックします。
詳細情報の表示
- クリックしたリンクに対応する詳細情報がポップアップウィンドウに表示されることを確認します。
ポップアップの閉じる
- 「閉じる」ボタンをクリックし、ポップアップが非表示になることを確認します。

補足情報

リンクの追加
- テキスト内で複数のリンクを追加できます。リンクIDをユニークにすることで、クリックされたリンクに応じた処理が可能です。
リンクのスタイル
- リンクの色、フォントスタイル、下線などはリッチテキストタグを使用してカスタマイズできます。
この文章には<color=blue><a href=”link1″>リンク1</a></color>と<color=blue><a href=”link2″>リンク2</a></color>があります。
リンクの検出
- TMP_TextUtilities.FindIntersectingLink()は、クリック位置に存在するリンクを検出します。
カメラの設定
- 使用している Canvas の Render Mode が Screen Space – Overlay の場合、カメラは不要なので null で問題ありません。しかし、Screen Space – Camera または World Space の場合は、正しいカメラを指定する必要があります。Camera.main を使用してカメラを取得します。