![WildefireでChromeの操作](http://take-web.com/auto/wp-content/uploads/2020/11/Chrome_Extension_wildfire.png)
![](http://take-web.com/cad/wp-content/uploads/2018/10/2019-10-8_7-22_No-00.png)
![](http://take-web.com/auto/wp-content/themes/cocoon-master/images/man.png)
めんどうが嫌いなSAMです。
Chromeブラウザ操作を記録してくれ、次から同じことを繰り返してくれる便利ツールの{Wildfire}(Chromeの拡張機能)どうやって使うの?
● インストールから、サンプルとしてTwitterにログイン —> 自動投稿までを作ってみたいと思います。その間でわからなかったこと、気づいたことなどを書き留めています。
よく理解できない点:
ファイルを保存するシステムがなんか、よく理解できない。
ブラウザだけの自動化でなく、DeskTop全体の自動化したいならAutoitとかAutoHotkeyが便利だと思います。
:_ 初歩的な使いかたは、これで理解できると思います。
:_ CSVファイルの読み込み(使い方):
:_他のChrome拡張機能(iMacroのような)
まずは、chrome ウェブストアを開き「Wildfire 」インストール
Firefox版もあるようです。
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-8_13-28-3_No-00.png)
開いたブラウザを閉じないように設定
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-11_19-53-0_No-00.png)
再生ボタンを押し、自動が始まり最後終了でブラウザが閉じてしまいます。
ブラウザが閉じないようにするには「Setting」で「Leave Simulation Window Open」をONにします。
ヘルプファイル(コマンド説明)を開くには
![コマンド説明](http://take-web.com/cad/wp-content/uploads/2018/10/command_help.png)
メニューにある「Docs」を開いて下さい。
![コマンド説明](http://take-web.com/cad/wp-content/uploads/2018/10/help-0.png)
矢印は処理時間
![](http://take-web.com/cad/wp-content/uploads/2018/10/fire.gif)
矢印にタッチすると、詳細が表示されます。このときは「Timer」秒数を設定できます。
次の処理開始までの時間
テストYahooを開く
Chromeの操作を録画するには
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-11_5-35-13_No-00.png)
「WildFire」のアイコンをクリックし、
「Start Recording」出し、押します。
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-11_13-12-11_No-00.png)
終了は、「Stop Recording」
Flow 構造図の詳細
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-11_15-42-7_No-00.png)
ファルダみたいなアイコン=New Tab
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-11_15-57-5_No-00.png)
赤枠内のURLを開きます。
アイコンつないでる矢印は、実行までの待ち時間
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-11_16-39-37_No-00.png)
自動操作の記録をゆっくりすると、ここの時間が長いので自動で動かすときは短くします。
1secsがいいかも
上のを改造し、Twitterにログイン
URLを変更
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-12_11-19-36_No-00.png)
(1)のアイコンをクリックし、左側の詳細を出します。
(2)のURLをTwitterに変更します。( https://twitter.com/ )
Add Node (アイコンを追加)
![](http://take-web.com/cad/wp-content/uploads/2018/10/tuika.gif)
一番左のアイコンをクリックすると、ノードが追加されます。
新しいノード(アイコン)を矢印で結ぶ
![](http://take-web.com/cad/wp-content/uploads/2018/10/yajirusi.gif)
ノード(アイコン)にマウスを近づけると、4つのポイントが表示されます。それをドラッグし新しいノードのポイントまで持ってゆくと結合されます。
ノードのプロパティを変更する(For ログインID)
![](http://take-web.com/cad/wp-content/uploads/2018/10/chengeP.gif)
(1)変更したいノードを選択
(2)左に現れたプロパティより、「Data Input」を選択します。
(3)TwitterのログインCSSを調べます。
(4)value => twitter ID を入れます。
(5)CSS Selector => input.text-input.email-input を入れます。(複数のclass名は.でつなぐ)
ノードを追加する(For パスワード)
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-17_11-44-1_No-00.png)
Class複数あるので、input[type=password]を使います。
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-17_11-54-7_No-00.png)
ノードを追加する(ログインボタンを押す)
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-18_12-42-47_No-00.png)
Mouse Clickを選び Css Selectorに「input[type=submit]」と入れます。
Position XYは「0」のままで
Form Submitはダメでした。
![](http://take-web.com/cad/wp-content/uploads/2018/10/zz_2018-10-18_16-12-7_No-00.png)
コメント