プロトタイプで式を使用する
🚧 バリアブルは現在、オープンベータ版です。この期間中、さらに機能を追加し、エクスペリエンスに磨きをかけていきます。次に何が登場するかはこちら →
はじめに
この機能を使用できるユーザー
すべての有料プランで利用可能。
ファイルへの編集可
のアクセス権があれば、誰でもプロトタイプを作成できます。
ファイルへの閲覧のみ
またはプロトタイプの閲覧のみ
のアクセス権があれば、誰でもプロトタイプを閲覧できます。
バリアブルを使用したプロトタイプ作成により、シンプルなフレームやインタラクションをいくつか使用するだけで、ユーザーの選択によって変化するリアルなプロトタイプを作成することができます。
プロトタイプをさらに強化するには式が有効です。式を使うことで、動的な文字列や数値の生成、ブール式の評価をすることができます。
式を使ったプロトタイプ作成でできること:
- 購入総額を計算するショッピングカートの作成
- 音量や進行バーなど、拡大縮小するオブジェクトの構築
- ユーザーの選択に基づく新たな文字列の結合や構築
式を使用する箇所
式によって、基本的な演算を使用してバリアブルの値を操作する方法を提供します。以下に使用できます:
- 選択したバリアブルが数値、文字列、ブールタイプの場合のバリアブルを設定プロトタイプアクション
- 条件付きアクションの一部としての条件付きプロトタイプアクション
インタラクションの詳細モーダル上の以下のフィールドに式を直接書くことができます。
- [バリアブルを~に設定]: 選択したバリアブルの新たな値を示す式を入力
- [条件付きアクション] if: アクションに必要な条件を示すブール式を入力
プロトタイプで式を作成するには、サポートされている構文を使用して利用可能なフィールドに直接書くか、選択パネルを使用して提案されたバリアブルや演算から選択します。
式が完成したら、EnterまたはReturnを押します。サポートされている演算や構文で書いた式のみが動作します。無効な式は赤く表示されます。
式を書く
式は値と演算子で構成されます。
- 演算子は、実行または評価(加算や減算など)している機能を表します。
- 値は、演算子が実行中または評価中の項目です。
たとえば、以下の式をご覧ください。
この例では、演算子は加算であり、+ プラス記号で示されています。値はvariableName
と2
です。
式の種類は、利用できる値や演算子で決定されます。
数値式
数値式は以下の値の種類で書くことができます。
- 数字バリアブル
- 数字リテラル(0.5、1、10など)
以下の演算子は数値式で使用できます。
演算 | 記号 |
加算 | + |
減算 | - |
乗算 | * |
除算 | / |
文字列式
文字列式は以下の値の種類で書くことができます。
- 文字列リテラル("John Doe”、“アイテム2”, “5”など)
- 数字リテラル
- 文字列バリアブル、数字バリアブル
文字列リテラルは、引用符で囲む必要があります。数値は文字列値に加えることができます。
以下の演算子は文字列式に使用できます。
演算 | 記号 |
文字列に追加 | + |
ブール式
ブール式は以下の値の種類で書くことができます。
- ブールリテラル(true、false)
- 数字リテラル
- 文字列リテラル
- ブールバリアブル、文字列バリアブル、数字バリアブル
以下の演算子はブール式に使用できます。
演算 | 記号 |
等しい | == |
等しくない | != |
および | and |
または | or |
より大きい | > |
未満 | < |
以上 | >= |
以下 | <= |
加算** | + |
減算** | - |
乗算** | * |
除算** | / |
文字列に追加** | + |
**数値演算子や文字列演算子はブール式の評価に使用しませんが、複雑な式での演算の補助として使用できます。
ブール式はtrue
またはfalse
の値に解かれます。1つの式を使ってブールバリアブルを設定した場合、式の結果はtrueまたはfalseのどちらかに評価され、ブールバリアブルの新たな値が設定されます。
たとえば、以下の単純なインタラクションと式をご覧ください。
itemCount
の値は0
であり、5
未満です。したがって、この式の値はfalse
となります。ただし、下記の例を見てみましょう。
itemCount
の値は6
であり、5
より大きいため、この式の値はtrue
となります。
ブール式の例を以下のタブで示します。この例では、以下のステートメントがtrueとなります。
- 値が等しい場合、
true
を返します。 - 値が等しくない場合、
false
を返します。
例:
結果:1
は2
と等しくないため、booleanVariable
はfalse
に設定されます。
結果:1
+1
は2
と等しいため、booleanVariable
はtrue
に設定されます。
- 値が等しくない場合、
true
を返します。 - 値が等しい場合、
false
を返します。
例:
結果:red
はblue
と等しくないため、booleanVariable
はtrue
に設定されます。
結果:2
は2
と等しいため、booleanVariable
はfalse
に設定されます。
- 両方の値が真の場合、
true
を返します。 - 両方の値が偽の場合、
false
を返します。
例:
結果:1
と1
and2
と2
が等しいため、booleanVariable
はtrue
に設定されます。
結果:1
は5
未満のため、booleanVariable
はfalse
に設定されます。
- 片方または両方の値が真の場合、
true
を返します。 - 両方の値が偽の場合、
false
を返します。
例:
結果:red
はred
と等しいため、booleanVariable
はtrue
に設定されます。
結果:red
はgreen
ともorange
とも等しくないため、booleanVariable
はfalse
に設定されます。
注: ブール式は、条件ステートメントの評価にも使用されます。
複雑な式と演算子の順序
複雑な式では、複数の演算子を1つの式に使用して作成します。括弧を使って式をグループ化します。
複雑な式では、以下の順序で基本の数学演算子が実行されます。
- 括弧
- 乗算/除算
- 加算/減算
ブール式演算子は以下の順序で実行されます。
- 括弧
- 比較(==、!=、>、<、など)
- And
- Or
すべての演算子は左から右に実行されます。
以下は式の例です。
まずはy
をz
で乗算し、次にx
を加算します。
以下のブール式になります。
まずはy
がz
より大きい場合に評価します。次にx
が解であるy > z
と等しい場合に評価します。
式の概念
数字を否定する
正の数値を負の数値に設定するには、0からその数値を減算します。
たとえば、正の値の数字バリアブル(numVar) は、以下の式を使って否定することができます。
負の数値を正の数値に設定するには、-1を掛けます。
たとえば、負の値の数字バリアブル(numVar)は、以下の式で正にすることができます。
ブール値を否定する
ブール値を否定することは、その倫理状態を反転させることです。真のブール値を否定すると偽となり、偽のブール値を否定すると真となります。
トグル、ボタン、その他の設定など、相反する2つのステータスのあるオブジェクトを作成する際、ブール値の否定が有効です。
ブール値を否定するには、以下の式を使用します。
!=演算を使用することで、値が等しくない場合trueを返し、値が等しい場合falseを返します。つまり、以下のようになります。
-
boolVar
値がtrue
の場合、trueはtrueと等しいため、ステートメントはfalse
と評価されます。 -
boolVar
値がfalse
の場合、falseはtrueと等しくないため、ステートメントはtrue
と評価されます。
試してみる
例:音量コントロールバーを作成
- 長方形を1つ追加して、音量コンテナ(ここでは幅260、高さ100)を表示します。
- 2つ目の長方形を追加し、音量レベルを表示します。この長方形は1つ目の長方形の上に配置し、左側に揃えます。2つ目の長方形の幅は、1つ目の長方形よりも小さくします(高さ100、幅は14以上)。
- 線を使ってプラス記号とマイナス記号を表すオブジェクトを作成し、音量コンテナの下部に配置します。
次に、バリアブルを作成する必要があります。新しいコレクションで、数値バリアブルを作成します。その数値バリアブルにvolumeLevel
という名前を付け、初期値を14にします。
それでは、volumeLevel
バリアブルを音量レベルを表す長方形の幅の値にバインドしましょう。
- 小さい方の長方形をクリックして選択します。
- 右サイドバーの[デザイン]タブで、幅の値を確認します。
- 幅の値フィールドにカーソルを合わせてから、 [バリアブルを適用]を選択します。
- バリアブル選択パネルのバリアブル
volumeLevel
を選択します。
これでフレームとバリアブルの設定が完了しました。それではプロトタイプ作成のインタラクションを作成しましょう。
- フレームのプラス記号オブジェクトをクリックします。
- 右サイドバーの[プロトタイプ]タブから、 プラスアイコンをクリックして新しいインタラクションを追加します。
- トリガーを[タップ/クリック]に、アクションを[バリアブルを設定]にそれぞれ設定します。
volumeLevel
バリアブルを選択します。 - 式を使って新しい値を設定します。ユーザーがプラスアイコンをクリックするたびに5ずつ大きくなるように音量レベルの幅を設定するには、次の式を使います。
volumeLevel + 5
- 続けて、手順1~4でマイナスアイコンのアクションを設定します。今回は、バリアブルの新しい値の設定に次の式を使います。
volumeLevel - 5
プロトタイプを再生して、インタラクションをテストしましょう。