【第３回】より実践的な処理を追加してみよう（イメージテンプレート編集・変数の使用・ログ出力・キーボード操作）

#はじめに

[前回](https://qiita.com/Go_Miyake/items/40db30fedd1c9ffb7db1)では、ComparetoコマンドとIf...Else文を組み合わせて、HeartCore Roboが停止する状況にも対応する処理を作成しました。

今回は、さらに実践的な処理として
- イメージテンプレートの変更方法
- 変数の使用
- ログ出力
- ロボットによるキーボード操作

について記載します。

# 事前準備
前回のスクリプトをそのまま使用します。

```javascript
//Click image template="comp0617-1"
Compareto "comp0617-1" method="search2"

if ({_EXIT_CODE} == 0) {
    Mouse click to=x:{_COMPARETO_CLICK_X},y:{_COMPARETO_CLICK_Y}

} else {
    Exit "1" scope="process" desc="ブラウザアイコンが見つかりませんでした"

}

Report "Results.xml"

```

# イメージテンプレートの変更方法について
HeartCore Robo開発時においては、以前に取得したイメージテンプレートを変更する必要が往々にしてあります。例としては、ディスプレイの解像度を変更した場合や、操作対象のウェブページのレイアウトが変更された場合があります。

以下イメージテンプレートの変更方法手順です。

1. Compareto...行で右クリック > プロパティを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/5f2678d5-120d-5f9c-acef-14ad79932984.png)

2. プロパティ画面が開く

3. 操作録画で取得したイメージテンプレート > ”選択したテンプレートを現在のデスクトップイメージに書き換えます“を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/7b363530-72a7-0950-05fa-d69587a7e412.png)

4. デスクトップ上に下記のバーが表示されて範囲選択モードになります
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/0fe7e7d5-b7ee-e57e-94a4-defdc04e74dd.png)

5. タスクバー上のChromeアイコンをドラッグで選択（白破線で囲まれます）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/b964880c-22f6-937a-1720-eb61dc8a388a.png)

6. 赤十字はクリックポイント（イメージマッチングした際にマウスがクリックするポイント）となるのでアイコンの中心に配置

7. 確定（チェック）アイコンをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/3a1d1f50-dd14-99a2-02ba-2c31f7dc4361.png)

8. プロパティ画面に戻る

9. テンプレートイメージが書き換わっている事を確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/2378f292-f08b-27da-04e1-16fda6502eae.png)
*テンプレートの下の数字は縦x横のピクセル数を表します*

10. 比較ボタンをクリックしてシミュレーション実行
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/c53fe1c7-a544-c16b-bd32-b1870b437201.png)

11. このテンプレートは１回、下記にて見つかりました...」と現れるのでOKをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/5b8036a9-af4f-061b-99e5-13481152c896.png)
*「検索一致なし」の場合にはステップ３−１０.を再度実行*

12. プロパティ画面のOKをクリックして閉じる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/5da6a080-a6d2-a4be-5d84-b0a302c887b4.png)

## マッチング処理の高速化テクニック
プロパティ画面上で「比較領域」にチェック > 紫色のアイコンをクリック > デスクトップ範囲選択モードでデスクトップ下部のみを選択すると走査範囲が絞られるため、Chromeアイコンイメージマッチングの処理が早まります。ただし必ず対象物が入るように範囲指定を行う必要があります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/743a221c-57af-4bbb-67d5-af5ac8a08781.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/f531b2c1-b9d3-f13c-c264-afc2ae8525ad.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/99bcefee-b81e-cd94-aff6-6ebf4a2dc6d8.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/3a1d1f50-dd14-99a2-02ba-2c31f7dc4361.png)

結果はシミュレーションを行った際の「比較時間」に表示されます。
ここでの例は、処理時間が**575ミリ秒から１６ミリ秒まで短縮**されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/9036b51c-a6cc-c549-264e-03ea36bbaf2b.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/7b9b85ca-7746-2913-d69b-1e9454c5fe14.png)

比較領域の絞り込みは今後も使用頻度の高い機能になります。ただし、デスクトップの解像度を変更した場合や、ウェブサイトのレイアウトが変更された場合には対象物が比較領域から外れてしまい、マッチングされなくなる場合があるので留意が必要です。

