はじめに
プロトタイプの中で、ユーザーが入力した内容が正しいかをチェックできるテキストフィールドを作る方法が気になっていませんか？ そのための、とてもシンプルなチュートリアルをご用意しました。
始める前に、入力検証とは何か、そしてそれがどのように動作するのかを知っておく必要があります。では、入力検証とは具体的に何でしょうか？
入力検証は、現代のアプリやWebアプリケーションで一般的な機能です。この機能は、ユーザーを誘導するだけでなく、フォームフィールドにユーザーが入力した内容が正しいかを確認するのにも役立ちます。たとえば、多くのWebサイトのメール欄で誤ったメール形式を入力すると、入力したメール形式が正しくないことを知らせるメッセージが表示されます。つまり、フォームが入力内容をチェックし、正しくないことを検出したということです。
ProtoPie では、こうした種類のフォームを簡単に作成できます。というのも、主なトリガーが 2 つあるからです。Input と Detect は、検証付きのフォームフィールドの動作を完璧に再現できます。Input 機能ではテキストフィールドに入力でき、Detect 機能では入力フィールドに入力された内容をチェックできます。
ProtoPie でこの 2 つのトリガーを効果的に組み合わせれば、検証付きのフォームフィールド作成をすぐに始められます。このレッスンでは、両方のトリガーを使います。
学習内容
入力検証付きテキストフィールドを作るための基本構成
必須入力フィールドの作り方
入力値が正しいか間違っているかを確認する方法
入力されたテキストまたは数値文字の長さを確認する方法
入力フィールド内の文字を指定する方法
まずは、入力フィールドのテキスト検証の基本構成から始めましょう
一般的に、ProtoPie でテキストフィールドに入力されたテキストを検証する方法は、Focus と Detect という 2 つの主なトリガーを使う、次のような構成になります。
Focus（Focus out） は、テキストが条件を満たさないときにエラーメッセージを表示するために使います。
Detect は、テキストが条件を満たしたときにチェック／検証を行い、エラーメッセージを消すために使います。
各トリガーでは、Condition を使ってテキストが条件を満たすかどうかを確認します。
さまざまな種類の検証を行うには、各トリガー下の条件を変更するだけで構いません。以下のユースケースで、この構成を別の検証ケースに再利用する方法を見ていきましょう。
必須 Input フィールドの作成方法
input の required 属性は、フォームを送信する前にそのフォームフィールドへの入力が必要かどうかを指定します。
1. 入力レイヤー Input - First Name. に Focus トリガーを追加します。プロパティパネルで **Focus Out **を選択します。
Focus トリガーは、入力レイヤーにフォーカスが入る、または外れるときにレスポンスを発動します。ここでは、ユーザーが入力を終えたときに検証を発動する必要があるため、Focus Out を使用します。
2. Focus トリガーの下に、入力レイヤー Input - First Name. 用の Condition を追加します。通常はデフォルトで X と表示されている 2 つ目のドロップダウン だけを Text に変更します。
これで条件は Text of Input - First Name = "NONE" と表示されるはずです。この条件は、入力されているかどうかを指定するために使います。入力が空の場合、この条件の下にあるレスポンスが実行されます。
💡 なぜ値を空のままにしたのですか？
値を空のまま、または none に設定する理由は、このトリガーで作成したいレスポンスが、入力欄が空でユーザーがまだ何も入力していないときに表示されるものだからです。したがって、式は Text of Input - First Name = "NONE" になります。
3. 先ほど作成した条件の下に、入力に対する Border レスポンスを追加します。次に、下の図のようにプロパティを設定します。これで、入力フィールドが空のときに枠線が強調表示されます。
4. レイヤーパネルでエラーメッセージ（Please enter your first name.）を選択し、+ アイコンをタップして、エラーメッセージに Opacity レスポンスを追加します。次に、不透明度を 100 に設定します。これで、入力フィールドが空のときにエラーメッセージが表示されます。
5. 次に、新しいトリガーとして Detect を Input - First Name. に追加しましょう。これを行うには、入力フィールドを選択し、トリガーを追加をタップして Detect トリガーを選択します。Detect は、入力テキストが変更されたときにレスポンスを発動します。
6. Detect トリガーのすぐ下に、Text of Input - First Name ≠ "NONE" の Condition を追加します。これを行うには、ステップ 2 の手順を繰り返します。変更するのは、= を ≠ にする部分だけです。入力が埋まっているとき、この条件の下にあるレスポンスが実行されます。
7. 条件の下に、入力に対する Border レスポンスを追加します。次に、下の図のようにプロパティを設定します。この条件では枠線が消えます。
8. さらに、エラーメッセージのテキスト（Please enter your first name.）に Opacity レスポンスを追加します。opacity を 0 に設定します。これにより、この条件ではエラーメッセージが消えます。
9. いい感じです！必須入力フィールドが作成できました。Preview Window でインタラクションを確認してみましょう。
入力値の検証方法
input の value 属性は、数値入力タイプの値を指定します。
上のシナリオでは、テキストの値は 18 以上である必要があります。
条件式には formula も使用します。
1. 条件付きの 2 つの異なるトリガーを作成します。1 つは Focus トリガー、もう 1 つは Detect トリガーです。
2. 条件を作成したあとに数式へ切り替えるには、ドロップダウンの選択を input component から Formula に変更します。
3. 数式を選択したら、数式フィールドのすぐ下に次の数式をコピー＆ペーストします - number('Input - Age'.text). この数式はテキストを数値に変換できます。
** 4. Focus** トリガーでは、条件を number('Input - Age'.text) < "18" に設定します。つまり、数式を貼り付けたあと、条件演算子は <、値は 18 になります。
5. Detect トリガーでは、条件を number('Input - Age'.text) ≥ "18" に設定します。つまり、数式を貼り付けたあと、条件演算子は ≥、値は 18 になります。
参考として、下の画像を見てください。
入力の長さを検証する方法
length 属性は、文字データ（文字列）の長さを指定します。
上のケースでは、テキストの長さが固定されています。そうでない場合は、エラーメッセージが表示されます。
前の例と同様に、条件には formula を使います。ここで使う数式は length('Input - Card number'.text) です。この数式は、テキスト内の文字数を数えます。
Focus トリガーでは、条件を length('Input - Card number'.text) ≠ "22" に設定します
Detect トリガーでは、条件を length('Input - Card number'.text) = "22" に設定します
上のケースで、自動整形される入力フィールドのプロトタイプを作る方法を知りたいですか？ 詳しくは、この チュートリアル をご覧ください。
この方法はほかのケースにも適用できます
パスワード（少なくとも 8 文字）
複数行入力の文字カウンターを作る
これらのデモを確認するには、完成済みのpieファイル をダウンロードしてください。
入力欄内の文字を指定する方法
データが数値、メールアドレス、またはその他の特定のプリセットタイプである必要があるかどうかを指定します。
上のケースでは、入力はメールアドレスである必要があります。そうでない場合、エラーメッセージが表示されます。ProtoPie でメールアドレスを検証する方法は、入力テキストに "." と "@" の両方が含まれているかを確認することです。
各トリガーには 2 つの条件が必要です。ここで使う数式は indexOf('Input - Email'.text,".") と indexOf('Input - Email'.text,"@") です。
💡 **indexOf(): **テキスト内でキーワードの開始位置を探します。キーワードがテキスト内に存在しない場合、返される値は -1 です。
indexOf(source:TEXT,searchValue:TEXT)→ NUMBER
1. Focus トリガーでは、条件を次のように設定します: indexOf('Input - Email'.text,".") = "-1" および indexOf'(Input - Email'.text,"@") = "-1". これらの数式を 2 つの条件に入れる必要があります。
最初の条件 indexOf('Input - Email'.text,".") = "-1" は、ユーザー入力に ドット が含まれているかを確認します。次に、indexOf('Input - Email'.text,"@") = "-1" という数式で定義された次の条件に進み、入力に アット 記号があるかを確認します。
アット 記号と ドット は、ユーザーのメールアドレスのプレフィックスである 'Email'.text の後に来ることに注意してください。これは両方の条件の一部でもあります。したがって、メールアドレスが michaelajah@example.com なら、@ と ドット は michaelajah の後に来る必要があります。
2. Detect トリガーでは、条件を次のように設定します: indexOf('Input - Email'.text,".") ≠ "-1" および indexOf('Input - Email'.text,"@") ≠ "-1" これらの数式は 1 つの条件にまとめられます。Focus トリガーでは、両方の条件が true の場合に入力値を -1 に設定していました。この Detect トリガーの条件では、どれかの値が -1 と等しくないかを入力値でチェックします。
💡 なぜ Focus トリガーでは 2 つの別々の条件を使ったのですか？
それは、これらの条件のいずれかが満たされたときにエラーメッセージを表示したいからです。
💡 なぜ Detect トリガーでは 1 つの条件だけを使ったのですか？
それは、これらの条件がすべて満たされたときにエラーメッセージを消したいからです。
この方法はほかのケースにも適用できます
URL の検証
ユーザー名（スペース不可）
これらのデモを確認するには、完成済みのpieファイル をダウンロードしてください。
まとめ
お疲れさまでした！ユーザーが入力した内容が正しいかを 検証する テキストフィールドの作り方を学びました。さらに、条件と数式 を使って入力フィールドを検出・検証する方法も学びました！
このチュートリアルでもっといろいろ試してみれば、あっという間に ProtoPie Pro になれます。皆さんのユニークな実験をぜひ見てみたいです。自分だけのプロトタイプを作って、Twitter または Instagram で #MadeWithProtoPie を付けて共有してください。
