Unityで配置するUI⑭

こんにちは、サメ太郎です。
今回は「入力フィールド」についてご紹介していきます。
入力フィールドを使用するとユーザーが自由に入力できるようになります。
バーチャルCOMCOMやスターターパック版のユーザー名登録でも使用されています。

実際の使用例はこちらからご確認ください！
↓メタバース「バーチャルCOMCOM」リンク↓
https://comfort-inc.co.jp/metaverse/
↓メタバース×HPスターターパック版　リンク↓
https://comfort-inc.co.jp/lp_meta/lp_metaverse_starter-pack.html

入力フィールドを作成しよう！

では早速入力フィールドを作成してみましょう。
「UI →入力フィールド」を追加すると、以下のようなオブジェクト構造が自動的に生成されます。

基本的な設定はInputField（TMP）を選択した状態のインスペクターから行います。

入力フィールドならではの設定は、Input Field Settingsの部分にあります。

文字数制限では、入力できる文字数を設定できます。
例えば10文字以内で入力してほしい場合（ユーザー名など）、この数値を「10」に設定すると、ユーザーは11文字以上入力できなくなります。
制限をかけたくない、という場合はデフォルトの「0」のままにしておきましょう。

コンテンツタイプでは入力形式の制限ができます。
右側の▼を押して中を確認してみましょう。

今回は特に使用する頻度の高いものを紹介します。

・標準
最も汎用的で制限なし。日本語入力や自由入力が必要な箇所で頻繁に使用。

・整数
数値入力が必要な場面でよく使われる。ID番号や数量入力など。

・10進数
金額や小数値を扱う場合に便利。特に商品価格や測定値入力で頻度が高い。

・ Eメールアドレス
ユーザー登録フォームや問い合わせフォームで必須の入力形式。

・パスワード
ログインやアカウント作成時に必須。セキュリティ上の理由で重要。
入力文字は「＊」などの非表示文字で表示される。
それぞれ用途に応じて適切なものを選ぶことで、入力ミスの防止やUX向上につながります。

ラインタイプでは、改行の方法を設定できます。
3つの種類があるので、こちらも用途に合わせて使い分けましょう。

・単一ライン
　入力できる行は一行のみで、Enterを押すと改行ではなく入力完了になる。
　名前や検索ワードなど、短いテキスト入力に最適。

・状況による複数行
　入力内容はオブジェクトサイズに合わせて自動改行されるが、Enterを押すと入力完了として扱われる。
　チャットやメッセージ送信欄に適しているが、Enterでの誤送信などに注意が必要。

・改行による複数行
　複数行での入力が可能で、Enterを押すと改行できる。
　長文コメントや説明文入力欄などに最適。自由に改行ができるので、自由度が高い。

仮のもの(Placeholder)では、入力欄に初期表示される文字を設定できます。
InputField（TMP）のインスペクター上ではTMPテキストオブジェクトのアタッチしかできないので、ヒエラルキーからPlaceholderというオブジェクトを選択して内容を編集してくださいね。

実際にPlaceholderを変更してみました。
初期表示だと薄い字で「Enter text…」とだけ記載されていて何を入力していいか分かりにくいところを、濃い目の文字で「名前を入力してください」としたことで一目見て何を入力すればいいのか分かるようになりました。
入力フィールドの周りに案内ができる場合は、こだわらなくてもユーザーに伝わりますが入力の制限(○○文字以内、半角数字のみなど)がある場合はPlaceholderに表示しておくとより伝わりやすくなると思います。

今回は入力フィールドについてご紹介しました。
ユーザーに入力してもらう要素だからこそ、分かりやすさや使いやすさが重視されるものなので使用される場合は今回の内容に気を付けてみてくださいね。
また、今回ご紹介していない部分でもUX向上につながる要素がありますので、色々な設定を試してみてもらえればと思います。

今回で「Unityで配置するUI」シリーズは一旦終了となります。
これまでの内容が皆さまの開発やUI制作に少しでも役立てば幸いです。
今後もまた、新しい技術や実務で活用できるテクニックをご紹介する機会があるかもしれません。
引き続きお楽しみにお待ちください。