# 変数の使用とログ出力について
HeartCore Roboスクリプトではユーザー変数の定義・使用が出来ます。変数についてはFAQページ「変数は定義出来るのか」[以下](https://qiita.com/Go_Miyake/items/69fe8c3f4468544e3d0e)にも記載があるので参照下さい。



ここでは成功・失敗時にロボットから出力させるログの内容を変数で定義してみます。

1. スクリプトの冒頭に空白行を２行挿入
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/d0bad650-46da-b33b-191e-6a4cb3a072d1.png)

2. Varを使って変数を宣言　（ここではキーボードでコマンドを直接タイプしていますが右クリック　> コマンドを作成 > Timer > Varからでも宣言出来ます）

> Var Success="Chromeアイコンが見つかりました"
> Var Failure="Chromeアイコンがみつかりません。処理を終了します"
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/e87880af-6ef6-9ddb-d939-6996cae5138b.png)

3. If文の直下行にログ出力する行を追加 ＋ ログの内容として上記で宣言した変数を中括弧を囲んで使用
> Log ｛Success｝

4. 併せてElseの直下行にログ出力する行の追加 ＋ ログの内容として上記で宣言した変数を中括弧を囲んで使用
> Log {Failure}

以下スクリプト全文：

```javascript
Var Success="Chromeアイコンが見つかりました"
Var Failure="Chromeアイコンがみつかりません。処理を終了します" 

//Click image template="comp0617-1"
Compareto "comp0617-1" method="search2"
if ({_EXIT_CODE} == 0) {
    Log {Success}
    Mouse click to=x:{_COMPARETO_CLICK_X},y:{_COMPARETO_CLICK_Y}
     
} else {
    Log {Failure}
    Exit "1" scope="process" desc="ブラウザアイコンが見つかりませんでした"
    
}

Report "Results.xml"
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/1500b847-4704-8940-a412-8314c5597441.png)

## 結果を確認してみる
1. 「実行」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/66d5d96c-7853-5e96-2ae0-fb7abc5ecc28.png)

2. タスクバー内のブラウザアイコンがクリックされてブラウザが起動
3. 実行ログに「Chromeアイコンが見つかりました」と出力されているのを確認
> Jun 29, 2018 4:09:52 PM INFO: Chromeアイコンが見つかりました (   ファイル:Script1.tpr、行:7: Log {Success})
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/9acf68a9-ff81-8ba4-e2ea-2a12c035f658.png)

4. タスクバー内のブラウザアイコンを削除して再度「実行」
5. 実行ログに「Chromeアイコンが見つかりませんでした」と出力されているのを確認
> Jun 29, 2018 4:18:14 PM INFO: Chromeアイコンがみつかりません。処理を終了します (   ファイル:Script1.tpr、行:11: Log {Failure})
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/08a94c13-4692-1955-a875-8dfa21cf510e.png)

# Logコマンドについて
Logコマンドは開発者が任意のタイミングで設定出来るため、開発時におけるデバッグ・実行時における結果として使用出来ます。
使用例：
・　「比較」ボタンを使用した際のマッチング件数・座標等の確認
・　OCR実行結果の確認（読み取れた文字の確認）
・　デバッグ時の変数の値を確認
・　If/Else文においてどちらに分岐したかをトレース...

以降の記事でもLogコマンドは頻出します。

# ロボットによるキーボード操作
これまではマウスによるポインタ操作でマッチングした対象物をクリックさせていました。HeartCore Roboはキーボード操作（キーの押下・タイピング）も可能です。以下、キーボードを使用してChrome上でYahooページに遷移させてみます。

（事前準備）
Chrome起動前にHeartCore Roboのキーボード入力処理が開始するのを防ぐためにClick後の待機としてWaitパラメータを追加します。

1. Mouse clickを右クリック > プロパティ > クリック後の待機 > 3秒を指定 > OKをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/bfde417f-67a3-610a-a669-307f2bdb0add.png)
*注１：Chromeや他のブラウザ起動に3秒以上掛かる端末で実行する場合にはWait値を長くする必要があります*
*注2：Wait値を固定にしない方法については別の回で記載します*

2. Mouse clickコマンドにwait=”3s”が追加されたのを確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/c2e3002a-a382-d5c5-9af8-2a09f2e24d58.png)
*Waitはコマンドとして単体行での実行も可能です*
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/52f0038a-4b13-38d6-7b39-353f179199b4.png)

次に起動したChromeのアドレスバーにURLをペースト＆ページ遷移を行います。

1. Mouse click…の直下空白行 >  右クリック > コマンドを作成 > Imagedoctor > Pressを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/4f9e9cb4-b9a5-51e9-00c7-cf4fe8385f65.png)

2. プロパティ画面 > プレスするキー > キーボードでAlt+Dキー(Chromeアドレスバーへのショートカットキー)を押す > Alt+Dがキャプチャされる（キャプチャされない場合には右横の赤丸ボタンをクリック）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/5d06486e-887a-8cd2-bc0f-5599fbc83e5c.png)

3. OKをクリック

4. Press “Alt+D”コマンドが追加された事を確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/435fe554-baf7-505c-da58-c0a944deb521.png)

5. Press コマンド行の直下行で右クリック > コマンドを作成 > Imagedoctor > Pasteを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/c3ac634b-3ee7-e36c-8354-0f6a95c4120d.png)

6. プロパティ > 貼り付けるテキスト > ”https://yahoo.co.jp”をタイプ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/8cd6cd67-4f28-bb0a-71be-79834f4d185f.png)

7. OKをクリック

8. Paste "https://yahoo.co.jp"コマンドが追加された事を確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/11b00dfe-f388-348e-0832-dd434d6bd898.png)

9. Paste コマンド行の直下行で右クリック > コマンドを作成 > Imagedoctor > Pressを選択 > Enterキーを押してキャプチャさせる > OKをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/34f30064-120f-0d55-322c-d2c5329d3717.png)

10. Press “ENTER”コマンドが追加された事を確認
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/54235d28-af1a-5236-cb7e-693a2f7fdf07.png)

以下スクリプト全文：

```javascript
Var Success="Chromeアイコンが見つかりました"
Var Failure="Chromeアイコンがみつかりません。処理を終了します" 

