Multi-Click Manipulator を使用する

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

ノードにマルチクリックジェスチャーを有効にする を参照してください。

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

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

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

Multi-Click Manipulator を使用する方法をチュートリアルで学びましょう。チュートリアル: パン、ズーム、タップ をご覧ください。

../../_images/multi-click-manipulator.gif

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

このセクションでは、任意のノードにマルチクリックジェスチャーを有効にする方法を説明します。

Text Box ノードは、デフォルトでダブルクリックジェスチャーをサポートしています。Text Box ノード内の単語をダブルクリックすると、Kanzi がその単語を選択します。

Button ノードでダブルクリックを有効にするには、Button ノードでダブルクリックジェスチャーを有効にする を参照してください。

List Box アイテムのダブルクリックを有効にするには、List Box アイテムにダブルクリックジェスチャーを有効にする を参照してください。

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

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

    例えば、Empty Node 2D ノードを作成し、それに MultiClickNode という名前を付け、ノードにコンテンツを追加します。

    ../../_images/multiclicknode-in-project.png
  2. Node Tree で前のステップで作成したノードを選択し、Properties で Input > Hit Testable プロパティを追加し、有効に設定します。

    このプロパティを有効にすると、ユーザーがノードを選択できるようになります。

    デフォルトで、ヒットテストは Button、Toggle Button、List Box Item Container、Scroll View、Slider、および Text Box ノードに対して有効になっています。

    どのノードが入力を受け取るかを定義する を参照してください。

    ../../_images/multiclicknode-properties.png
  3. Node Components Alt を押しながら右クリック Input Manipulators で、Multi-Click Manipulator を選択します。

    この方法で、MultiClickNode ノードがマルチクリックジェスチャーに反応するようにします。ノードに Multi-Click Manipulator コンポーネントを追加することで、そのノードに MultiClickManipulator をインストールします。

    MultiClickManipulator の動作を制御するには、Multi-Click Manipulator コンポーネントにこれらのプロパティを追加して設定できます。

    • Click Count は、MultiClickManipulator がマルチクリックジェスチャーを認識するために必要なクリック数を設定します。

    • Multi-Click Timeout は、MultiClickManipulator がマルチクリックジェスチャーの一部として認識するために、2回の連続したクリックが発生する必要がある時間をミリ秒単位で設定します。デフォルトで、2回のクリックが250ミリ秒以内に発生した場合、Kanzi はそれらをダブルクリックジェスチャーとして認識します。

    • Send Intermediate Click Messages は、マルチクリックジェスチャー中に発生する各クリックで Intermediate Click トリガーを作動させるかどうかを設定します。

      Intermediate Click トリガーは、ユーザーが目的のクリック数に達する前にマルチクリックジェスチャー中にノードエリアをクリックしたときに発動されます。

    ../../_images/add-multi-click-manipulator.png ../../_images/multi-click-manipulator-properties.png
  4. Multi-Click Manipulator トリガーを使用して、マルチクリックジェスチャーに反応します。たとえば、ユーザーがノードを連続して複数回クリックしたときに、そのノードの外観を変更することができます。

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

Multi-Click Manipulator トリガーを使用する

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

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

  • Multi-Click トリガーは、ユーザーがノードエリアを複数回クリックしたときに発動します。

  • Multi-Click Canceled トリガーは、マルチクリックジェスチャー中にフォーカスがノードから外れると発動します。

  • Intermediate Click トリガーは、ユーザーが目的のクリック数に達する前にマルチクリックジェスチャー中にノードエリアをクリックしたときに発動されます。

Multi-Click Manipulator トリガーを使用するには:

  1. ノードにマルチクリックジェスチャーを有効にします。ノードにマルチクリックジェスチャーを有効にする を参照してください。

  2. Multi-Click Manipulator トリガーで設定したい動作を定義します。

    例えば、Multi-Click と Multi-Click Canceled のトリガーが発動したときにノードの外観を設定するステートを定義するステートマネージャーを作成します。ステートマネージャーの作成 を参照してください。

  3. Multi-Click Manipulator トリガーを追加して設定します。

    1. Node Tree でトリガーを追加したいノードを選択し、Node Components > Triggers で Multi-Click Manipulator トリガーの1つを追加します。

      例えば、Node Tree でマルチクリックジェスチャーを有効にしたノードを選択し、Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Multi-Click > Multi-Click を選択します。

      ../../_images/multiclicknode-in-project.png ../../_images/add-multi-click-trigger.png
    2. 前のステップで作成したトリガーで、Set Message Handled プロパティを無効にします。

      Set Message Handled プロパティを無効にすると、このトリガーはメッセージをインターセプトしますが、停止はしません。この方法で、入力マニピュレータがメッセージを処理することを許可します。

      ../../_images/multi-click-trigger-settings.png
    3. Node Components Alt を押しながら右クリック で作成したトリガーの中で、アクションを選択し、設定してください。

      例えば、Dispatch Message Action > State Manager > Next State を選択し、アクションセットで:

      • Target Item を、Multi-Click トリガーが繰り返し設定されたときにノードの外観を設定するために作成したステートマネージャーを使用するノードに設定します。

      • Multi-Click トリガーが作動したときに切り替えたい状態を含むステートグループに State Group します。

      ../../_images/multi-click-add-next-state-action.png ../../_images/next-state-action-for-multi-click.png

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

