Use Cases

このページでは、Variableを使用した様々な例を確認することができます。実際の作業でVariableをどのように使用するか、あるいはインタラクションにどのように適用するかについてみることが出来ます。希望のプロトタイプをダウンロードしてインタラクションを直接作ってみてください。

変数数式についての詳細はそれぞれのページをご参照ください。

具体例ご紹介:

レンジスライダー

レイヤーの位置とその値をリンクさせることができます。以下の例は、円をドラッグして移動すると、その位置の最新の値が自動的に計算され、変数に保存されます。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。

チェーントリガートリガー検出関数の詳細については各ページをご参照ください。

データの使用

入力レイヤーからの入力値を変数として保存すれば、他のシーンでもその値を使用することができます。名前、パスワード、電子メールなどのユーザが入力した情報を活用する時に便利です。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。

トリガーの検出トリガーをはじめるレイヤープロパティの詳細については各ページをご参照ください。

残高の計算

銀行アプリの送金画面をプロトタイプ作成する場合の例です。一定の金額を送金すると、残高が自動計算されるように設計してみましょう。現在の残高から送金する金額が差し引かれるよう、演算設定をします。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。

算術演算条件コンポーネントの詳細については各ページをご参照ください。

ショッピングカート情報を保存

ショッピングカートに商品を入れると、選択された商品がショッピングカートページに表示され、合計金額が自動的に計算されます。以下の例を参考にして、インタラクションを作成してみましょう。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。(made by Soda Design)

算術演算関数条件の詳細については各ページをご参照ください。

タイマー

タイマーで60秒が経過すると、分を追加する必要があります。そのためには、各数字の位置に条件を入力して設定します。カウントダウンタイマーを作成することもできます。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。(made by Eduardo Sonnino)

算術演算条件トリガーの検出の詳細については各ページをご参照ください。

ヘッダーを固定して画面をスクロールさせる

スクロール時に特定のメニューバーの位置を調整することができます。次の例では、$ touchVelocityYを利用することで、スクロールの方向を確認してメニューバーの位置を調整する設定をしています。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。

変数のテンプレートトリガーの検出の詳細については各ページをご参照ください。

キーボードビューの有効化

キーボードが表示される時に、特定の部分をキーボードの高さに合わせて調整することができます。次の例では、$ keyboardHeightを利用してその高さが自動的に計算されるように設計されています。

[object Object]

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。

変数のテンプレートトリガーのフォーカスの詳細については各ページをご参照ください。

音声聞き取り機能

ボイスコマンドが有効な状態で、$ voiceTranscriptを利用して音声聞き取り機能を使用することができます。認識された内容を読んだり、テキストリスポンスを使用してテキストとして表示することが可能です。

上記の例のプロトタイプを試してみるにはこちらをクリックして下さい。

変数のテンプレートボイスプロトタイピングの詳細については各ページをご参照ください。

Back To Top