Input Mask: その概要、入力マスクとフォーマット

入力マスクとは？

Input Mask（入力マスク）は、入力データのテンプレートを定義し、入力に応じてテキストを自動的にフォーマットする仕組みです。ユーザーは重要な文字（数字、文字）のみを入力し、システムが自動的に区切り文字（スペース、ハイフン、括弧、スラッシュ）を追加します。これが、入力完了後にデータをフォーマットする後処理との最大の違いです。

入力マスクはユーザーエクスペリエンスの3つの問題を解決します。1つ目は認知的負荷です。ユーザーはデータ形式を覚えて手動で区切り文字を入れる必要がありません。2つ目は入力速度です。区切り文字の自動挿入と次の文字グループへの移行が入力を高速化します。3つ目はデータ品質です。マスクにより、データがバリエーションなく統一された形式で収集されることが保証されます。

すでに入力されたデータの表示レベルで動作するNSFormatterフォーマッタとは異なり、入力マスクは入力レベルで動作します。入力される各文字を制御し、その文字がマスクの現在位置で許可されているかどうかを判断します。文字がマスクと一致しない場合は、拒否されるか無視されます。

AppleのUX調査（2024）によると、入力マスクはユーザーが馴染みのない形式でデータを入力するフィールドに最も効果的です。たとえば、SNILS（000-000-000 00）やINN（000000000000）など、ユーザーは正確な桁数や区切り文字の位置を知らない可能性がありますが、マスクが視覚的に正しい形式を示します。

入力マスクの構文

マスク構文はInputMaskライブラリで、プレースホルダ文字と定数文字の組み合わせを使用します。プレースホルダは各位置で許可される文字の種類を定義します。数字の場合は0または9、文字の場合はA、任意の文字の場合は_です。定数文字は自動的に挿入される区切り文字です。スペース、ハイフン、括弧、ドット、スラッシュなどです。

必須ブロックとオプションブロック

角括弧[0]は必須文字を示します。ユーザーはこの位置に数字を入力する必要があります。中括弧{0}はオプション文字を示します。ユーザーがブロックをスキップすると、マスクは対応する区切り文字を挿入しません。たとえば、日付のマスク[00]{.}[00]{.}[0000]の場合、ユーザーが月を入力しないと、日の後の区切り文字も表示されません。

マスク接辞

角括弧と中括弧の外側の定数文字は接辞であり、フィールドが空の場合でも常に表示されます。たとえば、マスク+7 ([000]) [000]-[00]-[00]では、+7、(、)、スペース、ハイフンが接辞であり、ユーザーは削除できません。接辞は、入力開始前からユーザーが期待される形式を理解するのに役立ちます。

目的別マスクの種類

入力マスクは、対象とするデータの種類によって分類されます。各タイプには独自の構造、グループ数、区切り文字の配置があります。マスクの適切な選択はユーザーエクスペリエンスにとって重要です。マスクがユーザーの期待と一致しない場合、ユーザーは自動挿入された文字を削除してしまいます。

電話番号のマスク

電話マスクは最も一般的なタイプです。ロシアの番号は+7 ([000]) [000]-[00]-[00]、アメリカの番号は+1 ([000]) [000]-[0000]としてフォーマットされます。マスクは国コードと市外局番の異なる桁数をサポートする必要があります。InputMaskライブラリは優先マスクをサポートしており、最初のマスクが適合しない場合（ユーザーが別の国コードを入力した場合）、2番目のマスクが適用されます。

銀行カードのマスク

カード番号には、4桁のグループ間にスペースを入れたマスク[0000] [0000] [0000] [0000]が使用されます。さらに、有効期限[00]/[00]とCVVコード[000]のマスクも適用できます。カード番号マスクは、決済システムに応じて16〜19桁をサポートします。VisaとMastercardは16桁、American Expressは15桁、Maestroは12〜19桁です。

日付とコードのマスク

