tempeditor2

テンプレート画像エディター v2

Contents:

概要

この文書は、リリース8.1で提供される新しい画像エディタについて説明します。特に非矩形画像のサポートを含む、「search2」画像比較アルゴリズムの改良について扱います。このエディタでは、画像から不要なピクセルを透明化することで除去できます。これにより「search2」アルゴリズムは、画面上で一致する領域を探す際に、透明または半透明の領域をすべて無視します。この手法により、背景のないテンプレート画像を作成したり、画像上の対象物の一部を無視したりすることが可能になります。例については透明化ガイドラインの章を参照してください。

透明度を用いて不要なピクセルをマークする手法には、いくつかの利点があります。すべての情報が画像ファイルに直接保存されます。テスト対象アプリケーションで使用された元の透明/半透明のソースアイコンがあれば、それらをすぐにテンプレート画像として使用できます。最後に重要な点として、透明度は標準的な画像機能であるため、サードパーティ製画像エディタでもテンプレート画像を準備できます。Gimpを使用してもWindowsペイントを使用しても、透明度の処理は同じように機能します。

新しい画像エディタの主な機能は以下の通りです：

エディタは3つの編集モードをサポートしています：
1. ズームと切り抜き モードでは、対象コンポーネントにズームし、その画像を切り抜くことができます。
2. 消去モードでは、マウスクリックとドラッグで不要な画像領域を削除します。
3. クリックポイント モードでは、最適なクリック位置（いわゆる「クリックポイント」）を定義できます。デフォルトでは画像の中心が設定されています。
右側のボタングループは選択されたエディタモードに依存します。図に表示されているのは ズームとクロップ用です。切り抜き形状は3種類から選択可能です：矩形、円形（楕円）、三角形。さらに内側切り抜きと外側切り抜き（内側または外側のピクセルを除去）を切り替えるボタンが2つあります。内側ピクセルの除去は、画像内部のピクセルを一括消去する際に使用できます。
リセット フルスクリーン画像ボタンは、ソース画面の画像が利用可能な場合にのみ表示されます。選択するとエディタがフルスクリーン画像にリセットされ、新たに開始します。
ヒントボタンをクリックすると、現在のエディタモードの説明がポップアップ表示されます。
左下のフィールドには、現在の画像サイズとズーム倍率が表示されます。
一致フィールドは、現在のテンプレート画像に対するオンザフライ検索を提供します。比較コマンドのプロパティウィンドウ（CompareTo、画像クリックなど）からエディタが開かれ、かつソース画面の画像が利用可能な場合にのみ表示されます。親プロパティウィンドウで指定されたパラメータに基づき、現在の画面上で現在のテンプレート画像が何回検出されるかを表示します。画像編集のたびに更新されます。フィールドをクリックすると、コンポーネントの位置を示す「画像検索詳細」ウィンドウがポップアップ表示されます。
元に戻す/やり直しボタンは、直前の画像編集を元に戻すか再適用します。画像内を右クリックしても元に戻すが実行されます。
ズームスライダーでズームレベルを調整できます。マウスホイールでもズーム操作が可能です。ズーム＆クロップモードでは、マウスの左クリックで画面をズームし中央に配置します。

編集者ワークフロー

新しいテンプレートの作成に関する推奨ワークフローは以下の通りです：

エディタは初期状態で、デスクトップ画面全体をズームして表示する ズームとクロップモードで表示されます。
切り取りたいコンポーネントのおおよその位置をクリックしてください。エディターはクリック位置にズームインして中央に配置します。.
適切な拡大率になるまで繰り返しクリックし、快適にトリミングできる状態に調整してください。ズーム操作はいつでも右クリックで元に戻すことができます。
微調整を行うには、Controlキーを押しながらマウスをドラッグして画像を移動させます。マウスホイールで拡大・縮小することも可能です。
最も適切なトリミング形状を選択し、画像内でマウスをドラッグしてトリミングしてください。いつでも右クリックで元に戻せます。
該当する場合、不要なピクセルを消去する：
1. より大きな形状の領域を削除するには、 ズーム＆クロップ モードで 外側クロップ オプションを有効にしてください。対象のクロップ形状（長方形、三角形、楕円形）を選択し、マウスをドラッグして消去領域を定義します。
2. 個々のピクセルや不規則な領域を消去するには、消去モードを選択します。消しゴムのサイズを選択し、クリックやマウスドラッグでピクセルを消去します。
画像編集中は、 マッチフィールドを注視してください。画面上に検出されたオブジェクト数が期待値と一致していることを確認してください。誤検出があった場合は編集を元に戻してください。
各テンプレート画像にはクリックポイントが設定されています。これはコンポーネントが画面上で検出された際に、呼び出しコマンドがクリックすべき位置を指定します。デフォルトでは画像の中心が設定されています。カスタマイズが必要な場合は、 クリックポイントモードに切り替え、画像をクリックして設定してください。この操作は必ず最終段階で行ってください。トリミング操作を行うとクリックポイントがリセットされるためです。
結果に満足したら、テンプレート画像を保存してください。

