Click Manipulator を使用する¶

Kanzi アプリケーションでユーザーがノードをクリックできるようにするには、Click Manipulator を使用します。

ノードにクリックジェスチャーを有効にすると Kanzi Studio Preview ツールを使用してノードのクリックジェスチャーを有効にするを参照してください。

クリックジェスチャーに反応するには、次を使用できます:

Click Manipulator は Kanzi Studio でトリガーされます。Click Manipulator トリガーを使用するを参照してください。
Kanzi Engine API。Kanzi Engine APIを使用してクリックジェスチャーに反応するを参照してください。

Click Manipulator は、Kanzi アプリケーション内のノードにジェスチャー認識を追加するために使用できる入力マニピュレーターの1つです。入力マニピュレータの使用を参照してください。

ノードにダブルクリックジェスチャーを有効にするには、Multi-Click Manipulator を使用します。Multi-Click Manipulator を使用するを参照してください。

ノードにクリックジェスチャーを有効にする¶

ノードにクリックジェスチャーを有効にするには：

Node Tree で、クリックジェスチャーを有効にしたいノードを作成します。

例えば、Empty Node 2D ノードを作成し、それに ClickNode という名前を付け、ノードにコンテンツを追加します。
Node Tree で前のステップで作成したノードを選択し、Properties で Input > Hit Testable プロパティを追加し、有効に設定します。

このプロパティを有効にすると、ユーザーがノードを選択できるようになります。
Node Components Alt を押しながら右クリック Input Manipulators で、Click Manipulator を選択します。

この方法で、ClickNode ノードがクリックジェスチャーに反応するようにします。ノードに Click Manipulator コンポーネントを追加することで、そのノードに ClickManipulator をインストールします。
Click Manipulator トリガーを使用して、クリックジェスチャーに反応します。たとえば、ユーザーがそのノードをクリックしたときにノードの外観を変更することができます。

Click Manipulator トリガーを使用するを参照してください。

Kanzi Studio Preview ツールを使用してノードのクリックジェスチャーを有効にする¶

Kanzi Studio Preview ツールを使用してノードのクリックジェスチャーを有効にするには、

クリックに反応させたいノードを選択または作成します。

たとえば、Image ノードを作成します。
Preview で Node tool を選択し、クリックに反応させたいノードを右クリックして、Create click trigger with action メニューでアクションを選択します。

例えば、Log > Write Log アクションを選択します。

アクションを伴うクリックトリガーを作成すると、Kanzi Studio がそのノードに追加されます。
- Input > Hit Testable プロパティを有効に設定します。
  
  このプロパティを有効にすると、ユーザーがノードを選択できるようになります。
  
  どのノードが入力を受け取るかを定義するを参照してください。
- Click Manipulator ノードコンポーネント
  
  ノードに Click Manipulator コンポーネントを追加することで、そのノードに ClickManipulator をインストールします。これにより、ノードにクリックジェスチャーを有効にします。
- Click トリガーを、選択したアクションで実行します。
  
  Click トリガーは、ユーザーがノードを押している間にノード領域内にポインターがある状態でリリースし、Kanzi が他のジェスチャーを認識しない場合に発動されます。
Node Components > Triggers で、ユーザーがトリガーを作動させたときに Click トリガーが実行するアクションを設定します。

例えば、Write Log アクションで、ユーザーがそのノードをクリックしたときに Log ウィンドウに書き込みたいメッセージを Log Text に設定します。

Write Log アクションについて詳しく知るには、Write Log アクションを使用するを参照してください。
Preview でをクリックして、Interact モードに切り替えます。

Preview で、クリックに反応するように設定したノードをクリックすると、Preview の Create click trigger with action で選択したアクションがトリガーによって実行されます。

Click Manipulator トリガーを使用する¶

Click Manipulator トリガーを使用して、クリックジェスチャーに反応します。たとえば、ユーザーがそのノードをクリックしたときにノードの外観を変更することができます。