アプリケーションコードで、アプリケーションがマルチクリックジェスチャーにどのように反応するかを定義できます。

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

  1. Kanzi Studio で Application テンプレートを使用してプロジェクトを作成します。

    ../../_images/create-project-with-application.png
  2. ノードにマルチクリックジェスチャーを有効にします。ノードにマルチクリックジェスチャーを有効にする を参照してください。

    Kanzi Studio でノードにマルチクリックジェスチャーを有効にすると、そのノードに MultiClickManipulatorComponent が作成され、ノードに MultiClickManipulator がインストールされます。

  3. Node Tree Alt を押しながら右クリック で作成したノードを選択し、Alias を選択します。

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

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

    ../../_images/multiclicknode-create-alias.png ../../_images/multiclicknode-in-dictionaries.png
  4. 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ファイルと構成ファイルを読み込みます。

    ../../_images/export-kzb-binary.png
  5. Kanzi Studio で、File > Open Kanzi Command Prompt を選択します。

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

    Kanzi Command Prompt を使用して、絶対パスや環境変数を設定せずに、Gradle、SCons、CMake などの Kanzi ユーティリティおよびビルドツールにアクセスします。

    ../../_images/open-kanzi-command-prompt.png

    ヒント

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

    Kanzi のバージョンが複数インストールされている場合は、そのコマンドプロンプトで作業したい Kanzi のバージョンに対応する Kanzi Command Prompt を起動するようにしてください。

  6. <ProjectName>/Application ディレクトリ内の Kanzi Command Prompt で、アプリケーション用の Visual Studio ソリューションを生成するスクリプトを実行します。

    たとえば、Visual Studio 2019 を使用している場合は、次のコマンドを実行します。

    generate_cmake_vs2019_solution.bat
    

    このスクリプトは、ディレクトリ <ProjectName>/Application/build_vs2019 内のアプリケーション用の Visual Studio ソリューションを生成します。

  7. Visual Studioで <ProjectName>/Application/build_vs<Version>/<ProjectName>.sln Visual Studioソリューションを開き、アプリケーションのロジックを実装するファイルで、マルチクリックジェスチャーにどのように反応するかを定義します。

    1. マルチクリックメッセージのハンドラを定義します。

      例えば、アプリケーションのロジックを実装するクラスのパブリックセクションの後に、次を追加します。

      private:
      
          // Define the handler for the MultiClickManipulator::MultiClickMessage message from the
          // nodes that have an input manipulator which generates the multi-click message.
          void onNodeMultiClicked(MultiClickManipulator::MultiClickMessageArguments&)
          {
              // Add the code that handles the multi-click event.
          }
      
    2. Application::onProjectLoaded 関数で MultiClickManipulator メッセージを購読します。

      たとえば、追加します:

      void onProjectLoaded() override
      {
          ScreenSharedPtr screen = getScreen();
      
          // Get the MultiClickNode node using its alias.
          NodeSharedPtr multiClickNode = screen->lookupNode<Node>("#MultiClickNode");
      
          // Subscribe to the MultiClickManipulator::MultiClickMessage message at the MultiClickNode node.
          // The MultiClickManipulator manipulator generates this message when the user multi-clicks the node.
          multiClickNode->addMessageHandler(MultiClickManipulator::MultiClickMessage, bind(&MyProject::onNodeMultiClicked, this, placeholders::_1));
      }
      
  8. アプリケーションをビルドして実行します。Kanzi アプリケーションのデプロイ を参照してください。

    アプリケーションで、マルチクリックジェスチャーを有効にしたノードを複数回クリックします。アプリケーションは、MultiClickManipulator::MultiClickMessage メッセージのハンドラーで定義した動作を実行します。

関連項目

チュートリアル: パン、ズーム、タップ

ユーザー入力の処理

Click Manipulator を使用する

Long-Press Manipulator を使用する

Kanzi アプリケーションのデプロイ

トリガーの使用