Button ノードを使用する¶

Button ノードを使用して、クリック、タップ、またはキーボードのキーを押すことによるインタラクティブな操作を作成します。

Button 3D を使用して3Dボタンを作成し、Button 2D を使用して2Dボタンを作成します。

Kanzi を使用すると、次の方法でボタンを作成できます。

ステートマネージャー
トリガーとアクション

2つのアプローチの違いは、ステートマネージャーを使用する場合、ボタンがどの状態にあるかを常に把握できることです。例えば、トリガーとアクションで作成されたボタンをユーザーがクリックすると、アクションはメッセージを送信しますが、アプリケーションはボタンの状態を認識していません。ステートマネージャーを使用すると、ボタンがどの状態にあるかを常に確認でき、必要に応じて状態を元に戻すこともできます。ステートマネージャー (State Managers) を使用する場合を参照してください。

トリガーとアクションを使用してボタンを作成し、ユーザーがボタンの視覚的表現をクリックすると、そのアクションはメッセージを生成し、そのメッセージがボタンノードに送られます。そこで、そのメッセージに対する動作を定義できます。

Button ノードを作成すると、Kanzi Studio はデフォルトでそのノードに Button: Click トリガーを追加します。

Button ノードは Focusable プロパティが有効になっており、デフォルトでフォーカスを受け取ることができます。Button ノードにフォーカスがある場合、そのボタンを押すには、デフォルトのキーボードキー Space、Enter、および Enter をテンキーで使用できます。

フォーカスの使用を参照してください。

Button ノードに他のトリガーを追加することもできます。例えば、ユーザーがマウスボタンを押したときやクリックをキャンセルしたときにトリガーされるメッセージを追加できます。トリガーの使用を参照してください。

ボタンを作成すると、視覚的な形状はありません。ボタンを表示するには、コンテンツを持つノードをボタンに追加します。Button 2D ノードを表示するには、背景をブラシで塗りつぶすことでも可能です。2Dノードの外観の調整を参照してください。

Kanzi Factory Content アセットパッケージには、カスタマイズ可能な2Dボタンが含まれています。Button を参照してください。

ボタンの作成方法を学ぶには、チュートリアル: ボタンを作成するを完了してください。

ボタンを作成する¶

ボタンを作成するには：

Prefabs または Node Tree Alt を押しながら右クリックで、ボタンを作成したいノードを選択し、Button 3D または Button 2D のいずれかを選択します。

3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
ボタンのコンテンツと外観を定義します。

例えば、Button 2D ノードを作成した場合、ボタンラベルを表示する Text Block 2D ノードを追加し、Button 2D ノードで Layout Width、Layout Height、および Background Brush プロパティを設定します。2Dノードの外観の調整を参照してください。

ヒント

複数のコンテンツノードを含むボタンのレイアウトを作成するには、Content Layout ノードを使用します。Content Layout ノードを使用するを参照してください。
Prefabs または Node Tree で Button ノードを選択し、Node Components > Triggers セクションの Button: Click メッセージトリガー Alt を押しながら右クリック Actions で、ユーザーがボタンを押したときに実行したいアクションを選択します。

例えば、Write Log アクションを選択し、その Log Text プロパティを <Name> に設定します。Preview でボタンのビジュアル表現をクリックすると、Write Log アクションがそのノードの名前を Log ウィンドウに書き込みます。

Write Log アクションについて詳しく知るには、Write Log アクションを使用するを参照してください。
（オプション） Kanzi に付属する Button トリガーを使用して、Button ノードの動作を定義します。トリガーの使用と Button ノードトリガーを参照してください。

Button ノードの動作を制御する¶

Kanzi で、Button ノードの動作を制御するには、次のことができます。

Button ノードがユーザー入力にどのように反応するかを定義するには、ステートマネージャーを使用します。ステートマネージャーを使用してボタンの状態を設定すると Button ノードが使用中かどうかを制御するを参照してください。
Kanzi に付属する Button トリガーを使用して、Button ノードの動作を定義します。Button トリガーを使用するを参照してください。
ユーザーが Button ノードをダブルクリックまたはダブルタップできるようにします。Button ノードでダブルクリックジェスチャーを有効にするを参照してください。

ステートマネージャーを使用してボタンの状態を設定する¶

Button ノードがユーザー入力にどのように反応するかを定義するために、ステートマネージャーを使用します。たとえば、ユーザーがボタンを押したり離したりしたときに、ボタンがどのように見えるかを設定できます。ステートマネージャーの使用方法については、ステートマネージャー (State Managers) を使用する場合を参照してください。ステートマネージャーを使用してボタンを作成する方法の詳細については、チュートリアル: ボタンを作成するを参照してください。

ボタンの状態を設定するためにステートマネージャーを使用するには:

Node Tree で、ステートを作成したい Button ノードを選択し、State Tools でそのノードのためのステートマネージャーを作成します。
2つのステートを作成します。1つはボタンのデフォルトの状態を定義し、もう1つはボタンが押されたときの状態を定義します。

