雰囲気でもいいからAHKでブラウザを弄りたい人への記事

#概要
AHK(AutoHotKey)でブラウザをいじる時のテンプレや注意点を記載していく記事。
細かい理屈とかは全部省いています。自分で調べてください。
難しいことわからねーけど自動化したい！という人の参考になれば幸いです。
また注意点として私はHTMLとか正直よくわかってないので、認識が間違っているところがあるかもしれません。
**俺は雰囲気でツールを作っている。**

AHKそのものについては別途記事を作成しているのでご参考に
[AutoHotKeyの利用補足資料](https://qiita.com/shuredinger_chan/items/0cabf2fed2e02b0b5755)

#ページの特定まで
###該当ページを表示（例ではブラウザはIE）

```
url := "https://XXXX"
ie := ComObjCreate("InternetExplorer.Application")
ie.visible := true
ie.navigate(url)
```
他のブラウザでも似たやり方でＯＫ

###該当のページ(window)の特定

```
For window in ComObjCreate("Shell.Application").windows{
    If window.LocationName = "該当ページのロケーションネーム"{
        Break
    }
}
```
ロケーションネームは基本的にタブ名称です。
また、フレームがある場合は以下の感じでフレームを特定してあげる。

```
objFrames := Array()
objFrames := window.document.frames
objFrame := objFrames[i]
```

#要素を取得する方法
window（orフレーム）を特定したら要素(HTMLelement)を取得します。
取得方法は色々あると思いますが、私は以下の2つでどうにかしてます。

```
hogeID := window.document.getElementById("ID名"
```
ID名はソースや後述の方法で拾ってきてください。単一のHTMLelementが取得できます。

```
hogeClass := window.document.getElemensByClassName("クラス名）
```

クラス名はソースや後述の方法で拾ってきてください。HTMLコレクションが取得できます。
ここからhogeClass[i]でHTMLelementが取得できます。
なお**HTMLコレクションは一見配列に見えますが配列ではないので、For~in等を使おうとするとバグります。**
気を付けてください。
なおHTMLコレクションはLENGTHのプロパティを持っているので、長さを取得してごり押しでループさせるのはありです。

###ソース（body.innerHTML)を見る
クラス名やIDを確認するときにフレームが存在して見にくい場合や、
アプリの都合でソースが見えない場合は以下の手法で
body.innerHTMLをテキストに落としてクラスやＩＤなどを確認します。

```
For window in ComObjCreate("Shell.Application").windows{
    If window.LocationName = "該当ページのロケーションネーム"{
        Break
    }
}
objFrames := Array()
objFrames := window.document.frames
objFrame := objFrames[i]
inHtml := objFrame.document.body.innerHTML

FileAppend %inHTml%,output.txt
```


#要素にあるメソッドを動かしたり、プロパティを弄る
上記で要素を取得したら、要素のメソッドを動かしたりプロパティを弄ります。
UIやソースを見ながら弄っていきましょう。

###**クリックする**
基本of基本。だいたいこれ。

```
hogeID.Click()
hogeClass[0].Click()
```

###**valueの中身を取得する**
あまりvalue使ってるのないですけど、基礎的なやつ。
条件式などで活躍。

```
hogeVal := hogeID.value
```

###**innerTextを取得する**
innnerTextで取得できるのはソースの<>に入ってないところです。
例えるとこんな感じ

```
<div Class="HOGEHOGE" ID="HOGE"> ここがinnnerText </div>
```
ここは以下の方法でとれます。

```
hogeInnerText := hogeID.innerText
```


#ちょっと面倒なやつ
基本的には上記の使えばどうにかなります。
しかし、それだけではできない面倒くさいやつもいますので、
その対処をちょこっと書きます。

###何かを選択した後にボタンをクリックすると動くタイプ

一覧で何かを選択させてから、ボタンをクリックするタイプです。
（良い例が見つかったら添付します）

このタイプは（私の知る限りは）「選択されている」という情報がCLASSに付与されてるので、
それを書き換える事で弄ることができます。
例を記載します。
CLASS("hogehoge")に一郎から四郎まで存在しており、初期では一郎を選択されているとしましょう。
これを三郎に変更するとします。
この場合、

```
<div Class="hogheoge SELECTED">一郎</div>
<div Class="hogheoge">二郎</div>
<div Class="hogheoge">三郎</div>
<div Class="hogheoge">四郎</div>
```
のような形で最初は記載されていますので、
以下のようにして三郎をセレクトさせてあげる必要があります。

```
window.getElementsbyClassNamea("hogehoge")[0].ClassName := "hogehoge"
window.getElementsbyClassNamea("hogehoge")[2].ClassName := "hogehoge SELECTED"
```
このようにClassNameを変更させてあげる事で選択先を変更させる事ができます。
この状態でボタンをClickすればOKですね。

###Attributeの内容を取得する
HTMLにはAttributeなるものが存在します。Attributeはノード属性らしいですが私はよくわかりません。
よくわからなくても利用しないといけない場合がありますので、対処法を少し。
まず、エレメントにあるAttributeの一覧を獲得しましょう。

```
hogeAttributes := window.document.getElementById("hoge").attributes
```
これをテキストなりMsgBoxなりに落として中身を見ますが、
なおAttributesは配列ではないのでFor~inは使えません。注意。

で欲しいAttributeが見つかったら

```
hogehogeAttribute := window.document.getElementById("hoge").getAttribute("hogehoge")
```
といった形でAttributeを取得できます。
条件式で必要となる場合がたまにあるので、覚えておくと良いと思います。


#おわりに
HTMLとか良くわからなくても、ロジックさえ組めれば雰囲気でブラウザは弄れます。
詳しいことは詳しい人に任せればよいのです（エンジニアの風上にも置けない発言）
とりあえず動かしてみましょう。

<参考>
[htmlelementのリファレンス](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement)
[htmlコレクションのリファレンス](https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection)