バインディングの使用¶

バインディングを使用して、他のプロパティ、プロパティフィールド、またはデータソースからの値でプロパティまたはプロパティフィールドの値を設定します。

バインディングを行うと、ノード、レンダーパス、2Dエフェクト、状態、状態オブジェクト、スタイルが、プロパティ値の変化や何らかの外部イベント発生に応じて、プロパティ値を自動更新できます。

ノードのプロパティをそのノード自身のプロパティにバインドするのが最も簡単なバインディングです。また、1つのノードのプロパティやプロパティフィールドを、複数の異なるノードのプロパティにバインドすることもできます。単純なバインディングを作成する、別のノードのプロパティにバインドする、およびバインドしているプロパティの値を変更するを参照してください。

ソースプロパティの値が変わったときにターゲットプロパティの値を変更し、逆も同様にするには、双方向バインディングを使用します。

双方向バインディングの作成を参照してください。

複雑なバインディング式では、複数の変数とバインディング関数を使用します。より複雑なバインディングを作成するを参照してください。

マテリアルタイプには、ユニフォームや一時変数のための独自の特別なバインディングタイプがあります。マテリアルタイプバインディングを参照してください。

青色タイプはバインディングによってコントロールされるプロパティにマークを付けます。

プロパティにバインディングを作成すると、そのバインディングから得られる値が Properties で設定したプロパティの値を上書きします。

バインディングの作成時には以下の点に留意してください。

同様のデータ型へのバインディングのみが有効です。例えば、色には色、ベクトル2にはベクトル2といったようにバインドできます。型キャストを参照してください。
バインディングは最後の式の値を受け入れます。代入、単項演算または 2 項演算、あるいは単なる定数値または変数自体のどれであっても、その値です。
バインディングでは、4 つの基本型である整数、浮動小数、論理値、文字列の間で文字列をキャストできます。

整数、浮動小数点数、ブール値間のキャストは暗黙的であり、値を使用するプロパティの型に依存します。文字列へのキャストおよび文字列からのキャストは明示的です。

バインディング式リファレンスを参照してください。

Binding Editor でのエラーメッセージとその説明のリストについては、バインディングのトラブルシューティングを参照してください。

バインディングの使用方法を学ぶには、次のチュートリアルのいずれかを完了してください。

ノードの回転プロパティフィールドを、ゲージの針を作成するプロパティにバインドして、プロパティで針を制御できるようにする。チュートリアル: ゲージを作成するを参照してください。
あるノードの位置またはサイズを別のノードの位置またはサイズにバインドする。チュートリアル: 動的レイアウトを使用したアプリケーションの作成を参照してください。
ノードの回転プロパティフィールドを Scroll View ノードの Scroll Position プロパティにバインドして、スワイプジェスチャーを使用してノードを回転させます。チュートリアル: 3Dモデルを回転させるを参照してください。

単純なバインディングを作成する¶

最も単純なバインディングは、ノードのプロパティをそのノード自身のプロパティにバインドします。また、バインディングオペレーターや関数を使用して結果を修正し、同じノードに複数のバインディングを追加することもできます。

単純なバインディングを作成するには:

Node Tree で、バインドしたいプロパティを持つノードを作成または選択します。

例えば、Button 2D ノードを作成し、Properties に追加して設定します。
- Button 2D ノードを埋めるために使用する Background Brush を Color Brush、Texture Brush、または Material Brush にします。2Dノードの外観の調整を参照してください。
- Horizontal Alignment と Vertical Alignment を Center に
- ボタンの幅を設定するには、Layout Width を使用します。
- Render Transformation
  
  あとでこのプロパティを同じ手順で使用して、ボタンの位置を設定します。
Properties で + Add Binding をクリックし、Binding Editor で設定します。
- バインドしたいプロパティに Property
  
  例えば、高さをバインドするには、Layout Height を選択します。
- バインドしたいプロパティフィールドに（オプション） Property Field を設定します。
  
  プロパティ全体にバインドするには、Property Field を Whole property に設定したままにします。
Expression エディターでバインディング式を入力します。

例えば、この同じノードの高さを幅にバインドするには、次のように入力します:
```
{@./Node.Width}
```
Save をクリックしてバインディングを適用し、Binding Editor を閉じます。

Layout Width プロパティの値を変更してノードの幅を変更すると、ノードの高さも同じ量だけ変わり、ボタンは常に正方形になります。

ヒント

Binding Editor でバインディングの式を書くとき、ノードとそのプロパティを式に追加する最も速くて正確な方法は、Properties から Binding Editor の Expression エディタにドラッグすることです。
ヒント

以下の方法でバインディングを適用することができます。
- バインディングを適用するために Binding Editor を閉じずに、Apply をクリックします。
  
  バインディング式のみを編集している場合は、キーボードの Shift Enter キーを押してバインディングを適用できます。
- バインディングを適用して Binding Editor を閉じるには、Save をクリックします。
同じノードに別のバインディングを追加します。

例：
1. Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Layout Width へ
  - Expression へ
    abs({@./Node2D.RenderTransformation}.translationX * 0.5)
  Save をクリックします。
  
  ノードの幅を、Render Transformation プロパティ Translation X プロパティフィールドの絶対値の半分にバインドします。
  
  abs 関数を使用して絶対値を計算します。バインディング式リファレンスの絶対値 (absolute value) を参照してください。
  
  ヒント
  
  バインディング式に関数呼び出しを素早く追加するには、Binding Editor で Enter Operation をクリックし、呼び出したい関数を選択します。
