![Ui_Vision](https://take-web.com/auto/wp-content/uploads/2020/12/Chrome_Extension_vision.png)
![](http://take-web.com/auto/wp-content/themes/cocoon-master/images/man.png)
以前、Kantuと呼ばれていたもので、Seleniumを基盤に作られているようです。昔の、iMacrosのような使い方ができます。iMacroの無料版は使いづらくなっています。また、デスクトップのアプリも操作できるようです、色々試してみます。英語苦手なものなので試すしかない。
私なりの理解ですので、間違っていたら許してください。
:_本家の英語サイト
Ui.vision (旧Kantu)のインストール方法
Chromeブラウザで、上記サイトを開いてください。
![](https://take-web.com/auto/wp-content/uploads/2021/04/UiVision_install_6.png)
赤矢印をクリックすれば、インストールしてくれます。
Ui.Visionの起動方法
![](https://take-web.com/auto/wp-content/uploads/2021/04/open_Ui_6.png)
赤枠内をクリックすれば、立ち上がります。
![Ui.Vision起動](https://take-web.com/auto/wp-content/uploads/2021/04/uivision_open_6.png)
Demoスクリプトを読んでみよう
Demoフォルダに短いサンプルあるので読んでみましょう
赤枠内の好きなものを見てスクリプトを理解しましょう。
![](https://take-web.com/auto/wp-content/uploads/2023/05/uiVision_macro31.png)
マクロ動かすと、色がつくようです(赤はエラーが出たマクロ)
![](https://take-web.com/auto/wp-content/uploads/2023/05/err_red31.png)
「DemoAutofill」を読んで見る
別記事にしてみました:
使い方初歩:WEBサイトより、データ取得しCSVファイルに保存
![](https://take-web.com/auto/wp-content/uploads/2022/10/get_nameAddress17-1024x689.png)
赤枠内のデータを取得します。
URLを開く
![](https://take-web.com/auto/wp-content/uploads/2022/10/open_url17.png)
コマンドにopと入れれば、検索自動でします。
ターゲットはURLを入れます。
文字取得は、storeText
![](https://take-web.com/auto/wp-content/uploads/2022/10/storetext_select17.png)
slect押すと、Chromeで場所を指定することができるようになります。
![](https://take-web.com/auto/wp-content/uploads/2022/10/select_path17.png)
このようになります。クリックするとパスが入ります。
WEBデータをCSVに 動画説明
国土交通省のサイトよりデータを取得し、CSVに出力
1:open URL ホームページを開く
![](https://take-web.com/auto/wp-content/uploads/2021/03/kenmei_input.png)
2:select コンボボックス(リスト一覧)より、一つ選択
![リスト選択](https://take-web.com/auto/wp-content/uploads/2021/03/select_combo.png)
3:Click 検索ボタンをクリック
![Findで場所特定](https://take-web.com/auto/wp-content/uploads/2021/03/UiVision_1.gif)
「Find」(赤矢印)を押すと、どこをクリックするかがわかります。確認に便利です。
Clickしたい場所を選択する「Select」
マウスを移動すると色が変わるので、色が変わったところクリックしたいときはそこで「左クリック」してください。
![クリックする場所を特定する](https://take-web.com/auto/wp-content/uploads/2021/03/select_css_23.gif)
4: Store 値 変数名
変数を宣言し、初期値を設定します。 store 1 myNum : myNum = 1のこと?
5:times N(回数) 終了は「end」 ループさせるためのコマンド
![ループ10回](https://take-web.com/auto/wp-content/uploads/2021/03/loop_10.png)
赤枠内を10回繰り返します。endが繰り返す最終行です。
6:executeScript javascriptを実行
return Number(${myNum})+1
変数myNumを+1します。目次が1なので、データは2から使います。
return で変数に値を戻します。
7:echo XXX
LogにXXXを書き出します。デバッグのとき便利かも
8~11:storeText ターゲット !csvLine
ターゲットで取得した文字列をCSVのカラムの値に追加。書き込みはまだ
storeText 4個でCSV一行
12:csvSave ファイル名
CSVファイルに一行書き込みます。
13:end
ここまでLoop を繰り返す。
Ui.Vision の簡単な使い方 = Record(録画)
![](http://take-web.com/auto/wp-content/themes/cocoon-master/images/woman.png)
Recordボタンを押し、自分がやりたい操作を一度します。次回は自動でしてくれます。
![録画・停止・保存](https://take-web.com/auto/wp-content/uploads/2020/12/record_vi.gif)
使い方: Record > Stop > Save 録画・停止・保存
![](http://take-web.com/auto/wp-content/themes/cocoon-master/images/man.png)
Record(録画)機能は万能ではありません。HTMLを読めないとLOOPとかできないと思います。
コマンドの説明
prompt 入力画面を開く
![prompt](http://take-web.com/cad/wp-content/uploads/2020/02/2020-2-12_15-1_No-00.png)
Target : 好きな文字列(入力画面のタイトルになります)
Value : 好きな変数名(入力した文字列の入る変数)
![prompt小窓](http://take-web.com/cad/wp-content/uploads/2020/02/2020-2-12_15-8_No-00.png)
storeText : タグの中のテキストを取得します。
![タグのテキスト取得](https://take-web.com/auto/wp-content/uploads/2020/12/tag_text_get.png)
入力した変数にタグ内の内容(テキスト)が入ります。
スクリプトはどこにある
HTML5 local storageにあるようです。
自分のハードディスクに入れたいときは、別途ソフト(FileAccess XModule )を入れないと使えません。
安全のため、ブラウザが自由にHDにはアクセスできません。
スクリプト DemoAutofillを読んで見る
![サンプルマクロ](http://take-web.com/cad/wp-content/uploads/2020/02/2020-2-12_15-46_No-00.png)
store, fast, !replayspeed マクロの実行速度を一番早くする
![マクロスピード](http://take-web.com/cad/wp-content/uploads/2020/02/2020-2-14_15-37_No-00.png)
fast : 遅れがゼロ
medium : 人が操作する感じのスピード
slow : 2秒遅れを入れます。
store, 15, !TIMEOUT_WAIT 目標物が見つからないとき、何秒待つか
最大15秒待って、エラーを発生させる
store, 60, !TIMEOUT_PAGELOAD WEBページのロード時間
ページが開くまで、最大一分間待つ
open URL~ URLを開く
![URL開く](http://take-web.com/cad/wp-content/uploads/2020/02/2020-2-14_16-0_No-00.png)
click, 要素xpath 要素をクリックする
![xPath_get](http://take-web.com/cad/wp-content/uploads/2020/02/2020-2-14_16-6_No-00.png)
Findを押すと、今のTagetどこか教えてくれます。
コメント