Unity UI入門⑫ | Input Fieldの使い方 入力した文字を取得する方法

今回は、UnityのUIパーツの1つである Input Field について解説します。

Input Fieldは、ユーザーがキーボードやスマートフォンから文字を入力するためのUIです。

例えば、次のような場面で使用します。

• プレイヤー名の入力

• 検索欄

• チャット入力

• パスワード入力

• 数値入力

今回は、Input Fieldへ名前を入力し、ボタンを押すと画面に名前が表示される仕組みを作ります。

1．Input Fieldを作成する

ヒエラルキー上で右クリックし、次の順に選択します。

UI → Legacy → Input Field

作成すると、次のような構成になります。

Canvas
└─ InputField
   ├─ Placeholder
   └─ Text

それぞれの役割は次のとおりです。

InputField

文字入力欄の本体です。

Placeholder

何も入力されていないときに表示する案内文です。
例えば、次のような文章を設定します。

• 名前を入力してください

入力前の案内として使用するため、Textよりも薄い色にすると見やすくなります。

Text

ユーザーが入力した文字を表示します。
入力文字の色や大きさを変更することができます。

2．Input Fieldコンポーネントの設定

InputFieldを選択し、Input Fieldコンポーネントを確認します。

Text Component

入力した文字を表示するTextを設定します。
通常は、子オブジェクトのTextが最初から登録されています。

Text

ゲーム開始時に表示する初期文字列を設定します。
最初は空欄で問題ありません。

Character Limit

入力できる最大文字数を設定します。
例えば「10」にすると、10文字まで入力できます。
「0」の場合は文字数制限がありません。

Content Type

入力できる文字の種類を設定します。
主な設定は次のとおりです。

• Standard：一般的な文字入力

• Integer Number：整数のみ

• Decimal Number：小数を含む数値

• Alphanumeric：英数字のみ

• Email Address：メールアドレス向け

• Password：入力文字を記号で隠す

• Pin：暗証番号向け

今回は名前を入力するため、Standardを使用します。

Line Type

入力できる行数を設定します。

• Single Line：1行だけ入力する

• Multi Line Submit：複数行入力し、Enterで確定する

• Multi Line Newline：Enterで改行する

今回はSingle Lineを使用します。

Read Only

オンにすると文字は表示されますが、ユーザーは編集できなくなります。

３．ボタンと表示用Textを追加する

次のような構成になるように、ButtonとTextを追加します。

Canvas
├─ NameInputField
│  ├─ Placeholder
│  └─ Text
├─ SubmitButton
│  └─ Text
└─ ResultText

分かりやすいように、それぞれ次の名前に変更しています。

• InputField → NameInputField

• Button → SubmitButton

• 結果表示用Text → ResultText

SubmitButtonの文字は「決定」などに変更しておきます。

4．入力した文字を取得する

4-1．スクリプトファイルの作成

新しいC#スクリプトを作成し、名前を InputFieldController にします。
InputFieldController を立ち上げて、以下のコードを追加します。

using UnityEngine;
using UnityEngine.UI;

public class InputFieldController : MonoBehaviour
{
    [SerializeField] InputField nameInputField; // InputFieldコンポーネント
    [SerializeField] Text resultText;   // 結果表示用のTextコンポーネント

    public void ShowName()
    {
        string playerName = nameInputField.text;    // 入力された名前を取得

        if (string.IsNullOrEmpty(playerName))   // 名前が入力されていない場合の処理
        {
            resultText.text = "名前を入力してください";
            return;
        }

        resultText.text = "こんにちは、" + playerName + "さん"; // 結果を表示
    }
}

このスクリプトを、Canvasや空のGameObjectへ追加します。

Inspectorから、次の項目を設定します。

• Name Input FieldにNameInputField

• Result TextにResultText

4-2．スクリプトの解説

次のコードで、Input Fieldに入力されている文字を取得しています。

string playerName = nameInputField.text;

Input Fieldの入力内容は、textプロパティから取得できます。