2. （オプション） Properties で Layout Width プロパティを右クリックし、Remove を選択します。
  
  バインディングがそのプロパティを制御しているため、Layout Width プロパティを削除できます。
  
  プロパティにバインディングを作成すると、そのバインディングから得られる値が Properties で設定したプロパティの値を上書きします。

ボタンを X 軸上で移動すると、ボタンのサイズが変更されます。

別のノードのプロパティにバインドする¶

あるノードのプロパティとプロパティフィールドを、別のノードのプロパティとプロパティフィールドにバインドできます。

別のノードのプロパティにバインドするには:

Node Tree で、バインドしたいプロパティを持つノードを作成または選択します。

例えば、Button 2D ノードを作成し、Properties に追加して設定します。
- Button 2D ノードを埋めるために使用する Background Brush を Color Brush、Texture Brush、または Material Brush にします。2Dノードの外観の調整を参照してください。
- Horizontal Alignment と Vertical Alignment を Center に
- Layout Width と Layout Height を使用してボタンのサイズを設定します。
- Render Transformation
  
  あとでこのプロパティを同じ手順で使用して、ボタンの位置を設定します。
別のノードを作成し、そのいずれかのプロパティを、前のステップで作成したノードのプロパティにバインドします。

例：
1. Node Tree Alt を押しながら右クリックで作成したノードで、Text Block 2D を選択し、Properties で Horizontal Alignment と Vertical Alignment プロパティを Center に追加して設定します。
2. Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Text へ
  - Expression へ
    int({@../Node2D.RenderTransformation}.translationX)
    ヒント
    
    バインディング式でノードへのパスの前に @ 記号を使用すると、Kanzi Studio:
    - パスが有効かどうかを確認し、パスが有効でない場合は Binding Editor にエラーメッセージを表示します。
    - ノードツリー内のソースノードとターゲットノード間の位置が変わるたびに、バインディング式のパスを更新します。
    @ 記号を使用すると、同じプレハブ内でのみバインディングを作成でき、プレハブ間では作成できません。
  Save をクリックします。
  
  ノードの Text プロパティを親ノードの Render Transformation プロパティ Translation X プロパティフィールドにバインドし、値を整数に変換します。バインディング式リファレンスの型キャストを参照してください。

手順の最初のステップで作成したノードの Render Transformation プロパティ Translation X プロパティフィールドの値を変更すると、Text Block 2D ノードのテキストがノードのx軸上の現在の位置を示すように変わります。

バインドしているプロパティの値を変更する¶

バインドしたいプロパティの現在の値を取得し、その値を変更することができます。

バインドしたいプロパティの値を変更するには、

Node Tree で、バインドしたいプロパティを持つノードを作成または選択します。

例えば、Button 2D ノードを作成し、Properties に追加して設定します。
- Button 2D ノードを埋めるために使用する Background Brush を Color Brush、Texture Brush、または Material Brush にします。2Dノードの外観の調整を参照してください。
- Horizontal Alignment と Vertical Alignment を Center に
- Layout Width と Layout Height を使用してボタンのサイズを設定します。
- Render Transformation
  
  あとでこのプロパティを同じ手順で使用して、ボタンの位置を設定します。
Properties で + Add Binding をクリックし、Binding Editor で設定します。
- バインドしたいプロパティに Property します。
  
  例えば、Render Transformation プロパティフィールドの1つをバインドするには、Render Transformation を選択します。
- バインドしたいプロパティフィールドに Property Field を設定します。
  
  たとえば、Y 軸上の Translation プロパティフィールドをバインドするには、Translation Y を選択します。
- Expression へ
```
getCurrentValue().translationX
```
getCurrentValue バインディング関数を使用して、このバインディングで修正する Render Transformation プロパティの値を取得します。Kanzi Studio は、Bindings > Modifiers でバインディングを作成します。

Render Transformation プロパティ Translation X プロパティフィールドの値を変更してノードを x 軸上で移動すると、ノードは y 軸上でも同じ距離だけ移動します。

ソースへのバインディングを作成する¶

ソースバインディングを使用して設定します:

バインディングのプッシュターゲットとして設定した別のプロジェクトアイテムのプロパティ値。
ユーザー入力などの他の入力ソースによっても影響を受けるプロパティ値。

例として、トグルボタンのトグル状態を更新するための to-source バインディングを作成するには、以下のようにします。

バインディングでトグル状態を更新したい Toggle Button ノードを作成します。

例：
1. Node Tree で、Stack Layout 2D ノードを作成します。
2. Asset Packages > Factory Content から、Toggle Button を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。ファクトリーコンテンツ (Factory Content) のアセットを参照してください。
Toggle Button ノードのトグル状態をバインドしたいコントロールを作成します。

例：
1. Asset Packages > Factory Content から、Slider を Node Tree にドラッグし、Stack Layout 2D ノードにドロップします。Properties で、スライダーの最小値と最大値を追加して設定します。Factory Content のスライダーを使用してを参照してください。
2. （オプション） Stack Layout 2D ノード内に、スライダーの値を表示する Text Block 2D ノードを作成します。
Toggle Button ノードを選択します。Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Binding Mode から To source へ
- Push Target から . へ
- Property から Toggle Button > Toggle State
- Expression を、トグル状態に設定したい値を返す式にします。
  
  たとえば、データ型として四元数を使用する
