数式の具体例
このページでは、変数を使用した様々な例を確認することができます。実際の作業で変数をどのように使用するか、あるいはインタラクションにどのように適用するかについてみることが出来ます。希望のプロトタイプをダウンロードしてインタラクションを直接作ってみてください。
変数と数式についての詳細はそれぞれのページをご参照ください。
具体例ご紹介:
変数と数式に使用する例を下記のProtoPieコミュニティでも見つけることができます。
- ProtoPioneers Community
- DiscordのProtoPieユーザーグループ
- FacebookのProtoPieユーザーグループ
- Facebookの日本ユーザーグループ
- YouTubeのProtoPieチャンネル
メールアドレスの確認
サインアッププロセスの一環として、メールアドレスなどのテキストを検証する機能が設定できます。下記の例は、indexOf関数を使って「@」記号の有無を確認して電子メールの形式かどうかを認識しています。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/086c082b33e44ce41ede65166d4ff5886a8ec483-1450x990.gif/validating-an-email-adress.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。
機能、条件、トリガーのフォーカスの詳細については各ページをご参照ください。
パスワード数の制限
プロトタイプを作成する際に、パスワード入力時の最小文字数を設定することができます。次の例では、長さの関数を利用して、入力が特定の文字数を超えていないかどうか確認する様に作成しています。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/cbdaf2430ef93e2c26eec027ab7aea7f30106cc1-1450x990.gif/minimun-password-length.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。
機能、条件、トリガーのフォーカスの詳細については各ページをご参照ください。
パスワードを表示する・非表示にする
正しいパスワードを入力しているかどうかを確認するには、パスワードを表示および非表示にする機能を有効にします。 入力レイヤーのテキストプロパティを使用して、プロトタイプを作成してみましょう。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/c3dff07d6042b3d0c15c702d2826e13dd827d4e4-1450x990.gif/show-hide-password.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。
レイヤープロパティ、条件、トリガー検知の詳細については各ページをご参照ください。
カウントダウンタイマー
カウントダウンタイマーを作成する場合、テキストレスポンスを使用すると、タイマー時間に応じて表示される数字を変えることができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/2a7b8b592cb8301bce0f1089ba03f30f72dcb9f2-1450x990.gif/countdown-timer.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。
レイヤープロパティ、条件、算術演算の詳細については各ページをご参照ください。
ランダムシャッフル
設定した値の中から、文字や数字をランダムに抽出して表示することができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/41ba8c67faa55dfcb5f1b5c557ac517200db5dbc-1450x990.gif/random-shuffle.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。
使用しているファンクション:right, left, randomlnt
レイヤープロパティ、トリガーの詳細については各ページをご参照ください。
残高の計算
銀行口座の残高を照会する場合などのように、自動計算が可能になるように設計することができます。特定の値を超えたり下回ったりしないように設定することが可能です。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/80abdcec342199d2db11c81a7a109803ce7926be-1450x990.gif/checking-a-bank-account-balance.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。
機能、条件、算術演算の詳細については各ページをご参照ください。
リスト内のカードを表示
スクロール値に関係なくリストから目的のレイヤーを選択したときに、その層が広がるように設計することができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/62d4df4560c39900000cba63f9aa50581c367455-1450x990.gif/expanding-a-card-in-a-list.gif)
上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。