こんにちは！もり（@excelprog）です！
前回の記事では、ユーザー名とパスワードを入力してログインする方法をお伝えしました。
Webシステムにログインする時には「ログインボタン」をクリックしますよね。このログインボタンは、IDやパスワードなどのユーザが入力した情報を、サーバサイドに送信するためのボタンです。
今回の記事では、画像タイプの「送信ボタン」をクリックする方法を紹介していきますよ。
画像タイプの送信ボタンとは
画像タイプの送信ボタンとは、「画像ファイル」をボタンのような見た目として作られている「送信ボタン」です。
実際のサンプルをみてみましょう。題材はＳＭＢＣ日興証券オンライントレードのログインページです。
「ログインボタン」に注目してみると、このようにカギのマークがついていてオシャレですね。
デザイン方法が気になるこのオシャレなボタンこそが、ボタンの見た目をした画像ファイルなのです。
GoogleChromeの検証機能でボタンのHTMLをみてみましょう。（検証機能の使い方は前回の記事をご覧くださいね。）
inputタグのtype属性の値がimageになっていて、src属性で画像ファイル(.gif)のURLが設定されています。
このような作りにすることで「画像タイプの送信ボタン」が作成できるのです。
（おさらい）IE起動からID・パスワード入力までの操作
これは前回のおさらいです。IEの起動からHTMLドキュメントの読み込み処理です。
URLには、題材の日興証券ログインページを指定しています。
Dim objIE As InternetExplorer 'IEオブジェクトを準備
Set objIE = CreateObject("Internetexplorer.Application") '新しいIEオブジェクトを作成してセット
objIE.Visible = True 'IEを表示
Dim strUrl As String '次ページのURL
strUrl = "https://trade.smbcnikko.co.jp/Etc/1/webtoppage/"
objIE.navigate strUrl 'IEでURLを開く
Do While objIE.Busy = True Or objIE.readyState < READYSTATE_COMPLETE '読み込み待ち
DoEvents
Loop
Dim htmlDoc As HTMLDocument 'HTMLドキュメントオブジェクトを準備
Set htmlDoc = objIE.document 'objIEで読み込まれているHTMLドキュメントをセット
ログインするためには支店コード・口座番号・パスワードを入力する必要があるので、それぞれのテキストボックスのid属性を確認します。
このとおり確認できます。
- 支店コード：id属性=”padInput0″
- 口座番号：id属性=”padInput1″
- パスワード：id属性=”padInput2″
getElementByIdメソッドの引数にid属性を指定してテキストボックスに値を入力するコードがこちらです。
htmlDoc.getElementById("padInput0").Value = "123" '支店コード
htmlDoc.getElementById("padInput1").Value = "123456" '口座番号
htmlDoc.getElementById("padInput2").Value = "password" 'パスワード
name属性の値からボタンを特定してクリックする
さてここからが今回の本題！画像タイプのボタンをクリックする方法を紹介していきます。
流れはこのようになります。
１．name属性が指定値である「要素タグのコレクション」を取得する
２．取得したコレクションの中から、目的のボタンを取り出す
３．目的のボタンをクリックする
要素タグのコレクションを取得する
getElementsByNameメソッドを使用して「要素タグのコレクション」を取得します。
ターゲットであるログインボタンのHTMLをもう一度確認します。
name属性の値はlogInですね。getElementsByNameメソッドの引数に文字列型で指定します。
コレクションを格納する変数には、IHTMLElementCollection型のオブジェクト変数を用意します。
Dim loginBtns As IHTMLElementCollection
Set loginBtns = htmlDoc.getElementsByName("logIn")
これで、name属性が”logIn”の「要素タグのコレクション」が変数loginBtnsに格納されました。
【イメージ】
コレクションの中から目的のボタンを取得する
コレクションにインデックスを指定して、目的のオブジェクト（ログインボタン）を取り出します。
「インデックス」とは、配列やコレクション全体の中の何番目であるかを示す番号です。要素番号・添え字と呼んだりもします。
今回のターゲットであるログインボタンのname属性=”logIn”が全体の何番目に登場するかHTMLで確認します。
Ctrl+Uで画面の全ソースを表示して、Ctrl+Fで登場する検索ボックスで検索します。
name属性=”logIn”はページ内に１つのみであることが確認できました。
さきほどのコレクションのイメージ図では複数の要素タグを格納する絵を示しましたが、このログインボタンの場合は、コレクションの中身が１つだけということになります。
全体の１番目なので、インデックスには0を指定します。
IHTMLElement型のオブジェクト変数を用意して、コレクションの中から取り出したオブジェクトへの参照を格納します。
Dim loginBtn As IHTMLElement Set loginBtn = loginBtns(0)
これで、コレクションの中から「ログインボタン」のオブジェクトを取り出し、その参照を格納できました。
【イメージ】
特定したボタンをクリックする
「ボタン」の参照が格納されているオブジェクト変数loginBtnにClickメソッドを実行してクリックします。
コードがこちらです。
loginBtn.Click
これで、今回の目的である「画像タイプの送信ボタンをクリック」ができて、無事にログインができました！
クリック処理のコードまとめ
さて、ここまでの処理はこのように１行で記述することもできますが、
htmlDoc.getElementsByName("logIn")(0).Click
今回の記事では、処理の仕組みを詳しく説明するために５行に分けて記述しました。
Dim loginBtns As IHTMLElementCollection
Set loginBtns = htmlDoc.getElementsByName("logIn")
Dim loginBtn As IHTMLElement
Set loginBtn = loginBtns(0) 'コレクションの1番目の要素を取得
loginBtn.Click
- 1~2行目：name属性=logInの要素タグをコレクションに格納する
- 3~4行目：コレクションの中から目的のオブジェクト（ボタン）を取り出して、その参照を格納する
- 5行目：Clickメソッドでクリックする
IE操作で使用するMSHTMLライブラリは、型の名称・メソッド名などが複雑なので、こうして処理を分けて記述してみることでより理解が深まりますよ。ぜひ試してみてくださいね。
まとめ
「画像タイプの送信ボタン」を、name属性の値を使用してクリックする方法をお伝えしました。
ただし、ボタンの作りによっては、inputタグの中にname属性が存在しない場合があります。
name属性がないとオブジェクトが取得できずクリックできない・・・？
大丈夫です！次回はinputタグの他の属性を使用したクリック方法を紹介していきます。
どうぞお楽しみに！
連載目次：エクセルVBAでIEを操作してWEBスクレイピング
IEを操作してWEBページのデータを取得して、エクセルのデータとして取り込む、つまりWEBスクレイピングをエクセルVBAで実現します。各種WEBページを課題として様々なデータの取得の仕方を解説していきたいと思います。- 【エクセルVBAでIE操作】10分で終わるセッティングとWEBページの閲覧確認
- 【エクセルVBAでIE操作】HTMLタグと要素そしてドキュメントの取得
- 【エクセルVBAでIE操作】ブラウザの読み込み待ちをしないとダメなのです
- 【エクセルVBAでIE操作】ページ内のリンク先URLを全部取得する
- 【エクセルVBAでIE操作】ディスクリプションなどの要素をname属性でGetする
- 【エクセルVBAでIE操作】hタグなどの要素をタグ名でGetする
- 【エクセルVBAでIE操作】WEBページのテーブル要素を自動で取得する方法
- 【エクセルVBAでIE操作】IEで検索窓にキーワードを入力して送信する方法
- 【エクセルVBAでIE操作】ページをクロールしてブログの記事一覧を取得する方法
- 【エクセルVBAでIE操作】ブログの記事一覧ページから公開日とカテゴリを取得する
- 【エクセルVBAでIE操作】ページャーを最後のページまでどんどんリンクする
- 【エクセルVBAでIE操作】ユーザー名とパスワードを入力してログインをする