```
{@../Slider/RangeConcept.Value} == 0 ? 0 : 1
```
  このバインディングは、条件演算子を使用して Toggle Button を切り替えます。
  - Slider の値がゼロのときオフ。
  - Slider の値がゼロでない場合にオン。
  ？（条件付き）を参照してください。

Preview にいるとき、次のことを行います。

スライダーをゼロより大きい値に調整すると、Kanzi がトグルボタンで切り替わります。
スライダーをゼロに調整すると、Kanzi がトグルボタンをオフにします。
トグルボタンを切り替えても、スライダーはその値を保持します。

これにより、ユーザーは設定の値を調整し、設定を迅速に有効化および無効化することができます。例えば、音量コントロールを作成することができます。

../../_images/preview-toggle-state-slider-control.gif

双方向バインディングの作成¶

ソースプロパティの値が変わったときにターゲットプロパティの値を変更し、逆も同様にするには、双方向バインディングを使用します。

例えば、List Box ノード内のアイテムをクリックするか、スライダーを使用して、リストボックス内のアイテムをユーザーが選択できるようにするために、双方向バインディングを使用します。

2つのノードのプロパティ間で双方向バインディングを作成するには:

プロパティをバインドしたい2つのノードのうち、最初のノードを作成します。

例えば、Asset Packages > Factory Content から Cover Flow を Preview にドラッグします。ファクトリーコンテンツ (Factory Content) のアセットを参照してください。

Cover Flow > Scene > Trajectory List Box 3D ノードで、Selection Behavior プロパティが Bring Center に設定されています。これにより、ユーザーがそのリストボックス内のアイテムをクリックすると、リストボックスはそのアイテムをリストボックスの中央に持ってきます。
プロパティをバインドしたい2つのノードのうち、2番目のノードを作成します。

例：
1. Asset Packages > Factory Content から Slider を Preview にドラッグします。Factory Content のスライダーを使用してを参照してください。
2. Node Tree で Slider ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Maximum Value へ
  - Expression へ
    {@../Cover Flow/Scene/Trajectory List Box 3D/ListBoxConcept.ItemCount} - 1
  Slider ノードの最高値を Trajectory List Box 3D ノードの最後のアイテムのインデックスにバインドします。Slider ノードの最小値はデフォルトで0です。この方法で、Slider ノードの値の範囲を Trajectory List Box 3D ノードのアイテム数に一致させます。
作成したノードのプロパティ間で双方向バインディングを作成するには、Node Tree で Slider ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Binding Mode から Two way へ
- バインドしたいプロパティに Property します。
  
  たとえば、それを Value に設定します。
- ターゲットプロパティをバインドしたいプロパティに Source します。
  
  例えば、List Box ノードの Selected Item Index プロパティに設定します。
```
{@../Cover Flow/Scene/Trajectory List Box 3D/ListBoxConcept.SelectedItemIndex}
```
Slider ノードの Value プロパティを、Trajectory List Box 3D ノードの Selected Item Index プロパティにバインドします。この方法で、スライダーのノブの位置とリストボックス内の選択されたアイテムの間に双方向の接続を作成します。

Preview では、スライダーノブを動かすとリストボックス内の選択されたアイテムが変わり、リストボックス内のアイテムをクリックするとスライダーノブが動きます。

より複雑なバインディングを作成する¶

複雑なバインディングでは、あるノードのプロパティを別の複数のノードのプロパティにバインドして、いくつかの変数とバインディング関数を使用します。この例では、スライダーを使用してカラーピッカーを作成します。

../../_images/bindings-color-wheel-complete.gif

複雑なバインディングを作成するには:

カラーホイールに沿ってリング状のノブが動くスライダーを作成します。
1. Assets で、Import Assets をクリックし、カラーホイールとリング状のスライダーノブを表示する画像をインポートします。
  
  例えば、これらの画像を保存してインポートします。
2. Prefabs で、Slider 2D プレハブを作成し、Color Picker と名付けます。Properties で、追加して設定します。
  - Layout Width と Layout Height をカラーホイールを表示する画像の寸法に合わせます。
    
    たとえば、それらを700に設定します。
  - Horizontal Alignment と Vertical Alignment を Center に
3. Color Picker プレハブを Node Tree にドラッグし、RootPage ノードにドロップします。
  
  この方法で、ノードツリー内にプレハブをインスタンス化し、Preview でスライダーの作成を追跡できます。
4. Prefabs > Color Picker プレハブ内で：
  1. Image ノードを作成し、カラーホイールを表示してスライダーノブが移動するレールを視覚的に表現します。Properties で、Horizontal Alignment と Vertical Alignment プロパティを Center に追加して設定します。
  2. スライダーノブを移動させるレールとして機能する Trajectory Layout 2D ノードを作成します。Properties で、次を追加して設定します。
    - Layout Width と Layout Height は、カラーホイールとスライダーノブを表示する画像の寸法の違いを示します。
      
      たとえば、それらを665に設定します。
    - Horizontal Alignment と Vertical Alignment を Center に
    これにより、トラジェクトリレイアウトが色相環に重ねて配置されます。
    
    ヒント
    
    トラジェクトリを表示するには、Preview でをクリックして Analyze モードに入り、を右クリックして Debug objects を選択します。
  3. Trajectory Layout 2D ノード内で、スライダーのノブの視覚的表現として使用する Image ノードを作成します。
