無料でChrome・Firefoxの操作を自動化＆ファイルのアップロードやデスクトップの操作もできる「UI.Vision」

業務には「同じ作業の繰り返し」がつきものですが、何度も同じ作業を繰り返していると「こういう単純作業を任せるために機械ってものが生まれたんじゃないのか？」と思うわけです。無料のChrome・Firefoxの拡張機能「UI.Vision」を使うと操作を自動化できるマクロが組めて単純作業がラクチンになるとのことなので、実際に使っていました。

Open-Source RPA and Web Automation Tools for macOS, Linux and Windows
https://ui.vision/

というわけで、実際にUI.Visionを使ってみます。Chrome版とFirefox版は、それぞれ以下の公式拡張機能ストアからダウンロード可能です。

UI.Vision RPA - Chrome ウェブストア
https://chrome.google.com/webstore/detail/uivision-rpa/gcbalfbdmfieckjlnblleoemohcganoc

UI.Vision RPA – Firefox (ja) 向け拡張機能を入手
https://addons.mozilla.org/ja/firefox/addon/rpa/

今回はChrome版を使ってみます。前述したChrome拡張機能ストアの個別ページで、「Chromeに追加」をクリック。

以下のようなポップアップが出現するので、「拡張機能を追加」をクリックすると自動でダウンロード＆インストールが完了します。

インストール完了後は、自動でチュートリアルページが開きます。実際にUI.Visionを使うには、拡張機能アイコンをクリックして「UI.Vision RPA」を選択すればOK。

毎回拡張機能アイコンをクリックしてからUI.Visionを呼び出すのはワンクリック手間がかかるため、何度も使用したい場合にはピンアイコンをクリックしておくと、ツールバーに常時表示できるため便利です。

「UI.Vision RPA」をクリックすると、以下のように別ウィンドウでUI.Visionが起動します。

UI.Visionのウィンドウはこんな感じ。なんだか複雑そうに見えますが、ざっくり言うと右上の「Record」を押すとユーザー側が実行した動作が記録されて、「PlayMacro」をクリックすると再生されるという仕組み。

というわけで実際に使ってみます。初回起動時は左のカラムにプリセットを多数保存した「Demo」というフォルダーが開いており、新規作成したマクロが最下部に追加される度にスクロールする必要が出てきて時間の無駄になるため、この「Demo」という部分をクリックしてフォルダーを閉じておきます。

今回は実験としてUI.Visionでいくつかマクロを作ってるので、まずは「TwitterアナリティクスのCSVファイルを自動で書き出す」というケースからやってみます。UI.Vision側で「＋Macro」をクリックして新規マクロを作成します。

名称を入力して、「Confirm」をクリックして保存します。

続いては作成した新規マクロの中身を書き込んでいきます。このマクロは「TwitterアナリティクスのデータをCSVファイルとしてダウンロードして保存する」という内容にするので、Twitterにログインして、Twitterアナリティクスのページを開いた状態にします。

UI.Visionのウィンドウで「Record」をクリック。これでUI.Visionは「Twitterアナリティクスのページをスタート地点として、これから行う動作を記録する」という状態に入ります。

Twitterアナリティクス側で「ツイート」→「データをエクスポート」→「By Tweet」の順でクリックしてCSVファイルをダウンロードします。

これでUI.Visionが「TwitterアナリティクスのCSVファイルをダウンロードする」という一連の動作を記録したので、「Stop Record」で記録終了。

「Save」をクリックして、作成したマクロを保存します。

ちゃんと記録した一連の動作を再現できるかどうかを確かめるため、「Play Macro」をクリック

全自動でTwitterアナリティクスのページが開き、CSVファイルがダウンロードされるという光景を目視確認できます。

マクロを実行してみて「あ、不要な操作が混じっちゃったな……」といった場合は「Table View」に実行した操作が上から順に時間順で並んでいるので、右クリックから「Delete」を選んで削除すれば大丈夫。

保存したマクロは、UI.Visionの左側のツリーに並ぶので、ここからいつでも呼び出し可能です。

続いては「ファイルのアップロード」を含むマクロを作成してみます。今回は実験のため、UI.Visionの開発元が運営している「OCRSpace」を使い、PNG・JPEG・WEBP・PDFファイルをアップロードしてOCR（光学文字認識）を実行します。まずは新規マクロを作成するため、UI.Visionのウィンドウ左上の「Macro」をクリックし、空欄にマクロ名を入力して「Confirm」をクリック。

OCRSpaceのページを開いた状態で、UI.Visionの「Record」をクリックして記録をスタート。

まずは「ファイルを選択」をクリック。

対象となるファイルを選択して、「開く」をクリック。

「START OCR!」をクリックしてOCRを実行。

これでUI.Visionに「OCRSpaceにファイルをアップロードしてOCRを実行する」という動作を覚えさせたので、UI.Visionのウィンドウ右上の「Stop Record」をクリックして記録終了します。

ただし、「ファイルをアップロードする」という操作が実際にちゃんと動くかどうかをテストする前に、アップロードするファイルのパスが「C:\fakepath\ほげほげ.jpg」というように、「C:\fakepath\」というフルパスが記載されるという点を変更する必要があります。Chromeの場合、セキュリティ上の問題でフルパスを返さないようにしているのが原因。修正するため、UI.Visionのウィンドウ側で「C:\fakepath\」が記録されている行を選択して、「Value」の値を自分で正しいパスに変更しておきます。

