カウントダウンの吹き出しを作成および表示する

このチュートリアルでは、吹き出しを作成し、オートメーションの実行中に特定の UI 要素が表示されるたびにその吹き出しを 10 秒間表示すると同時に、吹き出しのカウントダウンを表示する方法について説明します。この例では、天気予報アプリ Windy を例として使用し、そのロゴの横に吹き出しを表示します。

前提条件

この例は、以下のアクティビティ パッケージとバージョンを使用して作成されています。

• UiPath.Callout.Activities 25.2.0
• UiPath.System.Activities 25.2.0
• UiPath.UIAutomation.Activities 25.2.1-preview

手順

1. 吹き出しファイルを作成します。
   1. Studio プロジェクトを開き、[新規] ドロップダウンから [フォーム] を選択して、新しいフォームを作成します。 ここでは、このフォーム ファイルを吹き出しとして使用します。
   2. 吹き出しに Basic callout という名前を付けます。
   3. [コンポーネント] パネルで [基本] セクションを展開し、3 個の [ラベル/ヘッダー] コンポーネントを吹き出しファイルにドラッグします。
      • 最初のコンポーネントには、「Welcome to Windy.com!」などの既定のテキストを入力します。
      • 2 番目のコンポーネントには、「This pop-up will close in 10 seconds」などの既定のテキストを入力します。
      • 3 番目のコンポーネントは変更しないでおきます。これは実行時に変更されるカウントダウンです。
   4. コンポーネントと吹き出しファイルを保存します。
2. プロジェクトで Main ワークフローを開きます。
   1. [アプリケーション/ブラウザーを使用] アクティビティを追加し、[ブラウザーの URL] フィールドに「"https://www.windy.com/"」と入力します。
   2. [ ローカル トリガーを実行] アクティビティを追加します。これにより、すべてのトリガー ワークフローが有効化され、トリガー イベントが発生したときにそのワークフローを実行できます。
3. プロジェクトで Main ワークフローを開きます。
   1. [アプリケーション/ブラウザーを使用] アクティビティを追加し、[ブラウザーの URL] フィールドに「"https://www.windy.com/"」と入力します。
   2. [ ローカル トリガーを実行] アクティビティを追加します。これにより、すべてのトリガー ワークフローが有効化され、トリガー イベントが発生したときにそのワークフローを実行できます。
4. 「Show Basic Callout」という名前の新しいワークフローを作成し、[アプリケーション イベント トリガー] アクティビティを追加します。
   1. 監視を開始するために、[画面上でターゲットを指定] を選択し、オートメーションに対して Windy のロゴを指定します。 この例では、Windy のロゴを指定し、これを監視します。
   2. [イベントの種類] ドロップダウン リストから [出現] を選択します。
   3. [ 吹き出しを表示 ] アクティビティを追加します。このアクティビティを使用すると、uiform ファイルを選択して特定の UI 要素に対して表示したり、Arguments ディクショナリを使用して uiform ファイルにデータを渡したりできます。

      1. [フォームを選択] ドロップダウン リストから、先ほど作成した吹き出しファイルを選択します。

         この例では、Basic callout を選択します。

      2. [UI 要素] フィールドに、[アプリケーション イベント トリガー] アクティビティに対して指定した UI 要素を入力します。これは、吹き出しをバインドする Windy のロゴです。

         そのターゲット要素にアクセスするために、TriggerEventArgs.TargetElement という式を使用します。TriggerEventArgs はここでは引数であり、ワークフローにトリガー アクティビティを追加すると自動的に生成されます。この場合、この引数は [アプリケーション イベント トリガー] アクティビティによって生成されます。

   4. データ マネージャーに移動し、「secondsLeft」という名前のグローバル変数を作成します。この変数を使用して、吹き出しを表示する残り時間を追跡します。
   5. [ 代入 ] アクティビティを追加して、吹き出しの表示時間を割り当てます。[ 保存先 ] フィールドに、新しく作成したグローバル変数 ( [secondsLeft] ) を入力し、[ 保存する値 ] フィールドに「 10」と入力します。
5. 別のトリガー ワークフローを作成し、「Update counter」という名前を付けます。このワークフローによって、吹き出し内の残り秒数の更新をトリガーします。

   1. secondsLeft グローバル変数が変更されるたびにこのワークフローを実行するために、[グローバル変数変更トリガー] アクティビティを追加します。

      [グローバル変数を選択] ドロップダウン リストから [secondsLeft] を選択し、[スケジュール モード] を [順次] に設定します。

   2. secondsLeft変数が 0 になるまで吹き出しの表示の残り秒数を更新するために、[繰り返し (後判定)] アクティビティを追加します。

      1. [ 繰り返し (後判定 )] アクティビティの本体に、[ フォームの値を設定 ] アクティビティを追加します。[フォームを選択] ドロップダウン リストから、Basic Callout ファイルを選択します。Arguments ディクショナリを開き、secondsValue キーの [値] フィールドに「"secondsLeft.ToString+" second(s) left."」という式を入力します。
      2. [待機] アクティビティを追加し、値を 1 秒に設定します。
      3. secondsLeft グローバル変数から 1 秒を減算するために、[代入] アクティビティを追加します。
      4. [繰り返し (後判定)] の [条件] を [secondsLeft <> 0] に設定します。

   3. [フォームを閉じる] アクティビティを追加し、Basic Callout ファイルを選択します。

   4. すべてのトリガー ワークフローの実行を停止するために、[ローカル トリガーを停止] アクティビティを追加します。 プロジェクトがトリガー ワークフローのみで構成されている場合、このアクティビティは特に重要です。このアクティビティを組み込まないと、トリガーは停止することなく継続的なループで永続的に実行されます。

結果

オートメーションによって Windy の Web サイトが開かれ、ロゴが表示されたら「Show basic callout」ワークフローがトリガーされます。グローバル変数を 10 に設定すると、Update counter ワークフローの実行が開始され、グローバル変数から 1 秒が減算されて、その時間が吹き出しに 1 秒間表示されます。これは、残りの秒がなくなるまで続きます。この実行時のプロセスを次のアニメーション画像に示します。

図 1. タイマーを表示する吹き出しを示すアニメーション画像

ワークフローの例

このチュートリアルの手順の実装方法を確認するには、サンプル プロジェクト Display Callout Countdown for Windy をダウンロードしてください。