🔒

Unityでパスワードのマスキングのオン・オフを切り替える

2022/12/01に公開

記事の目的

アカウント登録画面において、パスワード入力フォームに加えてパスワード再入力フォームを設けるアプリは多いですが、これはユーザーの離脱率を上げやすい仕様です。一方で、パスワード再入力フォームをなくすだけでは、ユーザーがパスワードをミスタイプしたままアカウント登録してしまう可能性があります。パスワード入力フォームの中でミスタイプがないか、ユーザー自身が確認できる必要があります。
　そこでパスワード入力フォームの中で、パスワードのマスキングのオン・オフを切り替えられる、すなわちパスワードを「***」等の文字で隠すか中身を表示するかを切り替えられる機能を実装します。

要約

Unityのプロジェクトで、以下のオブジェクトを用意する
- パスワードのInputField
- パスワードのマスキングをオフにするButton
- オンにするButton
Buttonを押すと実行される関数の中で、
- Buttonの表示・非表示を切り替える
- InputFieldのcontentTypeを切り替える
- 3で作るコルーチンを開始する
コルーチンの中で、
- InputFieldをアクティブにする
- InputField内のカーソルを最後尾に移動する

コード全体

PasswordController.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class PasswordController : MonoBehaviour
{
    public InputField passField;            // パスワードのInputField
    public GameObject maskingOffButton;     // マスキングをオフにするButton
    public GameObject maskingOnButton;      // マスキングをオンにするButton

    public void OnClickMaskingOffButton()   // maskingOffButtonを押すと実行される関数
    {
        maskingOffButton.SetActive(false);
        maskingOnButton.SetActive(true);        
        passField.contentType = InputField.ContentType.Standard;
        StartCoroutine(ReloadInputField());
    }

    public void OnClickMaskingOnButton()    // maskingOnButtonを押すと実行される関数
    {
        maskingOffButton.SetActive(true);
        maskingOnButton.SetActive(false);        
        passField.contentType = InputField.ContentType.Password;
        StartCoroutine(ReloadInputField());
    }

    private IEnumerator ReloadInputField()
    {
        passField.ActivateInputField();
        yield return null;
        passField.MoveTextEnd(true);
    }
}

1. Unityのプロジェクトでオブジェクトを用意する

Canvas上で、パスワード入力用のInput Fieldの右横に、マスキングをオフにするButton（目のマーク）を配置します。また、Input Fieldのインスペクターで、Content TypeをPasswordに設定しておきます。

　さらに、オフにするButtonと同じ場所に、オンにするButton（目のマークに斜線が重なっている）を配置しますがこちらは最初非表示にしておきます。

2. Buttonを押すと実行される関数を作る

オフにするButtonとオンにするButtonでやることはほぼ同じなので、まずオフにするButtonを押すと実行される関数について説明します。

    public void OnClickMaskingOffButton()
    {
        maskingOffButton.SetActive(false);
        maskingOnButton.SetActive(true);        
        passField.contentType = InputField.ContentType.Standard;
        StartCoroutine(ReloadInputField());
    }

最初に、オフにするButtonを非表示にして、オンにするButtonを表示させます。

        maskingOffButton.SetActive(false);
        maskingOnButton.SetActive(true);

次に、Input FieldのContent TypeをStandardに設定します。

        passField.contentType = InputField.ContentType.Standard;

この段階でパスワードを入力してみます。

Buttonを押すと...

...Buttonは入れ替わりましたが、パスワードの表示に変化がありません。Content Typeの設定は変更されていますが、その変更を表示に反映させるにはInput Fieldに再度フォーカスする必要があります。そのために、次の3章で作るコルーチンを開始させます。

        StartCoroutine(ReloadInputField());

3. Input Fieldにフォーカスするコルーチンを作る

    private IEnumerator ReloadInputField()
    {
        passField.ActivateInputField();
        yield return null;
        passField.MoveTextEnd(true);
    }

コルーチンの中で、まずInput Filedにフォーカスします。

        passField.ActivateInputField();

ただ、フォーカスするだけだと既に入力した文字が全選択された状態になるので、そのまま新しい文字を入力しようとすると既に入力した文字が消えてしまいます。

　そこで、次のフレームでInput Field内のカーソルを最後尾に移動する処理をします。こうすると全選択が解除され、既に入力した文字の続きから新しい文字を入力することができます。

        yield return null;
        passField.MoveTextEnd(true);

次のフレームで処理する訳は、ActivateInputField()とMoveTextEnd(true)を同一フレームで実行しようとすると、後者が実行されないためです（その理由はこちらの記事で触れられています）。そのため、ActivateInputField()を実行した後yield return nullで1フレーム分処理を中断してからMoveTextEnd(true)を実行します。これらの処理をコルーチンの中で行っているのも、処理を途中で1フレーム分中断させたいためです。

これで、パスワードのマスキングをオフにする機能が実装できました！

マスキングをオンにする関数の中身もほぼ同じです。

    public void OnClickMaskingOnButton()
    {
        maskingOffButton.SetActive(true);
        maskingOnButton.SetActive(false);        
        passField.contentType = InputField.ContentType.Password;
        StartCoroutine(ReloadInputField());
    }

オンにするボタンを非表示にし、オフにするボタンを表示させます。そして、Input FieldのContent TypeをPasswordに設定します。