修正後は「Save」をクリックしてしっかりと保存。

これで「Play Macro」を実行すると、「OCRSpaceにファイルをアップロードしてOCRを実行する」という操作を自動で行ってくれます。

一方、今度はマクロでの自動記録が失敗しやすい「Googleドライブ」で自動化する方法を実験してみます。Googleドライブのページを開いてCSVファイルをアップロードする……という操作をマクロ化しても、UI.Visionで実行する際にエラーが出てしまいます。厳密には、UI.Visionは各HTMLの要素を指定してどこをクリックしていくかを記録していくのですが、アクセスする度に要素名が変わる場合や、自動的に要素名を特定できない場合、記録に失敗します。また、あくまでも「ブラウザ内の操作」に限定されているため、「保存時に開いたWindowsのダイアログのここをクリックする」「ショートカットキーを使う」というような感じで、OS自体の操作は記録されません。

しかし、UI.VisionにはOS側のキーボード入力やマウス操作も含めて完全に記録して再現できる「RealUser Simulation XModule」という補助ツールがあるので、実際にインストールして使ってみます。

XType - Real User Keyboard Event Simulation, Sendkeys
https://ui.vision/rpa/docs/xtype

まずは上記のページにアクセスして「UI.Vision RPA XModules Installer」をクリックします。

今回はWindows版を使うので、「Download for Windows」をクリック。

ダウンロードしたインストーラーを起動

「I accept the agreement」を選んで「Next」をクリック

「Next」をクリック

「Install」をクリックすると自動でインストールが完了します。

これで「OS側のキーボード入力やマウス操作を再現する」という機能を使える状態になったのですが、この機能を使うモードに入ると「Record」で記録するタイプの操作を記録できなくなるので、あらかじめ「Record」を使って問題が生じるまでの範囲を記録しておきます。まずは新規マクロを作成。

今回は「Googleドライブを開く」というところまでは「Record」で行えるので、Googleドライブのページを開いた状態で「Record」して、直後に「Stop Record」で停止。するとUI.Visionに「Googleドライブのページを開く」という操作が記録されました。

続いてはUI.VisionをOS側のキーボード入力やマウス操作を再現するモードにするため、UI.Visionのウィンドウの右上にある歯車アイコンをクリック。

「Vision」というタブを開いて、「Desktop Automation」にチェックを入れます。これでUI.Visionはブラウザの動作を再現するモードから、OS側のキーボード入力やマウス操作を再現するモードに入りました。

このモードでは「Record」を使った記録ができなくなり、各動作を自分でコマンド入力する必要があります。今回は「ファイルをアップロードする」という動作を以下の手順で自動化します。

1)Googleドライブのページを開いたウィンドウを手前に表示させる
2)「SHIFT＋U」というキーボードショートカットを入力してファイル選択ダイアログを呼び出す
3)アップロードするファイルをクリックする
4)「開く」をクリックしてアップロードを実行する

というわけで、いざ実践。新規コマンドを登録するため、「Add」をクリック。

新規コマンドは以下の部分で内容を入力します。

まずは「1)Googleドライブのページを開いたウィンドウを手前に表示させる」を実行するため、「Command」の欄に「bringBrowserToForeground」と入力。

続いてはOS側のキーボード入力を再現する「XType」とマウス操作を再現する「XClick」というコマンドを使います。「Add」をクリックして新規コマンドを作成し、「2)「SHIFT＋U」というキーボードショートカットを入力してファイル選択ダイアログを呼び出す」を実行するため、Commandに「XType」、Targetに「SHIFT＋U」というキー操作を実行する「${KEY_SHIFT+KEY_U}」を入力。

次はOS側のマウス操作を再現する「XClick」を使いますが、まず下準備が必要。Googleドライブ側のウィンドウで、ファイル選択ダイアログを手動で呼び出しておきます。

再びUI.Visionのウィンドウに戻って、「Add」からCommandに「XClick」と入力してTargetの空欄のさらに右側にある「Select」をクリック。

するとXClickの「範囲指定モード」に入ります。この状態は選択した範囲をキャプチャするモードで、XClickはマクロ実行時に「キャプチャ画像と一致する部分をクリック」という動作を行います。今回はアップロードするファイルをクリックさせたいので、対応する部分をドラッグ＆ドロップで範囲指定します。

範囲選択後、UI.Visionのウィンドウで以下のようなポップアップが出てくるので、「Confirm」を選択。これで「ファイル選択ダイアログでアップロードしたいファイルをクリックする」という操作が登録できました。

全く同じ要領で「開く」をクリックする操作も覚えさせます。「Add」からCommandに「XClick」と入力して「Select」をクリック。

範囲選択モードに入るので、ドラッグ＆ドロップで「開く」の範囲を指定。これで完成。

完成したマクロを「Play Macro」で動作させると、うまく動作することが確認できました。

なお、このマクロは特定ファイルをアップロードするという動作なので、複数回動かすと以下のように「すでに同じファイル名のファイルが存在するため、既存のファイルを置き換えるか両方のファイルを保持するか選んで下さい」というダイアログが出ます。こんな感じでマクロは「複数回動かすと挙動が変わる」というケースがあるため、注意してください。なお、このケースはXClickを使ってどちらかの選択肢を選ぶようにすると突破できます。