チュートリアル: スライダーの作成¶
このチュートリアルでは、Kanzi Studio でスライダーを作成する方法を学びます。
このチュートリアルを完了すると、Kanzi スライダーの構造を理解し、自分自身のスライダーを作成することができます。既製のスライダーを使用して修正したい場合は、Kanzi Studio ファクトリーコンテンツのスライダーを使用してください。Slider を参照してください。
このビデオはチュートリアルの結果を示しています。
このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Slider チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。完成したチュートリアルは <KanziWorkspace>/Tutorials/Slider/Completed ディレクトリにあります。
スライダーの作成¶
このセクションでは、スライダーを作成する方法を学びます。
スライダーを作成するには、
Kanzi Studio Quick Start ウィンドウで New をクリックします。Quick Start ウィンドウの New タブで、以下を行います。
Project Name を Slider に設定します
Kanzi Studio project テンプレートプロジェクトを選択します
このテンプレートを使用して、Kanzi Engine APIを使用せずに Kanzi アプリケーションを作成します。
Node Tree で Viewport 2D ノードを削除します。
このチュートリアルでは3Dコンテンツを作成しないため、Viewport 2D ノードを削除できます。
Prefabs で
をクリックし、Slider 2D ノードを作成します。スライダーをプレハブとして作成することで、再利用することができます。
Slider 2D プレハブを Node Tree にドラッグし、RootNode ノードにドロップします。
この方法で、ノードツリー内にプレハブをインスタンス化し、Preview でスライダーの作成を追跡できます。
Preview で
をクリックして Analyze モードに入り、
を右クリックし、選択します:Debug objects は、ライト、カメラ、レイアウトノードなどのビジュアライゼーションノードを表示します。
Borders of 2D nodes は、2Dノードの境界をストライプの線で示します。
この方法で、スライダーを作成する際にプロパティとその値がノードにどのように影響するかを Preview で確認できます。
Prefabs で Slider 2D ノードを選択し、Properties で追加して設定します。
Layout Width から 600 まで
Layout Height から 60 まで
Horizontal Alignment から Center へ
Vertical Alignment から Center へ
この方法で、スライダーのサイズと配置を設定します。これには、レール、ノブ、およびスライダーの両端におけるノブの位置が含まれます。
スライダーノブが移動するレールの視覚的表現を作成します。
Slider 2D プレハブの Prefabs 内に Content Layout 2D ノードを作成し、Rail と名付けます。
Rail ノードは、スライダーノブが移動するレールを視覚的に表現します。例えば、レールの視覚的な表現を作成するには、Content Layout 2D ノード、Image ノード、またはレイアウト内で複数の Image ノードや Empty Node 2D ノードを使用できます。
Prefabs で Rail ノードを選択し、Properties で追加して設定します。
Layout Width を500に
Layout Height から25まで
Horizontal Alignment から Center へ
Vertical Alignment から Center へ
この方法で、スライダーのレールのサイズと配置を設定します。スライダーのレールは親の Slider 2D ノードよりも狭く短くなっており、スライダーのノブの中心が両側のレールの端まで移動できるようになっています。
Prefabs で Rail ノードを選択し、Properties で Background Brush プロパティを追加し、+ Color Brush を選択して、ブラシに Gray Brush という名前を付けます。
Background Brush プロパティの横にある
をクリックし、Lightness (L) プロパティフィールドを105に設定します。
トラジェクトリを作成して、Kanzi がレールの視覚的表現に沿ってスライダーノブを移動させます。
Slider 2D プレハブの Prefabs 内に Trajectory Layout 2D ノードを作成し、Properties に追加して設定します。
Layout Width を500に
Layout Height から25まで
Horizontal Alignment から Center へ
Vertical Alignment から Center へ
これらのプロパティの値は、スライダーのレールの視覚的表現と一致している必要があります。
Prefabs で Trajectory Layout 2D ノードを選択し、Trajectory プロパティで + Line Trajectory を選択します。
Trajectory プロパティの横にある
をクリックして、次のように設定します。Length から 500 まで
レールのビジュアル表現の Layout Width プロパティと同じ値に Length プロパティを設定します。
Direction X プロパティフィールドを1に、他のすべてのプロパティフィールドを0に設定します。
この方法で、スライダーの軌道をx軸に設定し、スライダーのノブがレール上を水平に移動するようにします。
Kanzi がスライダーのレールとして使用するトラジェクトリをスライダーに伝えるためのエイリアスを作成します。
Prefabs で Slider 2D プレハブを選択し、Dictionaries ウィンドウで + Add Resource をクリックし、Create > Alias を選択します。
エイリアス $layout を命名し、Slider 2D プレハブ内の Trajectory Layout 2D ノードを指すように設定します。
Kanzi は、このエイリアスを使用して、スライダーノブを移動させるトラジェクトリをスライダーに指示します。
スライダーノブを作成します:
Prefabs の Trajectory Layout 2D で Content Layout 2D ノードを作成し、それに Knob という名前を付け、Properties で追加して設定します。
Layout Width から40まで
Layout Height から 60 まで
このノードをスライダーノブの視覚的表現として使用します。
Knob ノードに Background Brush プロパティを追加し、それを + Color Brush に設定して、ブラシに White Brush という名前を付けます。
Background Brush プロパティの横にある
をクリックし、Lightness (L) プロパティフィールドを 255 に設定します。
Knob ノードの Prefabs 内で Empty Node 2D を作成し、Background Brush プロパティを追加して、+ Color Brush に設定し、ブラシに Blue Brush という名前を付けます。
Background Brush プロパティの横にある
をクリックし、次のプロパティフィールドを設定します。Hue (H) を 155 に
Saturation (S) から 216 まで
Lightness (L) を156に
Prefabs で Knob ノードを選択し、Properties で追加して設定します。
Horizontal Padding Left から 3 まで
Horizontal Padding Right から 3 まで
Vertical Padding Top から 3 まで
Vertical Padding Bottom から 3 まで
Prefabs で Knob ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Trajectory Override Offset へ
Expression へ
{@../../RangeConcept.NormalizedValue}
Save をクリックします。
このバインディングにより、スライダーのノブがスライダーのレールを定義するトラジェクトリ上を移動します。
Preview のクリックで:
Analyze モードを終了するには、
を使用します。
を使用して Interact モードに入る
Preview では、スライダーのノブをレールに沿ってドラッグできるようになりました。
スライダーの値を表示する¶
このセクションでは、スライダーの最小値、最大値、ステップ、および開始値を設定し、スライダーの値を表示する方法を学びます。
スライダーの値を表示するには:
Prefabs で Slider 2D プレハブを選択し、Range カテゴリーの Properties から追加して設定します。
Minimum Value を 0 に
このようにして、スライダーの最低値を設定します。
Maximum Value から 20 まで
このようにして、スライダーの最高値を設定します。
Step Value を 1 に
これにより、スライダーノブが移動する際の増分が設定されます。
Value を 0 に
この方法でスライダーのノブの初期位置を設定します。Minimum Value プロパティと Maximum Value プロパティを設定しない場合、範囲は0から1の間になります。
Slider 2D プレハブの Prefabs に Text Block 2D ノードを作成し、それに Slider Value という名前を付け、Properties で Vertical Alignment プロパティを追加して、Center に設定します。
Prefabs で Slider Value ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Text へ
Expression へ
INT({@../RangeConcept.Value})
Save をクリックします。
この方法で、Slider Value ノードをスライダーの現在の値を表示するように設定します。
ヒント
プロパティを右クリックして Create Binding を選択すると、そのプロパティのバインディングの作成を開始できます。
この方法では、プロパティが自動的に Binding Editor に追加されます。
Preview でスライダーノブをドラッグすると、Slider Value ノードがスライダーの現在の値を表示します。
ヒント
スライダーの Value プロパティは、別のプロパティとソースへのバインディングまたは双方向バインディングで制御できます。プロパティでスライダーの値を更新する を参照してください。
次の作業¶
このチュートリアルでは、スライダーを作成する方法を学びました。これで、あなたは以下のことができます:
ユーザーの操作に基づいて外観が変わるボタンの作成方法を学びます。チュートリアル: ボタンを作成する を参照してください。
トグルボタンの作成方法を学びましょう。チュートリアル: トグルボタンの作成 をご覧ください。
他のチュートリアルを完了してください。チュートリアル を参照してください。
関連項目¶
スライダーの使用方法について詳しくは、Slider ノードを使用する を参照してください。
トラジェクトリについて詳しく知るには、トラジェクトリ (Trajectories) を参照してください。
バインディングの使用方法について詳しくは、バインディングの使用 および バインディング式リファレンス を参照してください。
プレハブについて詳しく知るには、ノードプレハブの使用 を参照してください。
Kanzi アプリケーションの作成について詳しくは、チュートリアル を参照してください。