5. Prefabs で、Trajectory Layout 2D ノードを選択します。Trajectory プロパティの隣にある Properties で、をクリックしてそのリソースに移動し、設定します。
  - Radius を Trajectory Layout 2D ノードの幅の半分に
    
    たとえば、それを332に設定します。
  - Angle から 180 まで
    
    これにより、トラジェクトリの開始点の色が赤、色相 0 に設定されます。
6. Kanzi がスライダーのレールとして使用するトラジェクトリをスライダーに伝えるためのエイリアスを作成します。
  1. Prefabs で、Color Picker プレハブを選択します。Dictionaries で、+ Add Resource をクリックし、Create > Alias を選択し、エイリアスに $layout という名前を付けます。
  2. Color Picker プレハブ内の Trajectory Layout 2D ノードを指すように $layout エイリアスを設定します。
7. Prefabs で、Knob ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。
  - Property から Trajectory Override Offset へ
  - Expression へ
    {@../../RangeConcept.NormalizedValue}
  Save をクリックします。
  
  このバインディングにより、スライダーのノブがスライダーのレールを定義するトラジェクトリ上を移動します。

ユーザーがカラーホイールで選択した色を保存します。

Library > Property Types で、プロパティタイプを作成し、設定します。
- Name から ColorPicker.Color へ
- Data Type から Color へ

Prefabs で、Color Picker プレハブを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で、次を設定します。

Property から ColorPicker.Color へ

Expression へ

# This binding expression calculates the color of the color wheel
# in the position defined by the value of the slider.

# The color wheel shows a continuous range of colors in the HSL color space.
# Create a variable that you use to store the color value and set the
# initial values of the color channels:
# - Hue to 0
# - Saturation to 1
# - Lightness to 0.5
# - Alpha to 1
hslVector = Vector4(0, 1, 0.5, 1)

# Set the hue of the color to the value of the slider in the 0...1 range.
# For example, value 0 corresponds to red, and value 0.5 to cyan.
hslVector.x = {@./RangeConcept.Value}

# Convert the color from HSL to sRGB color space.
srgbColor = Color4(hslToSrgb(hslVector))

# Convert the color from sRGB to linear color space and return the color.
# A binding takes the value of the last expression, whether it is an assignment,
# unary or binary operation, or just a constant value or variable itself.
sRGBToLinear(srgbColor)

Save をクリックします。

スライダーの Value プロパティに基づいて計算した色の値に ColorPicker.Color プロパティをバインドします。色空間を変換するために、hslToSrgb と sRGBToLinear のバインディング関数を使用します。

../../_images/binding-color-picker-color.png

現在選択されている色を表示する色見本を以下のように作成します。
1. Node Tree で、Empty Node 2D ノードを作成し、Color Swatch と名付けます。Properties で、追加して設定します:
  - Foreground Brush と + Color Brush を選択
  - Layout Width と Layout Height を300に
  - Horizontal Alignment と Vertical Alignment を Center に
  このノードを使用すると、スライダーを使ってユーザーが色相環で選択した色が表示されます。
2. Node Tree で、Color Swatch ノードを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。
  - Binding Mode から To source へ
  - Push Target から .Node2D.ForegroundBrush へ
  - Property から Brush Color へ
  - Expression へ
    {@../Color Picker/ColorPicker.Color}
  Save をクリックします。
  
  この方法で、Color Swatch ノードの Foreground Brush で使用されるブラシの Brush Color プロパティの値を設定します。Color Picker ノード内で、Brush Color プロパティの値を ColorPicker.Color プロパティの値にバインドします。
Preview では、カラーホイールに沿ってノブをドラッグすると、カラースウォッチにノブの下の色が表示されます。
（オプション）カラーホイール、スライダーノブ、およびカラースウォッチにシャドウを適用します。
1. Library で、Alt を押しながら右クリック Effects を選択し、Shadow Effect 2D を選択します。
  
  Shadow Effect 2D エフェクトは、2Dノード内のコンテンツの視覚的な形状に影を適用します。Shadow Effect 2D エフェクトを使用するを参照してください。
2. Library > Effects > 2D Effects から、Shadow Effect 2D エフェクトを Prefabs にドラッグし、カラーホイールを表示するノードにドロップします。
  
  この方法で、そのノードに Effect Prefab プロパティを Shadow Effect 2D エフェクトに設定します。
3. スライダーノブとカラースウォッチを表示するノードに対して、前のステップを繰り返します。
4. 影効果の外観を調整します。
  
  例えば、Library > Effects > 2D Effects で、Shadow Effect 2D エフェクトを選択します。Properties で、追加して設定します。
  - Shadow Blur Radius から 5 まで
  - Shadow Distance から 2 へ
  - Shadow Color を完全に不透明な黒にする
5. Prefabs で、Color Picker プレハブを選択します。Properties で、レイアウト内の影に十分なスペースを残す値に Layout Width と Layout Height プロパティを設定します。
  
  例えば、Layout Width と Layout Height を 710 に設定します。

バインディングを使用してリソースをロードする¶

Acquire バインディング関数を使用して、文字列プロパティで定義したリソースIDを使用してリソースをロードできます。

例えば、データソースからテキストリソースのリソースIDを取得し、そのテキストリソースをロードし、Text Block ノードにそのテキストリソースの内容を表示するバインディングを作成できます。そのテキストリソースをローカライズすると、Text Block はアプリケーションの現在のロケールに対するリソースの値を自動的に表示します。データソース内のデータを変更すると、バインディング関数はリソースIDが指すリソースを取得し、テキストを更新します。