Click Manipulator には次のトリガーがあります。

Click トリガーは、ユーザーがノードを押している間にノード領域内にポインターがある状態でリリースし、Kanzi が他のジェスチャーを認識しない場合に発動されます。
Begin トリガーは、ユーザーがノードを押したときに発動します。
Cancel トリガーがオフになりました。
- ユーザーが最初にノードを押し、その後ポインタをノード領域の外に移動し、ポインタを離したとき。
- クリックジェスチャーの間にフォーカスがノードから外れるとき。
- Kanzi が Long Press トリガーを発動したとき。
Enter トリガーが発動されました。
- ユーザーがノードを押したとき。
- ユーザーがノードを押し、ポインタをノードエリアの外に移動し、その後ポインタをノードエリアに戻しながらポインタを押し続けている場合。
Leave トリガーがオフになりました。
- ユーザーがノードを押してから離したとき。
- ユーザーが Long Press トリガーを発動したとき。
- ユーザーがノードを押してからポインタをノード領域の外に移動したとき。

Click Manipulator トリガーを使用するには、

ノードにクリックジェスチャーを有効にします。ノードにクリックジェスチャーを有効にするを参照してください。
Click Manipulator トリガーで設定したい動作を定義します。

例えば、異なる Click Manipulator トリガーが発生したときにノードの外観を設定するステートを定義するステートマネージャーを作成します。ステートマネージャーの作成を参照してください。
Click Manipulator トリガーを追加して設定します。
1. Node Tree でトリガーを追加したいノードを選択し、Node Components > Triggers で Click Manipulator トリガーの1つを追加します。
  
  例えば、Node Tree でクリックジェスチャーを有効にしたノードを選択し、Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Click > Click を選択します。
2. 前のステップで作成したトリガーで、Set Message Handled プロパティを無効にします。
  
  Set Message Handled プロパティを無効にすると、このトリガーはメッセージをインターセプトしますが、停止はしません。この方法で、入力マニピュレータがメッセージを処理することを許可します。
3. Node Components Alt を押しながら右クリックで作成したトリガーの中で、アクションを選択し、設定してください。
  
  例えば、Dispatch Message Action > State Manager > Go to State を選択し、アクションセットで:
  - クリックジェスチャーを有効にしたノードに Target Item します。
  - State を、Click トリガーがオフになったときにノードの外観を設定するステートにします。

Kanzi Engine APIを使用してクリックジェスチャーに反応する¶

Kanzi Engine APIを使用してクリックジェスチャーに反応するには：

Kanzi Studio で Application テンプレートを使用してプロジェクトを作成します。
ノードにクリックジェスチャーを有効にします。ノードにクリックジェスチャーを有効にするを参照してください。

Kanzi Studio でノードのクリックジェスチャーを有効にすると、そのノードに ClickManipulatorComponent が作成され、ノードに ClickManipulator がインストールされます。
Node Tree Alt を押しながら右クリックで作成したノードを選択し、Alias を選択します。

Kanzi Studio は、エイリアスを作成したノードを指すエイリアスを作成し、リソースディクショナリを含む最も近い先祖ノードのリソースディクショナリにそれを追加します。

エイリアスの名前の前に # 記号を付けて、エイリアスターゲットノードにアクセスします。
File > Export > Export KZB を選択します。

Kanzi Studio は、Kanzi Studio プロジェクトから kzb ファイルと構成ファイルを作成します。Kanzi Studio は、エクスポートされたファイルを <ProjectName>/Application/bin ディレクトリ、または Project > Properties の Binary Export Directory プロパティで設定した場所に保存します。kzb ファイルには、ローカライゼーションテーブルでロケールパックとしてマークしたリソースを除き、Kanzi Studio プロジェクトのすべてのノードとリソースが含まれています。

Visual Studioから Kanzi アプリケーションを実行すると、アプリケーションはkzbファイルと構成ファイルを読み込みます。
Kanzi Studio で、File > Open Kanzi Command Prompt を選択します。

