変数の具体例

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

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

具体例ご紹介：

変数と数式に使用する例を下記のProtoPieコミュニティでも見つけることができます。

レンジスライダー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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