取得を参照してください。

バインディングを使用してリソースをロードするには:

Kanzi Studio で、アプリケーションに表示したいリソースを作成します。

例えば、ローカライゼーションテーブルでリストメニューのラベル用のテキストリソースを作成します。アプリケーションのローカライズを参照してください。
アプリケーションで表示したいリソースのリソースIDを設定する文字列データオブジェクトのデータソースを作成します。データソースの定義およびデータソースを使用するを参照してください。

例：
1. Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。Data source チュートリアルの横にあるをクリックします。
2. Library で Kanzi Engine Plugins を右クリックし、Import Kanzi Engine Plugin を選択して、<KanziWorkspace>/Tutorials/Data sources/Completed/Application/lib/Win64/GL_vs2019_Release_DLL/XML_data_source.dll Kanzi Engine プラグインをインポートします。
3. Data Sources で、データソースを作成します。
  
  このデータソースを使用して、List Box ノードのアイテムにデータを提供します。チュートリアル: データソースからアプリケーションデータを取得するを参照してください。
```
<menu type="list">
    <items>
        <item>
            <name type="string">Sounds</name>
        </item>
        <item>
            <name type="string">DateTime</name>
        </item>
        <item>
            <name type="string">Car</name>
        </item>
        <item>
            <name type="string">Display</name>
        </item>
        <item>
            <name type="string">Language</name>
        </item>
    </items>
</menu>
```
リソースをロードします:
1. acquire バインディング関数を使用して、リソースIDに基づいてリソースをロードします。
  
  例えば、リソースIDが指すコンテンツを表示したい Text Block ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Text へ
  - Expression へ
    acquire({DataContext.item.name})
  Text プロパティを、name 文字列データオブジェクト内の menu リストアイテムのデータソースで定義したリソースIDを持つテキストリソースの内容にバインドします。
2. データソースからのリソースIDが指すコンテンツを表示するノードを作成します。
  
  例えば、データソースからデータを List Box ノードに入力し、アイテムテンプレートとして、リソースをロードするバインディングを追加したノードを含むプレハブを使用します。リストデータオブジェクトの使用を参照してください。

アプリケーションのロケールを切り替えたり、データソースのデータを変更したりすると、acquire バインディング関数がリソースIDが指すリソースを取得し、List Box ノードのコンテンツを更新します。

バインディングで区分的関数を使用する¶

animate バインディング関数を使用して、区分的関数を用いてプロパティの値がどのように変化するかを設定できます。

例えば、Animate 関数を使用して、ゲージの針が0から100の値の間でより速く動くように設定し、100より大きい値では遅く動くようにすることができます。

Animate を参照してください。

バインディングで区分的関数を使用するには:

Animation Data アイテムを作成します。アニメーション (Animations) を参照してください。

例えば、Speed curve という名前の Animation Data アイテムを作成し、3 つの異なるセグメントを定義する 4 つのキーフレームポイントを含めます。キーフレームを次の場所に作成します:
- Time 0 と Value 30
- Time 100 を Value 180 に
- Time 260 と Value 300
- Time 320 を Value 330 に変更
これらのキーフレームを使用して、それぞれ異なる速度での速度計の針の回転角度を設定します。例えば、速度が100のとき、針の回転を180度に設定します。
Node Tree で、前のステップで Animation Data アイテムに作成した区分的関数を使用したいプロパティのノードを選択または作成します。

例えば、スピードニードルを作成するには、Empty Node 3D ノードを作成し、それに Speed Needle という名前を付け、スピードニードルを表示する Model ノードを追加し、Model を配置して、Empty Node 3D を使用してニードルに沿った所望の点を中心に Model を回転させることができます。ノードの原点の編集を参照してください。
Library > Property Types で、針の位置を制御するために使用するプロパティタイプを作成します。

例えば、Speed という名前のプロパティタイプを作成し、Upper Bound プロパティを320に設定します。プロパティタイプを作成すると、Kanzi Studio はデフォルトでスライダーエディターを持つカスタムフロートプロパティタイプを作成します。
Node Tree で、速度針を表す Empty Node 3D ノードを選択し、Properties で前のステップで作成したプロパティタイプを追加します。
Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property と Property Field をプロパティとプロパティフィールドに設定し、バインディング内の式でスピードニードルを配置します。
  
  たとえば、以下を設定します。
  - Property から Render Transformation へ
  - Property Field から Rotation へ
    
    アニメーション化したい各プロパティフィールドに対してバインディングを作成してください。
- Expression を、区分的関数を使用して速度針の位置変化をアニメーション化する式にします。
  
  animate 関数を使用して、針の位置を制御するために使用するプロパティタイプを、最初のステップで作成した Animation Data アイテムで定義した区分的関数にバインドします。Animate を参照してください。
  
  Animation Data アイテムを指すには、次のいずれかを使用します。
  - リソースID。リソースディクショナリにリソースを追加するを参照してください。
  - Kzb URL。リソースのkzb URLを取得するには、Library でリソースを右クリックし、Copy .kzb URL を選択します。
  例：
```
createRotationY(-animate({@./Speed}, "kzb://cluster/Animation Data/Speed curve"))
```
Save をクリックします。

