Long-Press Manipulator を使用する

Kanzi アプリケーションでユーザーがノードを長押しできるようにするには、Long-Press Manipulator を使用します。

この方法により、Long-Press Manipulator で設定した時間だけユーザーがノード上でポインタを押し続けたときに、アプリケーションが反応するようにできます。

例えば、Long-Press Manipulator を使用してコンテキストメニューを開きます。ノードに長押しジェスチャーを有効にする を参照してください。

長押しジェスチャーに反応するには、次を使用できます:

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

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

../../_images/long-press-manipulator.gif

ノードに長押しジェスチャーを有効にする

このセクションでは、任意のノードに対して長押しジェスチャーを有効にする方法を説明します。Button ノードに対して長押しを有効にするには、Button トリガーを使用する を参照してください。

ノードに長押しジェスチャーを有効にするには:

  1. Node Tree で、長押しジェスチャーを有効にしたいノードを作成します。

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

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

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

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

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

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

    この方法で、LongPressNode ノードが長押しジェスチャーに反応するようにします。ノードに Long-Press Manipulator コンポーネントを追加することで、そのノードに LongPressManipulator をインストールします。

    Long-Press Manipulator コンポーネントでは、Long Press Duration プロパティを使用して、LongPressManipulator が長押しジェスチャーを認識するためにユーザーがノードを押す必要がある時間をミリ秒単位で設定します。

    ../../_images/add-long-press-manipulator.png ../../_images/long-press-manipulator-default-properties.png
  4. Long-Press Manipulator トリガーを使用して、長押しジェスチャーに反応します。たとえば、ユーザーがそのノードをクリックしてそのトリガーで設定された時間だけクリックを保持すると、ノードの外観を変更することができます。

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

Long-Press Manipulator トリガーを使用する

Long-Press Manipulator トリガーを使用して、長押しジェスチャーに反応します。たとえば、ユーザーがそのノードをクリックしてそのトリガーで設定された時間だけクリックを保持すると、ノードの外観を変更することができます。

Long-Press Manipulator には、次のトリガーがあります。

  • Long Press トリガーは、ユーザーがノードエリアで押し下げ、500ミリ秒またはそのノード内の Long-Press Manipulator の Long Press Duration プロパティで設定されたミリ秒数だけノードを押し続けたときに発動されます。

  • Long Press Cancel トリガーは、ロングプレスジェスチャー中にフォーカスがノードから外れると発動します。

Long-Press Manipulator トリガーを使用するには:

  1. ノードにロングプレスジェスチャーを有効にします。ノードに長押しジェスチャーを有効にする を参照してください。

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

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

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

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

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

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

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

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

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

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

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

      ../../_images/long-press-add-next-state-action.png ../../_images/next-state-action-for-long-press.png

Kanzi Engine APIを使用して、ロングプレスジェスチャーに反応する

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

Kanzi Engine APIを使用して、長押しジェスチャーに反応するには:

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

    ../../_images/create-project-with-application.png
  2. ノードにロングプレスジェスチャーを有効にします。ノードに長押しジェスチャーを有効にする を参照してください。

    Kanzi Studio でノードに長押しジェスチャーを有効にすると、そのノードに LongPressManipulatorComponent が作成され、ノードに LongPressManipulator がインストールされます。

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

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

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

    ../../_images/longpressnode-create-alias.png ../../_images/longpressnode-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 を使用すると、絶対パスを使用したり環境変数を設定したりせずに、Kanzi のユーティリティや、Gradle、CMake などのビルドツールにアクセスできます。

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

    ヒント

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

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

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

    generate_cmake_vs2022_solution.bat
    

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

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

    1. 長押しメッセージのハンドラーを定義します。

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

      private:
          // Define the handler for the LongPressManipulator::LongPressMessage message from the nodes
          // that have an input manipulator which generates the long-press message.
          void onLongPress(LongPressManipulator::LongPressMessageArguments&)
          {
              // Add the code that handles the long-press event.
          }
      
    2. Application::onProjectLoaded 関数で LongPressManipulator メッセージを購読します。

      たとえば、追加します:

      void onProjectLoaded() override
      {
          ScreenSharedPtr screen = getScreen();
      
          // Get the LongPressNode node using its alias.
          NodeSharedPtr longPressNode = screen->lookupNode<Node>("#LongPressNode");
      
          // Subscribe to the LongPressManipulator::LongPressMessage message at the LongPressNode node.
          // The LongPressManipulator manipulator generates this message when the user presses the node
          // for the amount of milliseconds you set with the LongPressManipulator::setPressDuration function.
          longPressNode->addMessageHandler(LongPressManipulator::LongPressMessage, bind(&MyProject::onLongPress, this, placeholders::_1));
      }
      
  8. アプリケーションをビルドして実行します。Kanzi アプリケーションのデプロイ を参照してください。

    アプリケーションで、長押しジェスチャーを有効にしたノードを押します。アプリケーションは、LongPressManipulator::LongPressMessage メッセージのハンドラーで定義した動作を実行します。

関連項目

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

ユーザー入力の処理

Click Manipulator を使用する

Multi-Click Manipulator を使用する

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

トリガーの使用