例えば、ステートに Default と Pressed という名前を付けます。
各ステートに対して、Button ノードの外観を設定するプロパティの値を設定します。

例えば、ユーザーが Button 2D ノードを押したときの見た目を設定するには、その Button 2D ノードセット内の Pressed ステートに対して次のように設定します。
- ボタンが押されたときに使用したいブラシに Background Brush を設定します。
- Transform 2D > Render Transformation プロパティ Translation プロパティフィールドをデフォルト状態よりもわずかに大きな値にします。
Button の状態を制御する State Tools の中で、Controller Property を Is Down に設定します。

ステートマネージャーでは、Controller Property として選択したプロパティの値が、ステートグループ内の各ステートがアクティブになる条件を定義します。

ここでは、Is Down プロパティを使用して、そのプロパティの値に基づいて状態に遷移します。

Is Down プロパティは、Button ノードが押された状態か非押された状態かを制御します。
State Tools で、Pressed ステートの Controller Property の値を True に設定します。

この方法で、ボタンが押されたときにアプリケーションが Pressed ステートを使用し、ボタンが押されていないときに Default ステートを使用するように設定します。
State Tools で、Edit State Manager をクリックして State Tools を非アクティブ化します。
（オプション） Kanzi をボタンの状態間で即座に遷移させるには、State Tools で Any -> Any トランジションをクリックし、State Transition Settings で Duration プロパティを 0 に設定し、Save をクリックします。

Preview でボタンをクリックすると、ボタンは Pressed 状態になり、その外観が変わります。マウスボタンを押し続けている間、ボタンは Pressed 状態のままです。マウスボタンを離すと、ボタンは Default 状態に戻ります。

Button ノードが使用中かどうかを制御する¶

Button ノードが使用されているかどうかを制御するには、Input > Enabled プロパティを使用します。無効化された Button ノードは、ボタン押下などのユーザーイベントを発生させません。

ノードの Enabled プロパティを無効にすると、そのノードとその子孫ノードが同じオーバーレイフォーカススコープ内で実質的に無効になります。

ノードが効果的に有効になっているかどうかを確認するには、ステートマネージャーまたはバインディングで Input > Effectively Enabled プロパティを使用します。たとえば、ノードが使用中であるかどうかをユーザーに視覚的に示すために、ステートマネージャーを作成し、そのコントローラープロパティとして Effectively Enabled プロパティを使用します。

ノードが入力にどのように反応するかを制御するを参照してください。

Button トリガーを使用する¶

Kanzi に付属する Button トリガーを使用して、Button ノードの動作を定義します。トリガーの使用方法について詳しくは、トリガーの使用を参照してください。

Cancel トリガーがオフになりました。
- ユーザーが最初にボタンを押し下げ、その後ポインタをボタン領域の外に移動し、ポインタを持ち上げたとき。
- ユーザーが Long Press トリガーを発動したとき。
Button: Click トリガーは、ユーザーがボタンを押し下げてからボタン領域内でポインターを離したときに発動します。
Down トリガーは、ユーザーがボタンを押したときに作動します。
Enter トリガーが発動されました。
- ユーザーがボタンを押し下げたとき。
- ユーザーがボタンを押し下げ、ポインタをボタンエリアの外に移動し、その後ポインタをボタンエリアに戻しながらポインタを押し続けている場合。
Leave トリガーがオフになりました。
- ユーザーがボタンを押し下げてからポインターを持ち上げたとき。
- ユーザーがボタンを押し下げた後、ポインターをボタンエリアの外に移動したとき。
- ユーザーが Long Press トリガーを発動したとき。
Long Press トリガーは、ユーザーがボタンを押し続け、そのボタンの Hold Interval プロパティで定義されたミリ秒数だけ押し続けたときに発動します。

Button ノードでダブルクリックジェスチャーを有効にする¶

Kanzi アプリケーションでユーザーがボタンをダブルクリックまたはダブルタップできるようにするには、ダブルクリックジェスチャーを使用します。ダブルクリックジェスチャーに反応するには、Multi-Click トリガーを使用します。たとえば、ユーザーがそのノードをダブルクリックまたはダブルタップしたときに、Button ノードの外観を変更することができます。

Button ノードでダブルクリックジェスチャーを有効にするには:

Node Tree または Prefabs で、ダブルクリックジェスチャーを有効にしたい Button ノードを選択し、Properties で Input > Double-Click Enabled プロパティを追加して有効にします。

Double-Click Enabled プロパティを有効にすると、Kanzi は Button ノードにダブルクリックメッセージを生成するマルチクリックマニピュレータをインストールします。
Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Multi-Click > Multi-Click を選択します。
Node Components > Triggers Alt を押しながら右クリックの Multi-Click トリガーで、アクションを選択し、アクションを構成します。トリガーの使用とアクションとメッセージのリファレンスを参照してください。