Speed Needle ノードの Speed プロパティの値を変更すると、針が動きます。Animation Data アイテム Speed curve で定義した区分的関数が針の回転を設定します。針は次のように動きます:
- Speed プロパティの値が0から100の間にあるときの最大増分
- Speed プロパティの値が100から260の間にある場合の小さな増分
- Speed プロパティの値が260から320の間にある場合の最小増分

バインディングで動的 kzb URL を作成する¶

バインディング式で、プロジェクトに含まれるリソースの kzb URL を動的に作成できます。たとえば、次のようなバインディングを作成できます:

データソースからのデータに基づいて、テクスチャのkzb URLを作成します。
アプリケーション内の画像を設定して、そのテクスチャを使用します。

例として、テクスチャの kzb URL を動的に作成するバインディングを作成するには、以下のようにします。

Node Tree で、プロジェクト内のリソースのkzb URLを作成するための入力として使用したいプロパティタイプを持つノードを作成または選択します。カスタムプロパティタイプやデータソースを使用することもできます。プロパティタイプを作成するおよびデータソースを使用するを参照してください。

例えば、Asset Packages > Factory Content から Slider を使用して、スライダーの値に基づいてプロジェクト内のテクスチャの kzb URL を動的に作成します。Factory Content のスライダーを使用してを参照してください。

プロジェクトに Image0 から Image10 という名前のテクスチャが含まれている場合、スライダーの値に基づいて Image ノードの Image プロパティをそれらのテクスチャのいずれかに設定します。例えば、スライダーの値が5.0のとき、Image プロパティを Image5 テクスチャに設定します。
Node Tree で、動的に作成されたkzb URLにバインドしたいプロパティを持つノードを作成または選択し、Properties で + Add Binding をクリックします。

例えば、Image ノードを作成し、そのノードにバインディングを追加します。
Binding Editor セット内で：
- 動的なkzb URLにバインドしたいプロパティに Property します。
  
  たとえば、それを Image に設定します。
- プロジェクト内のリソースへのkzb URLを作成するバインディング式に Expression を使用します。
  
  例えば、Property を Image に設定する場合、最初のステップで作成したスライダーの値に基づいてテクスチャの kzb URL を作成する式を使用します。
```
"kzb://<projectname>/Textures/Image" + string(int({@../Slider/RangeConcept.Value}))
```
Save をクリックします。

Image プロパティの値を、プロジェクト内のテクスチャを指す kzb URL の静的部分と、スライダーから来る動的部分にバインドします。2つの部分を連結する前に、スライダーから来る float 値を整数にキャストし、それを文字列に変換する必要があります。スライダーの値を変更すると、Image プロパティの値も変わります。

ヒント

リソースのkzb URLを取得するには、Library でリソースを右クリックし、Copy .kzb URL を選択します。

Preview でスライダーノブを動かすと、スライダーの値に基づいて Image ノードが表示するテクスチャが変わります。

バインディングを使用してテキストを分割する¶

バインディングを使用してテキストを分割し、テキストの各部分にアクセスすることができます。たとえば、データソースから取得したランタイムデータを分割します。データソースを使用するを参照してください。

次のいずれかを選択できます。

Node Tree 内のノードの順序に従って、複数のノード内のテキストの部分を表示します。

テキストパーツのコレクションをプロパティに保存し、テキストの一部を表示したい各ノードで、そのコレクションのイテレーションを進めるためにバインディングを使用し、イテレータの最初の要素を表示します。

バインディングは Kanzi がそれらのバインディングを実行する順序でテキストパーツのコレクションを反復するため、Node Tree 内のノードの順序が各ノードがテキストのどの部分を表示するかを決定します。

このようにテキストの一部を表示する場合、Kanzi Studio でテキストの一部を表示するノードのプロパティ値を変更すると、Kanzi Studio Preview がそのノード内のバインディングを再インスタンス化し、分割したテキストの終わりを超えてイテレーションを進めます。これが発生した場合、正しいテキストを表示するには Preview を再起動する必要があります。

ノードツリーの順序で複数のノードにテキスト部分を表示するを参照してください。
テキストの部分を複数のノードで任意の順序で表示します。

テキストの部分の位置を別々のプロパティに保存し、特定のプロパティに保存された位置からテキストの部分を表示したい各ノードで、バインディングを使用してテキストの部分を表示します。

任意の順序で複数のノードにテキスト部分を表示するを参照してください。

ノードツリーの順序で複数のノードにテキスト部分を表示する¶

テキストを分割すると、その部分を Node Tree 内のノードの順序に従って複数のノードに表示できます。

この例では、連絡先情報を含むテキストを分割し、ファーストネーム、ラストネーム、電話番号を異なる Text Block ノードに表示します。この例では、Kanzi Studio で作成するカスタムテキストプロパティを使用していますが、他のソースからのテキストを使用することもできます。データソースからデータを受け取る連絡先リストの作成方法については、チュートリアル: Grid List Box を使用して連絡先リストを作成するを参照してください。

テキストを分割して、その部分を Node Tree 内のノードの順序によって決定された順序で複数のノードに表示するには：

分割したいテキストを作成します。

例：
1. Library Alt を押しながら右クリック Property Types で、Property Type を選択し、New Property Type ウィンドウで Data Type を Text に設定します。
2. Prefabs で、連絡先エントリのレイアウトを定義するために使用する Dock Layout 2D ノードを作成し、Library から作成したテキストプロパティタイプを Dock Layout 2D ノードにドラッグします。
3. Prefabs で Dock Layout 2D ノードを選択し、Properties でカスタムテキストプロパティを分割したいテキストに設定します。テキスト内で特定の文字を使用してテキストの部分を分けます。
  
  この例では、スペースをセパレーターとして使用します。
