メニュー

logo

カチシステムはお客様に寄り添った
システム開発と支援サービスを提供し
「やさしい最先端」を創造します。

【第39回】ロータス博士のWinActor塾~画像マッチングⅡ

2021.05.19

画像マッチングを使う

今回は画像マッチングノードを使用して、実際にボタンを押すシナリオを作成します。

画像マッチングのノードの配置やプロパティ画面の見かたは前回の記事を参照してください。

 

 

 

よし!では早速画像マッチングを使ってみよう!

今回はRoTASのホームページの画面を例にするので、ブラウザであらかじめページを開いておくのじゃぞ。

ん?今これを読んでいるということはもう開いておるのか。

開始早々メタっぽい発言してますね博士。

それはそうと、どんな動きのシナリオになる予定ですか?

うーむ、そうじゃな。

簡単なところで、ページの上部にあるWinActorのボタンを押してみようかのう。

今これを読んでくれているということは、画面の上に表示されているはずじゃ。

ここじゃな!

 

ありますね!上に!

わかりやすくて良さそうです!

ではいってみよう!

 

画像の取り込みと対象ウィンドウの設定

画像の取り込み

画像マッチングを使うには、まずマッチングに使用する画像を用意する必要があります。

画像編集ソフトで用意することもできますが、WinActorには画面をキャプチャする機能が備わっていますので

簡単に画像が準備できます。今回はそちらを利用しましょう。

 

まずは画像マッチングノードをシナリオ上に配置して、プロパティ画面を開いてください。

プロパティ画面を開いたら「イメージ画像」のターゲット選択ボタンをクリックします。

 

 

クリックするとウィンドウ選択状態となるので、RoTASのページを開いているブラウザ画面上にマウスを乗せて

ウィンドウの枠がオレンジ色になった状態でマウスを左クリックします。

 

 

このように画像が取り込まれれば成功です。 

 

WinActorの画面が被ってうまくウィンドウがクリックできないという方はいるかな?

そういうときはオプションの設定を変更しよう。

ツール > オプション と開いて、編集タブにある「ターゲット選択時にWinActorの画面を消す」

にチェックを入れるのじゃ!

こんな設定があったんですね!

いつもウィンドウが後ろに隠れちゃってて大変だったので助かります!

ちなみによく間違われるんじゃが、ここまでの手順は画像としてキャプチャしただけで

ブラウザのウィンドウ情報が取り込まれた訳ではないぞ。

どの画面に対してマッチング操作を行うかは別に設定が必要なので注意じゃ。

では、操作対象とするウィンドウを指定してみよう。

 

対象ウィンドウの指定

対象となるウィンドウを指定するには、すぐ下にある「ウィンドウ識別名」のターゲット選択ボタンをクリックします。

 

 

 

クリックすると、画像取り込み時と同様にウィンドウ選択状態となるので

先ほどと同じ手順でブラウザ画面を選択してください。

選択するとウィンドウ識別ルールに登録され、プロパティ上に反映されます。

 

 

既にウィンドウ識別ルールが存在する場合はプルダウンからの選択も可能です

どうかな?結構簡単じゃろう。

これで画像マッチングに使う画像と操作対象のウィンドウが選択できた。

次はマッチング範囲の指定をしていこう。

ターゲット選択ボタンを押して対象ウィンドウをクリックするだけなんですね!

プロパティ項目がたくさんあって難しそうに見えるけど、意外と簡単かも・・・。

 

マッチング範囲の指定

マッチング範囲の指定はとてもシンプルです。

画像マッチングのプロパティに画像と取り込んだら、左側にあるツールアイコンから

虫眼鏡マークの「検索範囲」ボタンをクリックしましょう。

 

 

「検索範囲」ツールを選択したら、そのまま画像の上でマウスをクリックし、ドラッグすることで矩形範囲を指定できます。 

指定した範囲は点滅する赤点線で表示されます。

今回の目的はWinActorのボタンを押すことなので、WinActorのボタンを検索範囲としましょう。

次のように範囲を指定してください。

 

 

これでマッチング範囲の指定が完了しました。 

この範囲がマッチング用の画像として使用され、ウィンドウ識別名の欄で指定したウィンドウに対して検索が実行されます。

 

ここも少し誤解されやすいのじゃが、この範囲指定は

