ネイティブアプリっぽいInput Fieldを作れる「Advanced Input Field」

UnityGUI

この記事はUnity アセット真夏のアドベントカレンダー 2019 Summer! 26日目の記事です。

はじめに

最近はUnity製の非ゲームが益々増えてきています。非ゲームなアプリではID、PASS入力に始まり様々な所でInput Fieldが必要になります。

しかし、Unity標準のInput Fieldは下記画像のようにScene上のInput Fieldと実際のInput Field2つが同時に表示されてしまいます。

機能的には問題ないのですが、一般的なネイティブアプリとは異なる挙動のため利用者には違和感が出てしまいます。今回はこのInput Fieldをネイティブアプリっぽくするアセットの紹介です。

PCで使う際は日本語入力ができないなどの注意点があるので留意してください。

Advanced Input Field

今回ご紹介するアセットはこれAdvanced Input Fieldです。

Advanced Input FieldはPC, Mac, Android, iOS & UWPと主要なプラットフォームで動作するネイティブで実装されたInput Fieldです。

ネイティブ実装なので非UnityアプリのInput Fieldと同じ様な挙動ができます。また、文字種制限やEditor画面用の仮想スクリーンキーボードなどもあり見た目以上に機能としても便利なアセットです。

本記事環境

本記事の環境は以下の通りです。また注記が無い場合はTarget PlatformはiOSに設定しています。

ソフトウェア バージョン
Unity 2018.4.4
Advanced Input Field 1.8.1
Text Mesh Pro 1.4.1

ここから先ではAdvanced Input FieldのInput Fieldを入力欄と呼称します。

入力欄の配置

入力欄を配置するにはメニューバーのAdvanced Input FieldからCreateで作成します。

TextMeshProに対応しているので特に制限が無ければTextMeshPro側を使います。

TextMeshPro版入力欄を使う場合は勿論TextMeshProのアセットが必要です。無い場合はPackageManagerよりインポートしてください。

また、Advanced Input FieldでTextMeshProを使う場合はScripting Define Symbolsに下記が必要なので追記します。

ADVANCEDINPUTFIELD_TEXTMESHPRO

設定を終わらせて再生すると入力欄として使えるようになっています。

Target Platformがモバイル系の場合はスクリーンキーボードが出現します。
このスクリーンキーボードがあると、入力中の入力欄位置に合わせてGUIを動かすといった挙動を作る時も実機にBuildする前に挙動チェックがしやすくなるので便利です。

もちろんキーボードから入力すればそのまま入力できます。

日本語は物理キーボードやスクリーンキーボードから入力できないのでコピペしてください。実機では問題無く入力できます。

また文字列を選択することでネイティブにある各種コピペ系のUIも出ます。

Target PlatformがPCの場合はスクリーンキーボードは出ずに一般的にPCの入力フォームになります。

注意点ですが、Macでは日本語が入力できませんでした。Winの検証はできていないのですが、PC用にこのアセットを買おうとしている方は留意してください。

デザイン

uGUI自体は下記の様な構成になっています、

uGUIでの構築になれていればいつもの感覚で設定できます。

パパッと構築した結果が下記状態です。

ぱっと見ネイティブアプリっぽくなったと思います。

この状態を作るに当たっての必要な設定などを解説していきます。

各種設定

設定はAdvance Input FieldのComponentにまとまっています。

Content Type

まず設定すべき項目はContent Typeです。

この設定で、一般的な文言、電話番号、メール、パスワードなどの設定を行います。

Content Typeを設定すると、使用するキーボード、入力出来る文字種などが自動的に制限されます。

ここをCustomにすることでキーボード、書式フォーマットなどを自由に設定することも可能です。

基本設定

上側の設定で初期状態の文字や文字数制限などを設定できます。

Modeは下記3種類があります。

Scroll Text → 入力欄のサイズを超えたら文字をスクロールさせて表示する。

Horizontal Resize → 入力文字数に合わせて入力欄の横幅を調整する。

Vertical Resize → 入力文字数に合わせて入力欄の縦幅を調整する。

基本的にはScroll Textで、複数行入力欄はVertical Resizeで良いかなという印象です。

InteractableはuGUIと同じく、Fieldの無効化が可能です。

Textは現在入力されているテキストです。ここに予めstringをセットすることで初期値的な動作が可能です。

Placeholder Text はuGUIの「Placeholder」と同じくここに入力する内容を促すテキストです。入力を始めると消えます。

Character Limitは文字数制限です。この文字数を超える文字を入力できなくなります。

Processing Filter

Live Processing FilterPost Processing Filterを使うと、入力中、入力後のテキストを調整することができます。

例として数字を入力したら、末尾に円が付くようにしてみます。


public class DollarAmountFilter : PostProcessingFilter { /// <summary> /// 入力されたテキストを数字のお金に変換 /// </summary> /// <param name="text"></param> /// <param name="filteredText"></param> /// <returns></returns> public override bool ProcessText(string text, out string filteredText) { int number = 0; if (int.TryParse(text, out number)) { filteredText = number.ToString("N0",CultureInfo.CurrentCulture) + "円"; return true; } else { Debug.LogError($"{text}は数字ではありません。"); filteredText = null; return false; } } }

入力後のテキストを変えるにはPost Processing Filterを使うのでPostProcessingFilterを継承したC#クラスを作ります。

Process Textで入力されたTextを受け取り、変換を掛けてfilteredTextに戻してやると画像のように数字入力後にカンマ付き、円付き表示ができるようになります。

CharacterValidators

文字種制限を任意に設定できる機能です。

メニューバーからCharacterValidatorのScriptableObjectを作成して設定します。

作成したCharacterValidatorのScriptableObjectをAdvance Input FieldのCharacter Validatorに追加します。

この設定はContent TypeCustomの時だけ出現します。

CharacterValidatorの設定方法

例として使える文字種を[a-z][A-Z]に制限した場合は下記の様なルールを設定します。

Condition OperatorをVALUE_BETWEEN_INCLUSIVEにすることで、指定した文字コード間に収まってる場合はTRUEを返すことができます。

下記画像の通り設定すると、文字コード65〜122の文字が入力された場合はTRUEで条件はALLOWの為、[a-z][A-Z]の文字が入力できるようになります。


別の例として、大文字のBは最大3文字までしか入力できないルールを設定する場合は下記の様になります。

Condition OperatorをVALUE_EQUALSにすると今入力してる文字コードが一致する場合にTRUEになります。

また、Condition OperatorをOCCURENCES_GREATER_THAN_OR_EQUALSにすると指定した文字コードが指定した回数以上使われているとTRUEになります。画像例だと3回以上Bの文字が使われているとTRUEになります。

Ruleの中に複数条件が書かれている場合はANDで評価されるので、例では今入力されている文字がBで、かつそのBが3個目以上の場合はTRUEとなります。

条件はBLOCKなので、上記条件を満たすと文字が入力できなくなります。


他に例として、一部記号は入力できないようにしたいという場合は下記の様になります。

これはシンプルに、[email protected]&%の文字が入力された場合TRUEになりBLOCKされます。

まとめ

以上のように、日本語入力には少し難がありますが全体的には必要な機能がほぼほぼ実装されており、ネイティブアプリのような入力欄が提供できる便利なアセットになっています。

モバイルアプリ作成の際には是非使ってみて下さい!


本記事で使ってるUIパーツは下記アセットを使用しています。

UnityでAnimation付きのシンプルなUIが簡単に実装できるので、こちらもとてもお勧めのアセットです。値段も安いのでとりあえず買っておくとモックアプリを作る際に強力な支援が得られますので是非。

UnityGUI

Posted by なまず