テキストの部分を表示したいノードを作成し、それらのノードのレイアウトと外観を設定します。

例えば、Dock Layout 2D ノード内の Prefabs で、分割したいテキストのすべての部分を表示するために必要なだけの Text Block 2D ノードを作成して配置し、各 Text Block 2D ノードの外観を設定します。Dock Layout ノードを使用すると Text Block ノードを使用するを参照してください。

Library > Property Types でプロパティタイプを作成し、Data Type を Range に設定します。

レンジプロパティは、値のコレクションを格納します。
テキストを分割してその部分を範囲に格納するバインディングを作成します。

例えば、Prefabs で Dock Layout 2D ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property から MyRangeProperty へ
- Expression へ
```
splitString({@./MyTextProperty}, " ")
```
  splitString 関数は、テキスト文字列をサブストリングのコレクションに分割し、そのコレクションを範囲イテレータとして返します。
Save をクリックします。

このバインディングを使用すると、MyTextProperty プロパティ内のテキストをスペースで区切って分割し、そのテキストを MyRangeProperty 範囲プロパティにテキストの部分のコレクションとして格納します。
Prefabs で最初の Text Block 2D ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Property から Text へ
- Expression へ
```
string(evaluate({@../MyRangeProperty}))
```
  評価する関数は、範囲のイテレーションを進めます。評価を文字列に変換することで、範囲の最初の要素を読み取ります。
Save をクリックします。

このバインディングを使用すると、MyRangeProperty のテキストの最初の部分を取得できます。
Properties で、前のステップで追加したバインディングを右クリックし、Copy Binding を選択します。
作成した他の Text Block 2D ノードにバインディングを貼り付けます。

各 Text Block 2D ノードで、同じバインディングを使用して範囲のイテレーションを進めます。この方法で、範囲内のテキストの部分を順に進め、各 Text Block 2D ノードで1つの部分を表示します。

Text Block 2D ノード内のバインディングは、Kanzi がそれらのバインディングを実行する順序で範囲を反復処理します。

Kanzi Studio で Text Block 2D ノードのいずれかのプロパティ値を変更すると、Kanzi がそのノード内のバインディングを再インスタンス化し、分割したテキストの終わりを超えて範囲のイテレーションを進めます。正しいテキストを表示するには、Preview を再起動してください。

任意の順序で複数のノードにテキスト部分を表示する¶

テキストを分割すると、それらの部分を任意の順序で複数のノードに表示することができます。

テキストを複数の部分に分割し、それらの部分を複数のノードで表示する順序を設定するには:

分割したいテキストを作成します。

例：
1. Library Alt を押しながら右クリック Property Types で、Property Type を選択し、New Property Type ウィンドウで Data Type を Text に設定します。
2. Prefabs で、連絡先エントリのレイアウトを定義するために使用する Dock Layout 2D ノードを作成し、Library から作成したテキストプロパティタイプを Dock Layout 2D ノードにドラッグします。
3. Prefabs で Dock Layout 2D ノードを選択し、Properties でカスタムテキストプロパティを分割したいテキストに設定します。テキスト内で特定の文字を使用してテキストの部分を分けます。
  
  この例では、スペースをセパレーターとして使用します。
テキストの部分を表示したいノードを作成し、それらのノードのレイアウトと外観を設定します。

例えば、Dock Layout 2D ノード内の Prefabs で、分割したいテキストのすべての部分を表示するために必要なだけの Text Block 2D ノードを作成して配置し、各 Text Block 2D ノードの外観を設定します。Dock Layout ノードを使用すると Text Block ノードを使用するを参照してください。

Library > Property Types でプロパティタイプを作成し、Data Type を Range に設定します。

レンジプロパティは、値のコレクションを格納します。
Library > Property Types で、分割したいテキストの各部分に対してプロパティタイプを作成するために、必要な回数だけ範囲プロパティタイプを複製します。
テキストを分割して各部分をレンジプロパティに格納するバインディングを作成します。

例：
1. Prefabs で Dock Layout 2D ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property を最初に作成した範囲プロパティに
    
    たとえば、それを LocationRange1 に設定します。
  - Expression へ
    evaluate(splitString({@./MyTextProperty}, " "))
    splitString 関数を使用して、MyTextProperty プロパティ内のテキストをサブストリングのコレクションに分割し、そのコレクションを範囲として返します。その後、評価する関数を使用して、その範囲のイテレーションを進めます。
  Save をクリックします。
  
  このバインディングを使用すると、LocationRange1 プロパティに、分割したテキストのすべての部分を含む範囲イテレータを格納し、そのイテレータの最初の要素を指します。
2. 別のバインディングを追加し、Binding Editor に設定します。
  - Property を作成した2番目の範囲プロパティに
    
    たとえば、それを LocationRange2 に設定します。
  - Expression は、最初の範囲プロパティに保存した範囲イテレータの次の位置を返します。
    
    たとえば、データ型として四元数を使用する
    evaluate({./LocationRange1})
  Save をクリックします。
  
  このバインディングを使用すると、LocationRange2 の範囲プロパティに、分割したテキストの最初の部分を除くすべてを含む範囲イテレータを格納し、そのイテレータの最初の要素を指します。