次の処理では、何も入力されていないか確認しています。

if (string.IsNullOrEmpty(playerName))

未入力の場合は、メッセージを表示して処理を終了します。
文字が入力されている場合は、ResultTextへ結果を表示します。

resultText.text = "こんにちは、" + playerName + "さん";

例えば「ファイブボックス」と入力した場合は、次のように表示されます。

4-3．ButtonのOn Clickを設定する

SubmitButtonを選択し、ButtonコンポーネントのOn Clickを確認します。

「＋」ボタンを押し、InputFieldControllerを追加したGameObjectを登録します。

関数には、次のメソッドを設定します。

InputFieldController → ShowName()

ゲームを実行し、Input Fieldへ名前を入力して決定ボタンを押します。

ResultTextに入力した名前が表示されれば成功です。

4-4．入力欄を空にする

入力後にInput Fieldを空にしたい場合は、次のように記述します。

nameInputField.text = string.Empty;

再びすぐに入力できる状態へ戻したい場合は、次の処理も追加します。

nameInputField.Select();
nameInputField.ActivateInputField();

例えば、名前を表示したあとに入力欄を空にする場合は、次のようにします。

public void ShowName()
{
    string playerName = nameInputField.text;

    if (string.IsNullOrEmpty(playerName))
    {
        resultText.text = "名前を入力してください";
        return;
    }

    resultText.text = "こんにちは、" + playerName + "さん";

    nameInputField.text = string.Empty;
    nameInputField.Select();
    nameInputField.ActivateInputField();
}

5．InputField のイベント

5-1．イベントの種類

Input Fieldには、入力を検出するためのイベントも用意されています。

On Value Changed

入力内容が変わるたびに実行されます。
文字を入力したときだけでなく、削除したときにも呼び出されます。

例えば、次のような処理に使用できます。

• 入力文字数の表示

• 入力内容のリアルタイム確認

• 使用できない文字のチェック

On End Edit

入力が終了したときに実行されます。
Enterキーを押したときや、別のUIを選択したときなどに呼び出されます。
入力完了後に内容を保存したい場合などに使用します。

5-2．入力文字数を表示する

On Value Changedを使うと、入力中の文字数をリアルタイムで表示できます。

まず、文字数表示用のTextを追加します。

次に、スクリプトへ次の内容を追加します。

[SerializeField] Text countText;  // 文字数表示用のTextコンポーネント

public void UpdateCharacterCount(string inputText)
{
    countText.text = inputText.Length + "文字";
}

InspectorからCharacter Count Textへ、追加したTextを設定します。

NameInputFieldのOn Value ChangedにGameObjectを登録し、次のメソッドを選択します。

InputFieldController → UpdateCharacterCount

このとき、Dynamic string側のメソッドを選択します。

入力中の文字列がinputTextへ渡され、Lengthで文字数を取得できます。

6．スマートフォンで使用する場合

スマートフォンでは、Input Fieldをタップするとソフトウェアキーボードが表示されます。

Content Typeを変更すると、入力内容に合わせたキーボードが表示される場合があります。
例えば、Integer Numberでは数字入力向け、Email Addressではメールアドレス入力向けのキーボードになります。

ただし、表示されるキーボードの種類や動作は、端末やOSによって異なります。

実際の端末でも動作を確認しておきましょう。

7．文字を入力できない場合

Input Fieldへ文字を入力できない場合は、次の点を確認します。

• EventSystem がヒエラルキーに存在しているか

• InputField の Interactableがオンになっているか

• Canvas の Graphic Raycasterが有効か

• 別のUIが Input Field の上に重なっていないか

• Text Component に正しいTextが設定されているか

入力した文字が見えない場合は、Textの文字色、文字サイズ、Rect Transformも確認してください。

今回のまとめ

今回は、Input Fieldを使って文字を入力する方法を確認しました。

Input Fieldを使うと、プレイヤー名の登録や検索欄、チャットなど、ユーザーから文字を受け取る仕組みを作れます。

▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。