ウェブサイトやアプリにサインアップまたはログインするとき、多くのサイトでは、のぞき見から守るためにパスワードをマスク（または非表示）します。しかし、入力ミスを避けるために、パスワード欄の良いUXの実践としては、表示/非表示ボタンを用意することです。そうすれば、ユーザーは自分が入力している内容を確認できます。
このチュートリアルでは、デザインの中でパスワードを表示・非表示にするボタンの作り方を学びます。ProtoPieでは、InputフィールドとDetectトリガーを使うことで、これを簡単に実現できます。
概要
学ぶ内容
始める前に
プロトタイプでパスワードを表示・非表示にする方法
1. 入力フィールドの準備
2. 表示/非表示を押したときに入力フィールドを並べ替える
3. 異なる入力フィールド間のテキストを同期する
これで完了です！これでパスワードを表示・非表示にできます
ProtoPieでデザイナーとしてレベルアップしよう
学ぶ内容
このレッスンでは、次の方法を学びます。
Inputフィールドを準備する
表示/非表示を押したときにInputフィールドを並べ替える
異なるInputフィールド間のテキストを同期する
最後には、こんなものを作れるようになります！
始める前に
すぐに始められるよう、表示/非表示ボタン付きのPieファイルをすでに用意しました。これはConditions.を使って動作します。
詳しくはConditionsを使ってトグルボタンを作る方法を学びましょう。
プロトタイプでパスワードを表示・非表示にする方法
1. Inputフィールドの準備
1. まずは、マスクされたText Passwordフィールドと、通常のTextフィールドを作成して、準備を整えます。
2つのテキスト** Input**フィールドを使います。一方にはマスクされたパスワードテキストを、もう一方には表示されるテキストを入れます。
2. Hide Inputフィールドを選択し、properties panelでKeyboard Optionsを探します。TypeをText Password.に変更します。これにより、Hideフィールドに入力されるすべてのテキストが自動的にマスクされます。
3. そのままプロトタイプをプレビューしてみましょう。Hide Inputフィールドが、マスクされたテキストで動作しているのが見えるはずです。
2. 表示/非表示を押したときに入力フィールドを並べ替える
このステップでは、Reorderレスポンスを使って、表示/非表示ボタンをHideとShowのInputレイヤーの間で切り替えるようにします。
1. Show Inputレイヤーを選択します。既存のTapインタラクションで、+をクリックし、Reorderレスポンスを追加します。Reorderレスポンスはレイヤーの順序を変更できます。今回の場合は、ShowをHideの前面に移動して見えるようにしたいのです。
2. ReorderレスポンスがBring Forwardに設定されていることを確認します。このプロパティは、Showレイヤーを1つ前に移動し、つまりHideのすぐ手前に配置します。
3. Reorderレスポンスを最初のConditionの下へ移動します。つまり、タイトルが「Tap Show button」のものです。これで、showボタンがタップされると、ReorderレスポンスはShowレイヤーをHideレイヤーの上へ移動します。
4. 同じ手順をHideレイヤーでも繰り返します。まずHide入力レイヤーを選択し、Reorderレスポンスを追加します。もう一度、ReorderがBring Forwardに設定されていることを確認します。今回は、Reorderレスポンスを2番目のCondition、つまり「Tap Hide Button」に適用します。したがって、2番目のConditionの下にあることを確認してください。
これで、hideボタンがタップされると、ReorderレスポンスはHideレイヤーをShowレイヤーの上へ移動します。
💡 なぜReorderレスポンスを使ったのでしょう？「Hide」と「Show」レイヤーを非表示にするためにOpacityを使うことはできなかったのでしょうか？
ええ、できます！それでも動作します。ただし、この方法のほうが速く、毎回両方のレイヤーにOpacity値を設定するのではなく、レイヤーごとに1つのレスポンスだけで済みます。
5. そのままPreviewして進捗を確認してみましょう。最初はパスワード欄がマスクされているのがわかるはずです。表示/非表示ボタンを押すとマスクされた欄は消えますが、空のShowフィールドが表示されているように見えます。ここでは、入力したテキストを表示したいので、次のステップで対処しましょう。
3. 異なるInputフィールド間のテキストを同期する
このステップでは、Detectトリガーを使って、HideとShowのInputレイヤー間でテキストを同期します。
トリガーについて詳しく学ぶ。
1. Hide入力レイヤーを選択します。Add Triggerボタンを押して、Detectトリガーを追加します。DetectのvalueをTextに変更します。Detectトリガーは、選択したvalueに基づいて、指定したレイヤー上の変更を検出します。
今回のケースではTextを選択しているので、入力テキストに変更があるたびにこのトリガーが発火します。
2. このDetectトリガーにTextレスポンスを追加し、そのTextレスポンスがShowレイヤーに設定されていることを確認します。
3. Contentをもう一度Formula.に変更します。次のformulaを使います。``Hide.text.このformulaは、TextレスポンスにHideレイヤーに入力されたテキストを反映するよう指示しています。
これで、Hideレイヤーにテキストが入力されるたびに、その同じテキストが自動的にShowレイヤーへコピーされます。ただし、これは逆方向でも動く必要があります。そこで…
4. 同じ手順をShowレイヤーでも繰り返しましょう。まずShowレイヤーを選択し、Detectトリガーを追加します。DetectのvalueをText.に変更します。
5. このDetectトリガーにTextレスポンスを追加し、Hideレイヤーに設定されていることを確認します。
6. Contentを再びFormulaに変更します。今度は、``Show.textというformulaを使います。これで、このformulaは、Showレイヤーに入力されたテキストをTextレスポンスに反映するよう指示しています。
これで、HideまたはShowのどちらのレイヤーにテキストを入力しても、そのテキストはそれぞれShowとHideのレイヤーにコピーされます。
これで完了です！これでパスワードを表示・非表示にできます
お見事です！マスクされたPassword Textフィールドの作成方法と、Detectトリガー、Textレスポンス、そしてとても簡単な組み込みのformulaを使って、そのテキストを別のレイヤーに反映する方法を学びました。また、Reorderレスポンスを使って2つのレイヤーの表示を切り替える方法も学びました。
ProtoPieでデザイナーとしてレベルアップしよう
ProtoPieは、インタラクティブで本物のようなプロトタイプを作成し、関係者との明確なコミュニケーションと効率的なテストを可能にすることで、開発なしでデザイナーを支援します。
あなたのデザインを次のレベルへ引き上げる方法を教えます！