//Click image template="comp0617-1"
Compareto "comp0617-1" method="search2"
if ({_EXIT_CODE} == 0) {
    Log {Success}
    Mouse "click" wait="3s" to="x:{_COMPARETO_CLICK_X},y:{_COMPARETO_CLICK_Y}"
    Press "Alt+D"
    Paste "https://yahoo.co.jp"
    Press "ENTER"

} else {
    Log {Failure}
    Exit "1" scope="process" desc="ブラウザアイコンが見つかりませんでした"
}

Report "Results.xml"
```

##結果を確認してみる

1. 「実行」をクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/66d5d96c-7853-5e96-2ae0-fb7abc5ecc28.png)

2. タスクバー内のブラウザアイコンがクリックされてChromeが起動
3. 3秒待つ
4. Chromeアドレスバーにフォーカスが移り”https://yahoo.co.jp”がペーストされる
5. Enterが押される事でyahooページに遷移
6. ロボットの実行が完了
![image.png](https://qiita-image-store.s3.amazonaws.com/0/254242/d42c8753-63ee-9951-e464-b608a4673a6d.png)

*その他*
> Paste "https://yahoo.co.jp"
↓
> Type "https://yahoo.co.jp"

*と変えて実行してみて下さい。URLの入力方法が「貼り付け方式」から「タイプ方式」となります*

#まとめ
HeartCore Robo言語は簡素なスクリプトですが、変数(ユーザー変数・システム変数)の使用・ログ出力が可能であり、また部分実行・ブレークポイントの追加も行えるため（別の回で記載します）、開発経験のあるエンジニアの要望にも応えうる効率的な開発が可能です。

また、イメージテンプレートの編集も容易に行えるため、環境が変わった場合でもスクリプトを変える事無く、イメージを取り直すのみでロボットを実行させる事が可能です。

#次回について
次回は、ロボット化対象業務の中で最も使用されるExcelの処理方法について解説します。