操作対象のウィンドウの座標を指定するようなものではないことに注意じゃ。

キャプチャした画像全体から、マッチングに使う部分だけを絞り込んでいるイメージじゃな。

この赤点線の範囲の外はマッチングには全く使用されなくなることを覚えておこう。

なるほど。

そういえば博士、マウスカーソルの位置の指定はしないんですか?

良いところに気付いたのう。

実はこれには理由があるのじゃ。

ではカーソル位置の指定について少し解説しよう。

 

カーソル位置の指定と利用法

カーソル位置の指定

前回の記事で紹介した通り、画像マッチングにはマウスカーソルの位置を指定する機能があります。

 

まず、検索範囲の指定と同じように、左側のツールから十字マークの「マウス操作位置」ボタンをクリックします。

 

 

そのままキャプチャした画像の上でクリックすると、クリックした位置に十字マークが表示されます。

この十字の部分がマウス操作の位置となります。

 

 

ほら、今回ってボタンをクリックするんですよね?

だったら十字の指定は必要じゃないですか?

これは結論から言うと、どっちでもいいのじゃ。

詳しく説明するぞ。

 

カーソル位置指定の利用

マウス操作位置を十字マークで指定しない場合、自動的に検索範囲の中心になります。

次の2つの設定でマウスをクリックした時、クリックされる位置は同じです。

 

今回の例では、赤点線の矩形で囲んだ範囲の中心をクリックしても

WinActorのボタンが押されるため、特に十字でカーソル位置を指定する必要はありません。

 

へー、自動で中心になってくれるんですね!

じゃあ十字が必要な時ってどんな場合なんでしょう?

そうじゃな、例えば社内システムで次のようなカレンダーアイコンのボタンを押して

スケジュールを確認したいとき、どう設定するかな?

こんなの簡単ですよ!こうですね!

ほほー、ひっかかったのう!

このアイコンはその日の日付によって変わるのじゃ。

次の日にはこうなっておるぞ。これでは動かんのう。

あ!19から20に変わってる!ずるいですよ博士!

アイコンが毎日変わるんじゃ、マッチングできないじゃないですか・・・。

うむ、これは是非覚えて欲しいテクニックなのじゃが

こういう場合は、変化しないものをマッチング対象にして

クリック位置だけを変えるのじゃ。

こうするとどうじゃ。

日付がどれだけ変わっても、毎日しっかりアイコンをクリックできる。

こういう場合にマウス位置の指定は活躍するのじゃ。

すごい、こんなやり方があったなんて・・・。

カーソル位置の十字はマッチングの検索範囲の外でも大丈夫なんですね!

その通り!ただし、位置関係がズレるようなものには注意じゃぞ。

例えば今の場合だと、アイコン本体ではなく文字のほうをマッチングしておるから

文字とアイコンの位置関係が変わるとアイコンがクリックされない可能性が出るのじゃ。

場合によってやり方をしっかり考えないといけないですね。

画像マッチングは奥が深いなあ。

よし、では残りのプロパティ設定をして今回は終わりにしよう。

それぞれの機能については前回の記事で紹介しておるから、そちらを見るように。

アクションの設定

マッチング範囲とカーソル位置を決定したら、アクションの設定を行いましょう。

今回変更が必要な部分はプロパティの「アクション」の部分のみです。

 

「アクション」ではマッチング時にどのような操作をするかを指定できます。

今回は、マッチングが成功したらボタンを押したいのでプルダウンから「左ボタンクリック」を選択しましょう。

 

 

もし画像マッチングがうまく認識されない場合は「マッチ率」を少しずつ下げてチェックを行ってください。

基本的には90%のままで問題ありません。

マッチ率を下げすぎると類似のイメージがマッチしてしまう可能性があるので、何度かテストをして最適なマッチ率を探しましょう。

 

アクションに左ボタンクリックを選択したら、更新ボタンを押してプロパティ設定は完了です。

実行結果

ここまで設定ができたら、実際に動かしてみましょう。

正しく設定できていればWinActorのボタンが押され、ページが遷移します。

 

どうじゃったかな?画像マッチングは、実際にやってみると意外と簡単なのじゃ。

次回は外部の画像データを使ってマッチングを行う方法を紹介しよう!お楽しみに!

 


 

関連記事こちらの記事も合わせてどうぞ。

最近の記事

カテゴリ

PAGETOP