はじめに

カレンダーをマウスによって操作するために、指定した日付からカレンダー上での表示位置をもとめクリックするための座標を計算するサンプルシナリオ（以降、本サンプルシナリオ）について説明します。

本サンプルシナリオの概要

本サンプルシナリオは、以下の処理を行います。

• サンプルの入力ファイル（HTML）をGoogle Chromeで開きます。
• 表示ズーム倍率を100%にします。
• 日付入力欄にフォーカスをあて、カレンダーを表示するためのアイコンを表示します。
• 「画像マッチング」によりカレンダーを表示するためのアイコンを左クリックし、カレンダーを表示します。
• シナリオ実行時の日付(以降、「検索日」と記述）をもとに、以下の処理を行います。
  • カレンダー上で検索日が何行何列目にあるかを求めます。
  • カレンダーの表示開始位置、1日分の表示幅や高さから、クリックすべき座標を計算をします。
    
  • 検索日にマウスを移動します。
    
  • 左クリックをし、カレンダー上の日付を確定します。

Google Chromeのカレンダーによる日付入力はテキストでも日付を指定可能です。しかし、本サンプルシナリオではマウス操作しかできないカレンダーを想定した処理の例として、Google Chromeのカレンダーを利用しています。

使用するWinActorモジュール

サンプルシナリオでは、主に以下のWinActorモジュールを使用します。

• ノード/アクション/画像マッチング
• ノード/変数/四則演算
• 08_日付関連/日付取得（年のみ西暦４桁）.ums5
• 08_日付関連/日付取得（月のみ）.ums5
• 08_日付関連/カレンダー位置計算.ums5
• 12_マウス関連/マウス移動(絶対座標).ums5
• 12_マウス関連/マウス左クリック.ums5
• 15_画像マッチング関連/画像マッチング箇所の取得.ums5
• 23_ブラウザ関連/ブラウザ起動.ums5
• プチライブラリ/08_日付関連/指定した年・月の最終日を取得するライブラリ (プチライブラリはこちらからダウンロード可能です。)

動作確認環境

本サンプルシナリオは以下の環境で動作確認しています。

• Windows 10
• WinActor 5.3.1、WinActor 6.1.0
• Google Chrome 76.0.3809.132

制限事項

• ディスプレイ解像度が大きい環境(Full-HDよりも大きい解像度)やディスプレイの表示倍率を調整している場合はうまく動作しない可能性があります。

本サンプルシナリオの使い方

本サンプルシナリオの使い方は以下の通りです。

Step 1. サンプルシナリオの読み込み

ダウンロードしたZIPファイルを展開し、展開したフォルダに含まれている本サンプルシナリオをWinActorで読み込みます。

Step 2. 動作に必要な変数を設定

必要に応じて、本サンプルシナリオを実行するために必要な値を、変数一覧で更新します。
本サンプルシナリオの実行にあたり、設定が必要な変数は下記の通りです。

• 検索日
  • カレンダーで指定したい日付を入力します。本サンプルシナリオでは、シナリオ実行時の日付を自動的に入力しています。
    　※本サンプルシナリオは、年月の違いに対するカレンダー操作を実装していないため、シナリオ実行時の月以外の日付を入力すると正常に動作しません。

Step 3. サンプルシナリオの実行

WinActorで本サンプルシナリオを実行開始します。
以下の動作が実施されます。

• サンプル入力ファイル (sampleDateInput.html)を Google Chromeで開きます。
  
• カレンダーで以下の処理を実施します。
  • カレンダーを表示するアイコンをクリックします。
    
  • 検索日をクリックします。

Step 4. サンプルシナリオ実行終了後の確認

ブラウザ上で、検索日が日付入力欄に記入されていることを確認します。

トラブルシューティング

本サンプルシナリオがうまく動作しなかった場合、以下を確認してください。

サンプルシナリオ解説

本サンプルシナリオで使用している実装テクニック、および応用方法について解説します。

カレンダー上で指定した日付がどこに表示されているかを求める

本サンプルシナリオで使用しているカレンダーは、htmlに <input type="date">と指定したファイルを、Google Chromeで オープンした時に表示される基本的なカレンダーです。

本サンプルシナリオはこのカレンダーに対し、以下の順に処理を行い、カレンダー上で検索日を指定します。

1. カレンダーの座標計算
2. カレンダー内の検索日の座標計算
3. 検索日を左クリック

カレンダーの座標計算

下図の①～⑤の座標を計算します。

1. ①の座標を取得
   ライブラリ「15_画像マッチング関連/画像マッチング箇所の取得.ums5」を用いて、カレンダーのプルダウンメニューのXY座標を求めます。

2. ①の座標から②と③の座標を取得
   ②、③ともに①からの相対位置を変数の初期値に設定しています。
   ①の座標位置と初期値をもとに②、③の座標を計算します。
   　②のX座標(月初位置Ｘ) = ①で取得したX座標 + 月初位置差分Ｘ
   　②のY座標(月初位置Ｙ) = ①で取得したY座標 + 月初位置差分Ｙ
   　③のX座標(月末位置Ｘ) = ①で取得したX座標 + 月末位置差分Ｘ
   　③のY座標(月末位置Ｙ) = ①で取得したY座標 + 月末位置差分Ｙ

月初位置差分Ｘ、月初位置差分Ｙ、月末位置差分Ｘ、月末位置差分Ｙについて、Google Chromeのカレンダーサイズに調整した値を変数初期値に事前設定済みです。別のカレンダーにする場合は、処理を適用させたいカレンダーのサイズにあわせて値を修正してください。

カレンダー内の検索日の座標計算

カレンダー上の検索日の座標を計算するため、以下の処理を行います。

検索日の列、行番号取得

ライブラリ「08_日付関連/カレンダー位置計算.ums5」を用いて、検索日のカレンダー上の列番号と行番号を取得します。

※Google Chromeのカレンダーは日曜日から始まるため、「最初の曜日」を0としています。指定するカレンダーにあわせて変更してください。

検索日のY座標を計算

検索日のY座標は以下のように計算します。

1か月の高さ = ③のY座標(月末位置Ｙ) - ②のY座標(月初位置Ｙ)
1日の表示高さ = １か月の高さ ÷ 今月の週の数
検索日のＹ座標 = ②のY座標(月初位置Ｙ)＋(１日の表示高さ × (検索日のカレンダー位置（行番号）-1 + 0.5))

　※0.5の加算は、日付の中心をクリックするための調整です。

検索日のX座標を計算

検索日のX座標は以下のように計算します。

1週間の幅 = ③のX座標(月末位置Ｘ) - ②のX座標(月初位置Ｘ)
1日の表示幅 = １週間の幅 ÷ 7
検索日のＸ座標 = ②のＸ座標(月初位置Ｘ)＋(１日の表示幅 × (検索日のカレンダー位置（列番号）-1 + 0.5))

　※0.5の加算は、日付の中心をクリックするための調整です。

検索日を左クリック

前段で計算された座標に対し、マウス関連ライブラリを用いて、マウス移動、左クリックを行います。

これらの処理により、検索日がカレンダー上でクリックされます。

左クリック直後にそのままシナリオを終了すると左クリックが反映されないケースもあるため、一定時間待機をしてからシナリオを終了しています。

画像マッチングの精度を上げるための処理

本サンプルシナリオは処理の中で、Google Chromeを開いています。
通常、Google Chromeを開いた直後は、ファイルの先頭を、ズーム倍率100%で開いている状態になりますが、ファイルを開いた状態でシナリオを実施した場合、すでに開かれているウィンドウが以下の状態になっている可能性があります。

• 先頭でない場所が表示されている。（画像マッチングの原点となる画像が見えない）
  
• ズーム倍率が100％以外である。

上記の状態になっている場合、そのままでは画像マッチングが正しく動くことができません。そのため本サンプルシナリオでは、画像マッチングの前に以下の動作を実施しています。

• エミュレーションにより、「HOME」キーを押し、先頭を表示します。
• エミュレーションにより、「Ctrl+0」キーを押し、100％表示に変更します。

また、ブラウザの幅を変更するだけで、カレンダー表示のためのアイコン画像表示がわずかに変わるケースがあります。その対策として、本サンプルシナリオでは、マッチ率を90%にしています。 　

変更履歴