Kanzi Command Prompt は、Kanzi 環境変数が設定された Windows コマンドプロンプトを開き、Kanzi のバージョンに対して Kanzi Command Prompt を開きます。

Kanzi Command Prompt を使用すると、絶対パスを使用したり環境変数を設定したりせずに、Kanzi のユーティリティや、Gradle、CMake などのビルドツールにアクセスできます。

ヒント

Kanzi Command Prompt は、Rightware ディレクトリの Windows スタートメニューで見つけることができます。

Kanzi のバージョンが複数インストールされている場合は、そのコマンドプロンプトで作業したい Kanzi のバージョンに対応する Kanzi Command Prompt を起動するようにしてください。
<ProjectName>/Application ディレクトリ内の Kanzi Command Prompt で、アプリケーション用の Visual Studio ソリューションを生成するスクリプトを実行します。
```
generate_cmake_vs2022_solution.bat
```
このスクリプトは、<ProjectName>/Application/build_vs2022 ディレクトリにアプリケーション用の Visual Studio ソリューションを生成します。

Visual Studioで <ProjectName>/Application/build_vs<Version>/<ProjectName>.sln Visual Studioソリューションを開き、アプリケーションのロジックを実装するファイルで ClickManipulator を構成します。

異なるクリックメッセージのハンドラを定義します。各ハンドラに、特定のクリックイベントの動作を定義するコードを追加します。

Click Manipulator トリガーを使用して、Kanzi Studio でも動作を定義できます。Click Manipulator トリガーを使用するを参照してください。

例えば、ClickManipulator::ClickMessage メッセージと ClickManipulator::ClickCancelMessage メッセージのハンドラを定義するには、アプリケーションのロジックを実装するクラスのパブリックセクションの後に次を追加します。

private:
    // Define the handler for the ClickManipulator::ClickMessage message from the nodes
    // that have an input manipulator which generates the ClickMessage message.
    void onNodeClicked(ClickManipulator::ClickMessageArguments&)
    {
        // Add the code that handles the click event.
    }

    // Define the handler for the ClickManipulator::ClickCancelMessage message from the nodes
    // that have an input manipulator which generates the ClickCancelMessage message.
    void onNodeClickCanceled(ClickManipulator::ClickCancelMessageArguments&)
    {
        // Add the code that handles the click cancel event.
    }

Application::onProjectLoaded 関数で ClickManipulator メッセージを購読します。

たとえば、追加します:

void onProjectLoaded() override
{
    ScreenSharedPtr screen = getScreen();

    // Get the ClickNode node using its alias.
    NodeSharedPtr clickNode = screen->lookupNode<Node>("#ClickNode");

    // Subscribe to the ClickManipulator::ClickMessage message at the ClickNode node.
    // The ClickManipulator manipulator generates this message when the user clicks the node.
    clickNode->addMessageHandler(ClickManipulator::ClickMessage, bind(&MyProject::onNodeClicked, this, placeholders::_1));

    // Subscribe to the ClickManipulator::ClickCancelMessage message at the ClickNode node.
    // The ClickManipulator manipulator generates this message when the user first presses down
    // the node, then moves the pointer outside of the node area, and lifts the pointer.
    clickNode->addMessageHandler(ClickManipulator::ClickCancelMessage, bind(&MyProject::onNodeClickCanceled, this, placeholders::_1));
}

アプリケーションをビルドして実行します。Kanzi アプリケーションのデプロイを参照してください。

アプリケーション内で:
- クリックジェスチャーを有効にしたノードをクリックします。アプリケーションは、ClickManipulator::ClickMessage メッセージのハンドラーで定義した動作を実行します。
- クリックジェスチャーを有効にしたノードを押し下げ、その後ポインタをノード領域の外に移動し、ポインタを離します。アプリケーションは、ClickManipulator::ClickCancelMessage メッセージのハンドラーで定義した動作を実行します。