日付マスクは、区切り文字としてドットまたはスラッシュを使用した形式[00]{.}[00]{.}[0000]を使用します。INN、SNILS、その他の識別子には専門のマスクが使用されます。INNは[000000000000]（12桁）、SNILSは[000]-[000]-[000] [00]（ハイフン付き11桁）です。確認コードの場合は、長さに応じて[0000]または[000000]です。

Swiftでのマスク実装

Swiftでのマスク実装は、InputMaskライブラリを使用してUITextFieldDelegateを設定することで行います。このライブラリはMaskedTextFieldDelegateクラスを提供し、テキストフィールドに接続して指定されたマスクに従って入力を自動的にフォーマットします。

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

自動国コード検出付きの電話番号には、優先マスクを使用します。MaskedTextFieldDelegateはマスクの配列をサポートしており、最初に一致したマスクが適用されます。ユーザーが+1を入力するとアメリカ形式が、+7を入力するとロシア形式が適用されます。

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

オプションブロック付きの日付には、中括弧を使用します。ユーザーが日のみを入力すると、マスクは“21”と表示します。日と月を入力すると“21.07”と表示します。3つの要素すべてを入力すると“21.07.2026”と表示します。オプションブロックによりマスクが適応的になり、ユーザーが提供したくないデータの入力を強制しません。

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

ペーストと削除の処理

適切なペースト処理は、入力マスク実装の最も難しい側面の1つです。テキストをペーストする場合（クリップボードからのカード番号など）、ライブラリはペーストされたテキストからすべての区切り文字を削除し、重要な文字のみを抽出して、クリーンなデータにマスクを適用する必要があります。RedMadRobotのInputMaskは、shouldChangeCharactersInメソッドを通じてこれを自動的に行います。

フォーマットされたテキスト（スペースやハイフンを含む）をペーストする場合、ライブラリはまずデータを正規化します。マスクパターンに一致しないすべての文字を削除し、正規化された文字列にマスクを適用します。ペーストされたテキストに無効な文字（数字マスク内の文字）が含まれている場合、それらは無視されます。

マスク内の削除（バックスペース）の処理には特別な注意が必要です。バックスペースが押されると、マスクは定数の区切り文字ではなく、最後の重要な文字を削除する必要があります。カーソルが定数文字の後にある場合、バックスペースはそれをスキップして前の重要な文字を削除します。InputMaskは、入力された文字のスタックを通じてこの動作を実装します。

テキストの選択と置換の場合、マスクはユーザーがテキストの一部を選択して新しいコンテンツに置き換える状況を正しく処理する必要があります。InputMaskライブラリは、MaskedTextFieldDelegateのmodifyStringメソッドを通じてこれをサポートし、置換範囲と新しい文字列を受け入れます。

マスク設計のベストプラクティス

マスク設計は、ユーザーがどのようにデータを入力するかを分析することから始まります。ほとんどのユーザーが形式を暗記している場合（電話番号）、マスクは最小限にし、グループ間の区切り文字のみにします。形式が馴染みのない場合（SNILS、INN）、マスクは接辞とラベルを備えた、より情報量の多いものにする必要があります。

多数の定数文字を持つ過剰なマスクは避けてください。マスク+7 ([000]) [000]-[00]-[00]は、10個の重要な文字に対して7個の定数文字を含みますが、これは許容範囲です。しかし、ユーザーが常に回避する過剰な区切り文字を持つマスクは、利益よりも害が大きくなります。形式が確信できない場合は、自由入力を使用してください。

国際アプリケーションの場合、データ形式は国によって異なる場合があることに注意してください。米国の電話番号は+1 (XXX) XXX-XXXXの形式ですが、イタリアでは+39 XXX XXX XXXXです。コードによる自動国検出付きの優先マスクを使用するか、ユーザーが番号を入力する前に国を選択できるようにします。

InputMaskのUXテストによると、ユーザーは入力開始前に形式を表示し（プレースホルダーまたは接辞を介して）、文字入力をブロックしないマスクを好みます。マスクはヒントであり、制限ではありません。ユーザーがマスクに一致しない文字を入力した場合、説明なしに入力をブロックするよりも、許可する方が適切です。