初めてのIE操作(4)~タグ名とキーワードからHTML要素を取得するFunction

HTML要素をタグ名とキーワードで特定して取得するFunction

前回まで

akashi-keirin.hatenablog.com

akashi-keirin.hatenablog.com

akashi-keirin.hatenablog.com

で、Webページを取得して、仮に「右クリック→ソースの表示」や「[Ctrl]+[U]」や「[F12]」などの技が封じられていても、そのHTMLソースをぶっこ抜くところまで進んだ。

後は、データを入力して、必要に応じてクリックするだけである。

データ入力のために必要なこと

データ入力をするためには、ページ上でデータを入力するための場所(たいていはテキストボックスみたいな入力窓口だと思う)がHTML上でどのように表現されているのかを突き止めること。

たいていは「<INPUT>」タグで囲まれたINPUT要素。

そのうち、目的の要素が取得できれば良いことになる。

幸い、getElementsByTagNameという非常に便利なメソッドがあるので、HTMLドキュメントオブジェクトをすでに捕まえた今、目的の要素の取得など、指呼の間にあると言えよう。

目的の要素を捕まえる

今回は、

f:id:akashi_keirin:20181216224135j:plain

の「検索」のところに文字を入力することにする。

まずは、HTMLソースの分析。

前回ファイル出力したHTMLソースをエディタで開いて、それっぽいところを探す。

はてなブログのサイドバーにある検索窓の場合、「記事を検索」という独特の文字列があるから、これが使えそう。

エディタ上で「記事を検索」でテキスト検索すると、あっさり見つかった。

f:id:akashi_keirin:20181216224147j:plain

ちょい読みづらいかも知れないが、当該のINPUT要素のところを抜き書きすると、

<input name="q" class="search-module-input" required="" type="text" placeholder="記事を検索" value="">

となっている。

別にどれを特定用のキーにしても良さそうだけれど、例えば「name="q"」という文字列はHTMLソース内の他にどこにもなかったので、これを使うことにする。

コーディングの考えかた

上述したとおり、InternetExplorer.DocumentInternetExplorer.HTMLDocumentオブジェクトのgetElementsByTagName("TagName")メソッドを使うと、HTMLドキュメント内の引数で指定したタグを持つ要素のコレクションを取得することができる。

今回の場合だとINPUT要素を全て取得することになるので、あとは、それらをしらみつぶしにして、要素の文字列内に「name="q"」という文字列を持つものを探せば良い。

要素オブジェクトからタグ名も含めた文字列を取得するには、outerHTMLというプロパティを参照すれば良い。

つまり、次のような手順になる。

  1. DocumentHTMLDocumentオブジェクトのgetElementsByTagName("input")メソッドを用いて、INPUT要素のコレクションを取得する
  2. INPUT要素のコレクションをループで巡回して、そのouterHTMLプロパティの値に「name="q"」が含まれていたら、その要素を取得する
  3. その要素にはValueプロパティがあるはずなので、Valueプロパティを任意の文字列にする

このようにすれば良い。ちなみに、今回は、「検索」ボックスに「ち~んw」と入力することにする。

というわけで、コーディング。

まずは、タグ名とキーワードを元に要素を取得するFunctionから。

リスト1 標準モジュール
Public Function getElementByTagAndKeyWord( _
                  ByVal targetIE As InternetExplorer, _
                  ByVal targetTagName As String, _
                  ByVal targetKeyWord As String) As Object
  Set getElementByTagAndKeyWord = Nothing
  With targetIE
    Dim targetElement As Object
    For Each targetElement In .Document.getElementsByTagName(targetTagName)
      If InStr(1, targetElement.outerHTML, targetKeyWord) > 0 Then
        Set getElementByTagAndKeyWord = targetElement
        Exit Function
      End If
    Next
  End With
End Function

上で説明したとおりのコードなので、説明は省略。

お次は、リスト1を利用して、検索ボックスに「ち~んw」と入力するコード。

スト2 標準モジュール
Public Sub test()
  Dim targetIE As New InternetExplorer
  With targetIE
    .Visible = True
    Call .Navigate("http://akashi-keirin.hatenablog.com/entry/2018/12/16/001606")
    Do While .Busy Or _
             .ReadyState <> READYSTATE_COMPLETE
      DoEvents
    Loop
  End With
  Set targetIE = getIEByTitle("素人が")
  Dim targetTextBox As Object
  Set targetTextBox = getElementByTagAndKeyWord(targetIE, "input", "name=""q""")
  targetTextBox.Value = "ち~んw"
End Sub

これもまあ、説明は省略。

前回まで同様、テキトーにブレークポイントを設定して、待機時間の調整は手動(w)

実行

f:id:akashi_keirin:20181216224155j:plain

「検索」のところに「ち~んw」と入っているのがおわかりだろうか。

あとは、必要な箇所をクリックするだけ。続きは次回!

参考

akashi-keirin.hatenablog.com

akashi-keirin.hatenablog.com

akashi-keirin.hatenablog.com

akashi-keirin.hatenablog.com

akashi-keirin.hatenablog.com