透明性ガイドライン

次のようなシンプルな画面で、透明性の仕組みを説明しましょう：

以下の例を再現したい場合：

上記の画像を右クリックし、ブラウザのポップアップメニューから「名前を付けて画像を保存」を選択してダウンロードしてください。
ロボットを起動します。ログインダイアログで接続タイプ「静止画像」を選択し、画像ファイルのパスを入力します。その後、接続をクリックします。
スクリプトエディタが開いていることを確認してください。右側のコマンドバーから比較対象または画像をクリックコマンドをスクリプトにドラッグしてください。
コマンドプロパティウィンドウが表示されます。新しいテンプレート画像を作成することを選択します。
テスト画面付きのイメージエディタが表示されます。以下の手順に従って例を再現してください。対応する位置を確認するには、 Match フィールドをクリックしてください。

目標1：灰色の背景にある笑顔の絵文字を見つけよう

これは古いロボットバージョンと互換性のある最も単純なケースです。最初のスマイルマークの周囲でマウスをドラッグするだけで切り抜きが可能です。 Match フィールドには、「search2」アルゴリズムがそのテンプレートを1回だけ検出したことが表示されます。

目標 #2: 笑顔の絵文字を両方見つける

両方のスマイリーにテンプレートを合わせるには、灰色の背景を削除する必要があります。画像を再度切り取る前に、少し回り道をして半透明について説明しましょう。テンプレートの信頼性に影響するため、これを理解することは非常に重要です。

コンポーネント画像、特にアイコンには、オブジェクトの縁に半透明ピクセルが含まれていることがよくあります。これらは背景色と混ざり合い、滑らかなオブジェクトの曲線を生成します。次の画像を注意深くご覧ください。左の画像は元のスマイルアイコンの詳細部分を示しています。半透明ピクセルを赤で強調表示しました。右側の2つの画像は、これらのピクセルが灰色と白の背景とどのように混ざり合うかを示す、画面からの対応する切り抜きです：

重要な注意点として、テンプレート画像内の半透明ピクセルは、高コントラストの背景上で比較失敗を引き起こす可能性があります。ロボットはわずかに混ざったピクセルを合格率内で処理できますが、許容度はかなり低いです。予測可能な結果を得るためには、背景と混ざっていると思われるピクセルは常に除去してください。画像を小さくトリミングし、可能な限り完全に不透明な領域、あるいは単色領域に頼るようにしてください。

それでは例に進みましょう。まずツールバーのボタンを選択し、楕円切り抜きを設定します。次にマウスをドラッグして、下図のようにスマイルマークを切り抜きます。結果が満足いくまで右クリックで元に戻し、一致フィールドに2件の一致が表示されるように調整してください。

目標 #3: まっすぐな目をしたスマイリーをすべて見つける

一致する目を持つすべてのスマイリーを見つけるには、それらを異なるものにする画像部分（口）を除去します。ボタンをクリックして長方形切り抜きに戻します。次に 外側切り抜きボタンを選択し、切り抜き操作で内部ピクセルを除去します。次に、下図のようにマウスを口周辺にドラッグして切り抜きます。結果が満足できる状態になるまで右クリックで元に戻し、一致フィールドに3件の一致が表示されるように調整してください。

口を削除するには、最終的に消去モードも使用できます。ただし、このモードは個々のピクセルを自由に細かく消去するのに適しています。この場合、矩形切り抜きの方が効率的です。

目標 #4: 画面上のすべてのスマイリーを見つける

前の例と同様に、画面上のすべてのスマイリーにテンプレートが一致するよう、目を削除します。ただし、このテンプレートを実際のデスクトップと比較する際は注意が必要です。現在単一の色のみで構成されているため、同じ色または類似色の広い領域と一致する可能性があるからです。