アプリ制作⑥ユーザーインターフェイス

このレッスンでは、ボタンやインプットフィールドなどのユーザーインターフェイス（UI）を構成する要素の取り扱いについて学んでいきます。

ボタンの作り方

ボタン（Button）は、アプリ内でクリックすることでなんらかのアクションを引き起こすようにするために使います。

UI Canvasの作成

まず最初にキャンバス（Canvas）を作ります。キャンバスはUI要素を配置するためのパネルのようなもので、ここにボタンを配置することになります。メニューバーから「ゲームオブジェクト（GameObject）」＞「UI」＞「キャンバス（Canvas）」を選択して、新しいキャンバスを作成します。

ボタンの追加

続いて、キャンバス内にボタンを追加します。メニューバーから「ゲームオブジェクト（GameObject）」＞「UI」＞「ボタン（Button）」を選択して、ボタンを追加します。

インプットフィールドの作り方

インプットフィールド（Input Field）は、フィールドに文字などを入力することで、アプリがユーザーとの対話を可能にするものです。

UI Canvasの作成

ボタンの時と同様に、キャンバス（Canvas）を作ります。メニューバーから「ゲームオブジェクト（GameObject）」＞「UI」＞「キャンバス（Canvas）」を選択して、新しいキャンバスを作成します。

インプットフィールドの追加

続いて、キャンバス内にボタンを追加します。メニューバーから「ゲームオブジェクト（GameObject）」＞「UI」＞「インプットフィールド（Input Field）」を選択して、ボタンを追加します。

UI要素の操作

UI要素の配置

ボタンやインプットフィールド、テキストのようなUI要素は、どれもキャンバス上に配置されていて、キャンバスがペアレントオブジェクトとなっているため、キャンバスの位置やスケールを変えると、それに伴ってUI要素の位置やサイズも変化します。

キャンバスに対しての位置を変える際には、階層ウィンドウで個別のオブジェクトを選択して位置やスケールを変えてください。

UIの表示と非表示

UI要素を表示したり、非表示にしたりするためのコードを知っておくと非常に便利です。オブジェクトの表示・非表示は、SetActive()メソッドを使用して簡単に行うことができます。括弧の中には「true（表示）」あるいは「false（非表示）」を入れます。

例えばアプリの最初にスタートボタンが表示されていて、キーが押されると消えるといったような場合に使うことができます。下の例では、エンターキーが押されるとボタンが非表示になるようになっています。

using UnityEngine;
using UnityEngine.UI;

public class ButtonController : MonoBehaviour
{
    // エディターでボタンのオブジェクトにアタッチする
    public Button myButton;

    void Start()
    {
        // 最初にボタンが表示されている状態
        myButton.gameObject.SetActive(true);
    }

    void Update()
    {
        // エンターキーが押されると、
        if (Input.GetKeyDown("return"))
        {
            　// ボタンが非表示になる
              myButton.gameObject.SetActive(false);
        } 
    }
}

UIイベント

UIイベントとは

UnityのUIイベントとは、ユーザーの対話やアプリ内のアクションに反応する仕組みのことを指します。例えば、ユーザーがボタンをクリックしたり、インプットフィールドにテキストを入力したりした際に、イベントが起こり、あらかじめ設定されたアクションが実行されるということです。

このアクションにはさまざまなものがあって、メニューを表示するのでもいいですし、オブジェクトを移動させるなどでも構いません。アプリ内のアクションの全てが該当します。

イベントリスナーの設定

ボタンやインプットフィールドのようなUI要素には通常、イベントリスナー（Event Listener）と呼ばれるものが付けられ、特定のイベント（クリック、入力、ドラッグなど）を検出します。AddListener(OnClick)のようなコードを使って、イベントが検出されたときに指定されたメソッドが実行されるようにします。

オンクリックイベント

ボタンなどのUI要素には、以下の方法でユーザーの操作に応じたアクションを実行できるようにします。

まず、コードを使わずエディター内でクリックされた際のアクションを指定する方法ですが、階層ウィンドウでボタンを選択し、インスペクターウィンドウのボタン（Button）コンポーネントの「OnClick()」フィールドに、アクションを表す関数を割り当てます。これでボタンがクリックされるとこのアクションが呼び出されるようになります。

コードを使ってオンクリックイベントを設定する方法は以下です。以下の例では、ボタンがクリックされるとボタンが非表示になるようになっています。

using UnityEngine;
using UnityEngine.UI;

public class ButtonClick : MonoBehaviour
{
    // エディターでボタンのオブジェクトにアタッチする
    public Button myButton;

    void Start()
    {
        // オンクリックイベントにリスナーをつける
        myButton.onClick.AddListener(OnClick);
    }

    private void OnClick()
    {
        // ボタンがクリックされるとここに書かれたアクションが起こる
        myButton.gameObject.SetActive(false);
    }
}

オンバリューチェンジドイベント

インプットフィールドなどのUI要素には、以下の方法でユーザーの操作に応じたアクションを実行できるようにします。例では、フィールドに新しいテキストが入力されると「入力値が変わりました：（入力されたテキスト）」がコンソールに表示されるようになっています。

using UnityEngine;
using UnityEngine.UI;

public class InputField : MonoBehaviour
{
    // エディターでインプットフィールドのオブジェクトにアタッチする
    public InputField myInputField;

    private void Start()
    {
        // 入力値リスナーをつける
        myInputField.onValueChanged.AddListener(OnInputValueChanged);
    }

    private void OnInputValueChanged(string newText)
    {
        // 異なる値がフィールドに入力されると以下のアクションが起こる
        Debug.Log("入力値が変わりました：" + newText);
    }
}

ゲームオブジェクトをクリックする場合

ちなみにUI要素ではなく、普通のゲームオブジェクトをクリックできるようにするには、OnMouseDown()メソッドを使います。例えばキューブに以下のスクリプトをアタッチすると、キューブをクリックすると消えるアクションを起こすことができます。

using UnityEngine;

public class box : MonoBehaviour
{
    void Start()
    {
        gameObject.SetActive(true);
    }

    private void OnMouseDown()
    {
        gameObject.SetActive(false);
    }
}

まとめ

ユーザーインターフェイスの扱いはちょっとややこしいですが、アプリでは不可欠な要素ですので、ボタンやインプットフィールドの使い方の基本を理解しておくと便利です。次回はアプリ内のオブジェクトの相互作用のコントロールについて見ていきます。