チュートリアル: トグルボタンの作成¶
このチュートリアルでは、Kanzi Studio でトグルボタンを作成する方法を学びます。
このビデオはチュートリアルの結果を示しています。
このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Toggle button チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Toggle button/Startディレクトリにあるチュートリアルの開始地点プロジェクト。<KanziWorkspace>/Tutorials/Toggle button/Completedディレクトリにある完成したチュートリアル。
開始プロジェクトの内容¶
スタートポイントとなるプロジェクトには、トグルボタンを作成するために使用する画像が含まれています。画像は Assets ウィンドウで確認できます。
Toggle Button 2D ノードを作成する¶
このセクションでは、Toggle Button 2D ノードを作成して配置します。
Toggle Button 2D ノードを作成するには、
Kanzi Studio Quick Start ウィンドウで、Examples をクリックします。Toggle button チュートリアルの横にある Open をクリックし、Start project を選択します。
Node Tree で、Alt を押しながら右クリック の RootPage ノードを選択し、Toggle Button 2D を選択します。
Toggle Button 2D ノードを作成すると、そのノードには視覚的な外観がありません。このチュートリアルでは、トグルボタンの外観を設定します。
Assets ウィンドウから、ToggleButtonBackground 画像を Node Tree にドラッグし、Toggle Button 2D ノードにドロップします。
Node Tree で、Toggle Button 2D ノードを選択し、Preview で Node tool
を選択し、中央の四角い 
をクリックします。この方法で、Horizontal Alignment と Vertical Alignment プロパティを Center に設定し、Toggle Button 2D ノードを RootPage の中央に配置します。
トグルボタンの状態を作成する¶
このセクションでは、ステートマネージャーを使用して、トグルボタンがオンおよびオフになったときの外観を設定します。
トグルボタンのステートを作成するには、以下のようにします。
Node Tree で、Toggle Button 2D ノードを選択します。State Tools で、Create State Manager をクリックします。
Kanzi Studio はステートマネージャーを作成し、それを Toggle Button 2D ノードに割り当てます。
State Tools で、Create State を2回クリックして2つのステートを作成します。各ステートの名前をダブルクリックして、ステートの名前を変更します。
たとえば、ステートの名前を付けます:
On
Off
On ステートは、トグルボタンがオンになっているときのアプリケーションの状態を定義し、Off ステートは、トグルボタンがオフになっているときの状態を定義します。
トグルボタンインジケーターを追加して配置します。
Node Tree の Alt を押しながら右クリック で Toggle Button 2D ノードを選択し、Image を選択して Lock と名付けます。Properties で、Image プロパティを Lock 画像に設定します。
Preview で、Node tool
の中で 
をクリックし、ターゲット変換のために Render Transformation を選択します。以下の方法で変換を適用することができます。
レイアウト変換では、レイアウトパスの適用前にアイテムを変換します。
レンダー変換では、レイアウトパス適用後、アイテムをレンダリングする前に、アイテムを変換します。
Render Transformation を常に使用してください。ただし、レイアウトを再計算する必要があるとわかっている場合を除きます。
Preview で Node tool
を選択し、
をクリックしてノードやガイドへのスナップを無効にします。スナッピングを無効にすると、Node tool を使用して Preview 内でノードを移動させることができ、ノードやガイドにスナップしなくなります。
Node tool を使用して、Lock ノードをトグルボタンの左側に配置します。
ヒント
Preview のズームレベルは、Preview の右上隅で調整できます。
State Tools で、On の状態で
をクリックして、トグルボタンインジケーターの現在の位置をその状態に保存します。
Preview で、トグルボタンのインジケーターをトグルボタンの右側に配置するために、Node tool
を使用します。ヒント
ノードを真の水平または垂直線で移動するには、Node tool を持つノードをドラッグする際に Shift キーを押し続けます。
Node Tree で、Lock ノードを選択します。Properties で、Image プロパティを Unlock 画像に設定します。
この方法で、トグルボタンが Unlock 状態のときのトグルボタンインジケーターの外観を設定します。
State Tools の Off ステートで、
をクリックして、トグルボタンインジケーターの現在の位置をそのステートに保存します。
State Tools で、<No Controller Property> ドロップダウンメニューをクリックし、Toggle Button > Toggle State プロパティを選択します。
ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。
State Tools で、各ステートのコントローラープロパティの値を設定します。
On ステートの値を 1 に設定します。
Off ステートでは、値を 0 に設定したままにしてください。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
Preview で、
をクリックして Interact モードに入ります。
Preview でトグルボタンをクリックすると、Toggle Button 2D ノードのステートマネージャーで定義した On と Off の状態を切り替えます。
トグルボタンを微調整する¶
このセクションでは、トグルボタンを微調整して次のようにします。
トグルボタンの状態を示すラベルを追加します
トグルボタンの状態間の遷移を調整する
トグルボタンを微調整するには、
トグルボタンの状態を示すラベルを追加します。
Node Tree で、Alt を押しながら右クリック Toggle Button 2D ノードを選択し、Text Block 2D を選択します。Text Block 2D ノードを Lock ノードの上にドラッグします。
Properties に追加して設定します。
Font Size から30まで
Text から Unlock へ
Node Tree で、Toggle Button 2D ノードを選択します。State Tools で、Edit State Manager をクリックします。
State Tools で、On ステートをクリックし、トグルボタンラベルを配置します。
Preview で、Node tool
を選択し、Text Block 2D ノードを右クリックして、Select > Text Block 2D を選択します。
Node tool
を使用して、Text Block 2D ノードをトグルボタンの右側に配置します。
State Tools の On ステートで、
をクリックします。
State Tools で、Off ステートをクリックし、トグルボタンのラベルを調整します。
Properties で、Text プロパティを Lock に設定します。
Preview で、Text Block 2D をトグルボタンの左側に配置します。
State Tools の Off ステートで、
をクリックします。
State Tools で、Any -> Any トランジションをクリックし、State Transition Settings で設定します。
Duration を350に
Direction から Bidirectional へ
この方法で、いずれかの状態から遷移する際にトランジションを適用します。
Easing Function から Exponential へ
Easing Mode から Easing out へ
Save をクリックします。
この方法で、トグルボタンがその状態間を遷移するのにかかる時間と、遷移の外観を変更します。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
Preview で、
をクリックして Interact モードに入ります。
Preview でトグルボタンをクリックすると、ラベルと修正されたトランジションを含む On と Off の状態を切り替えます。
次の作業¶
このチュートリアルでは、トグルボタンの作成方法を学習しました。これで、あなたは次のことができます:
ユーザーの操作に基づいて外観が変わるボタンの作成方法を学びます。チュートリアル: ボタンを作成する を参照してください。
さまざまな種類のボタンノードとその使用方法について詳しく学びましょう。ボタン を参照してください。
スライダーの作成方法を学びましょう。チュートリアル: スライダーの作成 を参照してください。
ステートマネージャーの遷移を学びましょう。ステートマネージャー (State Manager) を参照してください。
他のチュートリアルを完了してください。チュートリアル を参照してください。
関連項目¶
Kanzi ステートマネージャーについて詳しく知るには、ステートマネージャー (State Manager) を参照してください。
さまざまな種類のボタンノードとその使用方法について詳しくは、ボタン を参照してください。
Kanzi アプリケーションの作成について詳しくは、チュートリアル を参照してください。