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

この記事は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 Filter、Post 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に戻してやると画像のように数字入力後にカンマ付き、円付き表示ができるようになります。