3. 作成した各範囲プロパティタイプにバインディングを追加し、前の範囲プロパティに格納した範囲イテレータのイテレーションを進めるようにバインディング式を設定します。
  
  例えば、LocationRange3 を、LocationRange2 プロパティに格納した範囲イテレータのイテレーションを進める式にバインドする、という具合です。
特定の範囲の場所から最初の要素を表示するバインディングを、テキストの一部を表示したい各ノードに追加します。

例：
1. Prefabs で最初の Text Block 2D ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
  - Property から Text へ
  - Expression へ
    string({../LocationRange1})
    範囲の評価を文字列に変換することによって、範囲の最初の要素を読み取ります。
  Save をクリックします。
  
  このバインディングを使用すると、LocationRange1 プロパティのテキストの最初の部分を取得できます。
2. 前のステップを各 Text Block 2D ノードに対して繰り返しますが、バインディング式で読み取る範囲プロパティを変更します。

プロパティ値の表示形式設定¶

format バインディング関数を使用して、Text Block ノードがプロパティ値をどのように表示するかを設定します。フォーマット (Format) を参照してください。

format を使用すると、次のことができます。

ノードプロパティまたはデータソースから値をテキスト文字列に挿入します。
関数に渡す値がフォーマットされたテキストに表示される順序を設定します。ローカライズされた文字列でテキストの順序を設定するを参照してください。
浮動小数点値を特定の小数点以下の桁数に切り捨てます。
文字列内の書式設定されたテキストに最小幅を設定します。
コンテンツが最小幅よりも少ないスペースを占める場合、残りのスペースをスペースまたはゼロで埋めます。プロパティ値の表示形式設定を参照してください。
フォーマットされたテキストを、利用可能なスペース内で左揃えまたは右揃えにします。

プロパティ値の表示をフォーマットするには:

Node Tree で、書式設定したいテキストを持つ Text Block ノードを作成します。

例えば、Text Block 2D ノードを作成し、それに Stopwatch という名前を付けます。

この例では、format バインディング関数を使用して、分と秒を先頭にゼロを付けて表示するストップウォッチを作成します。

Text Block ノードを使用するを参照してください。
Library > Property Types で、Data Type が Integer であるプロパティタイプを作成します。前のステップで作成したノードにプロパティタイプを追加します。

例えば、Time というプロパティタイプを作成し、それを Stopwatch ノードに追加します。

このプロパティタイプを使用して、ストップウォッチの時間を保持します。

プロパティタイプを作成するを参照してください。
ストップウォッチの時間を増やすには:
1. Node Tree で、ストップウォッチの時間を表示するノードを選択します。Node Components で、Alt を押しながら右クリック Animation を行い、Int Value Accumulator を選択します。
2. Create Int Value Accumulator ダイアログで、Target Property Type をこの手順で以前に作成し、このノードに追加した中間プロパティタイプに設定します。
3. Node Components の Value Accumulator 設定で、次を設定します:
  - Increment Size を 1 に
  - Minimum Value を 0 に
  - Maximum Value から 3599 まで
  - Autoplay を有効にする
  - Bound Type から Loop へ
  - Increment Time Interval から 1000 まで
  これらの設定により、0からカウントを開始し、59分59秒までカウントし、その時間に達すると自動的に再スタートするストップウォッチ用のValue Accumulatorを構成します。
プロパティタイプの値を時間とともに増加させる方法を学ぶには、プロパティタイプの値をインクリメントするを参照してください。
Node Tree でストップウォッチの時間を表示するノードを選択します。Properties で + Add Binding をクリックし、Binding Editor で以下を設定します。
- Property から Text へ
- Expression へ
```
# Store the intermediate property value that tracks the elapsed seconds.
seconds = {@./MyApplication.Time}

# To get the number of minutes, divide seconds by 60.
minutes = seconds / 60

# Use the format function to pad empty space with zeroes and set the width
# to two characters.
# Use the modulo function to show seconds as a value between 0 and 59.
format("{:02}:{:02}", minutes, mod(seconds,60))
```
Save をクリックします。

プレースホルダの利用可能なフォーマットルールについて学ぶには、ログメッセージ引数フォーマット仕様を参照してください。モジュロ関数の使用に関する情報については、mod（モジュロ）を参照してください。

Preview では、ストップウォッチが自動的にカウントを開始します。分または秒のいずれかが一桁の値の場合、format 関数は値を先頭にゼロを表示するようにフォーマットします。

ストップウォッチの開始、一時停止、再開、および停止のためのコントロールを追加するには、ストップウォッチの作成を参照してください。

プロパティ継承の代替手段としてバインディングを使用する¶

バインディングをプロパティ継承の代替として使用できます。プロパティ継承を使用して、親でプロパティを定義し、それを子ノードに継承させることができますが、これはプロパティが継承可能であり、すべての子ノードにプロパティを継承させることが許容される場合にのみ機能します。プロパティシステムを参照してください。

プロパティ継承の代替手段としてバインディングを使用するには:

カスタムプロパティを作成し、バインディングの作成対象となるノードにそれを追加します。
Node Tree でバインディングを追加したいノードを選択し、Properties で + Add Binding をクリックします。
Binding Editor セット内で：
1. Property と Property Field をバインドしたいプロパティと属性にします。
2. Expression エディターで、この手順の最初に作成したカスタムプロパティを含めるための式を入力します。
3. Save をクリックします。

API でバインディングを使用する¶

詳細については、Binding クラスを参照してください。