Yahoo!路線検索を自作ノンプログラミングツールでやってみた。

[前回](https://qiita.com/yizm/items/87dcdaa61fa448c5a854)の記事で紹介した自作のノンプログラミングツールでYahoo!路線情報の検索をやってみました。

[vbsめーかー](https://yizm.work/rpa_vbs_maker/)

## 感想：結構バグたくさんあった。。。
自分でフロー作って実行してみて、バグたくさん見つかりました。
でも、デバッグしながら検証して、とりあえず今回紹介するシナリオ分くらいはちゃんと動くようになりました。


成果物と素材のサンプルは[こちら](http://yizm.work/tmp/Book.zip)。


## 今回作るシナリオの流れ
 1.ブラウザとBook.xlsxを起動してYahoo!路線情報を開く
 2.出発地・到着地にBook.xlsxから取得した駅名を入力
 3.検索をクリック
 4.ページが読み込まれるのを待って、検索結果を取得
 5.Book.xlsxに検索結果を張り付け
 6.2～5を繰り返して表を埋める
 7.ブラウザを閉じる
こんな感じになります。

## Yahoo!路線情報
![yahoo.png](https://qiita-image-store.s3.amazonaws.com/0/360097/2cc288b4-e9a3-8f2c-7402-6cd3a63ec0c2.png)
このフォームを制御していきます。

## 事前準備：Excelブックを用意
![step0.png](https://qiita-image-store.s3.amazonaws.com/0/360097/e9fb176b-127d-ab82-fb90-89f12f9ed07c.png)
こんな感じで、出発地点と到着地点、検索結果が入る表をデスクトップに置いておく。
ファイル名はとりあえずテストだし、『Book.xlsx』で。

## vbsメーカーに変数を定義する
![var.png](https://qiita-image-store.s3.amazonaws.com/0/360097/06a006cb-19d5-7397-06cc-e1dea6bdb00d.png)
(+)プラスボタンを押して行を追加したら、こんな感じに変数を入れておきます。
アクションのデフォルト変数名だとどれがどのデータだかわかんなくなっちゃうので。

## シナリオのアクションを追加していく。
### 1.デスクトップのパスを取得
![step1.png](https://qiita-image-store.s3.amazonaws.com/0/360097/86553b7f-437e-d911-5118-0a3e0031b48a.png)
とりあえず、BookPathに入れとく。
### 2.デスクトップに置いたBook.xlsxのフルパスを作る
![step2.png](https://qiita-image-store.s3.amazonaws.com/0/360097/c913cc7c-e766-3dd4-d2e7-8bf3d7ba6c38.png)
文字列結合のアクションを使って、さっきデスクトップのパスを入れたBookPathに"\Book.xlsx"を追加したものをBookPathに入れるようにしておく。

### 2.ブックを開く
![step3.png](https://qiita-image-store.s3.amazonaws.com/0/360097/caddb79e-ffda-b161-c3b4-1731e95c1be6.png)
開いたブックへの参照がXlsxBook変数に設定される。

### 3.IEを起動してYahoo!路線情報を開く
![step5.png](https://qiita-image-store.s3.amazonaws.com/0/360097/320bb532-e517-1208-472a-c9939ee365d6.png)

### 4.条件分岐から、For ...Nextを設定する
![step4.png](https://qiita-image-store.s3.amazonaws.com/0/360097/f4359dad-28e3-6298-d0ab-87f1eb1141ec.png)
カウンタ変数にxlsRow変数を設定して、今回は3行目から7行目に表を作ったので初期値3～終了値7で設定する。

### 5.Yahoo!路線情報へページ遷移する
![step6.png](https://qiita-image-store.s3.amazonaws.com/0/360097/7315dc8c-ffa6-4546-cb53-aebdf0065abe.png)
For文の中で繰り返ししたいから明示的なページ遷移も作っておく。

### 6.行列指定でエクセルから出発駅を取得
![step7.png](https://qiita-image-store.s3.amazonaws.com/0/360097/a3e1224a-4893-caa0-16c7-e1e55eeabb8e.png)
For文のカウンタで行を指定して、S_EKI変数に出発駅を取得する。

### 7.行列指定でエクセルから到着駅を取得
![step8.png](https://qiita-image-store.s3.amazonaws.com/0/360097/c7e0e151-3677-3ae0-f213-13a20e054624.png)
同じ要領で到着駅もE_EKIに取得する。

### 8.Yahoo!路線情報の出発駅にS_EKIを設定する
![step9.png](https://qiita-image-store.s3.amazonaws.com/0/360097/9e3a259d-d958-fc6d-753f-ea79d88b5884.png)
F12でDOM要素確認したら、inputテキストボックスのidがsfromだったので、対象フォームには「input,type,text,sfrom」とキーワード指定してDOMオブジェクトを指定する。

### 9.同じく到着駅にE_EKIを設定する。
![step8-2.png](https://qiita-image-store.s3.amazonaws.com/0/360097/9177b406-eb74-195f-3f62-9baee10d1a62.png)
同じ要領で到着駅の設定も追加する。
到着駅のinputテキストボックスはstoだったので、「input,type,text,sto」とする。

### 10.検索ボタンをクリック
![step10.png](https://qiita-image-store.s3.amazonaws.com/0/360097/2d9ff2af-ffec-a2dc-3bf4-90a909c2a9db.png)
検索ボタンのidがserchModuleSubmitになっていたので、「input,submit,serchModuleSubmit」と指定する。

### 11.ページ読み込みを待機する
![step11.png](https://qiita-image-store.s3.amazonaws.com/0/360097/dc51ad28-ec3e-171f-5b12-0a1dd60031b2.png)
クリックするとページ読み込みが入るので待機を入れる。

### 12.念押しでSleep待機を入れる
![step11-2.png](https://qiita-image-store.s3.amazonaws.com/0/360097/0dac53cc-3885-ac15-77a1-041780598dc9.png)
ブラウザのReadyステータス待って値取得しようとするとエラー出ることがあったので、完全にロードが終わるのを待つためにSleep入れてみた。

### 13.検索結果の値を取得する。
![step12.png](https://qiita-image-store.s3.amazonaws.com/0/360097/c26b6596-bb6b-86f8-e6df-0714b7aafbef.png)
細かいエレメントにはあんまり一意のタグ付いてなくて指定しにくかったから、ちょっと広い枠のエレメントで指定してみた。
検索結果が表示されてるエリアのテキストをそのままCost変数にぶっこむ。

### 14.検索結果の取得値をエクセルに張り付け
![step13.png](https://qiita-image-store.s3.amazonaws.com/0/360097/1326f548-cce3-ddc5-dfba-5611a92370ab.png)
Cost変数を5列目のセルにぶっこむ。

### 15.並べ替え For ...Next(開始)(終了)の間に処理を入れる
![step14.png](https://qiita-image-store.s3.amazonaws.com/0/360097/d1507371-1144-58c9-0771-edbe380d2424.png)
これで表の行数分、検索と結果貼り付けを繰り返してくれる。

### 16.ブラウザを閉じる。
![step15.png](https://qiita-image-store.s3.amazonaws.com/0/360097/1c13f6b4-5a2b-4cf1-41c7-3a1da62d5f48.png)

### スクリプトとして保存する。
![step15-2.png](https://qiita-image-store.s3.amazonaws.com/0/360097/4a1f25ce-75fb-ff8a-618c-c7ef67e5d86b.png)
今回、出来上がったフローはこんな感じ。
これで、保存するをクリックしてスクリプトとして保存する。

## 実行してみた結果。。。
![step16.png](https://qiita-image-store.s3.amazonaws.com/0/360097/831b8b90-8c21-4159-a853-aa8895a18cf8.png)
セル見切れてるけど、料金とかルート1～3が全て張り付けられています。
意外といい動きするじゃない♪

## 使ってみて気付いた課題点
・シナリオのボックス化したヤツに何の値・変数が設定されてたかいちいち編集開かなきゃわからないからプロパティウインドウ作った方がいいなーと感じた。
・DOM要素検索のFunctionの検索スピードが遅い。でもこれはフォームの簡素化の為にこーゆー機能にしたからしょーがないかなって気もしている。
・For ...Nextみたいな条件分岐要素の並べ替え判定がちょっとシビアすぎたかも。ドラッグ&ドロップ以外の並べ替え機能も検討してみよう。

今後の課題として精進します。。。