どうも、マサヤです！
この記事は、VBAでのIE操作が初めて or 慣れていない方向けに『Webサイト・システムの情報を取得・設定する方法』をお伝えしていく連載記事となってます！
前回はリストボックス選択・取得する方法を紹介しました！
今回は「リストボックスを選択したときにJavaScriptを発動させる方法」をお伝えします！
手動でリストボックス選択すると、次のリストボックス項目が変化するページがあるとしましょう。
このページに対して、前回コードでリストボックス選択しても、次のリストボックス項目が変化しません。
これはJavaScriptが動かないために発生する問題で、今回はこれを解決する方法を紹介します。
リストボックスのサンプルページ
リストボックスを選択すると、次のリストボックス内容が変化するサンプルページを用意しました。
ぜひ理解度を上げるためにも、記事を読む前にサンプルページのリストボックスを触ってみてください。
リストボックスのHTMLコード
サンプルのリストボックスのHTMLは下記となります。
<select id="like_food__example" onchange="likefood()"> <option value=""></option> <option value="焼肉">焼肉</option> <option value="お寿司">お寿司</option> <option value="おにぎり">おにぎり</option> </select>
ポイントとなるのが「onchange=”likefood(this.value)”」の部分で、onchangeとはリストボックスの項目選択時に発動するJavaScriptになり、この場合では項目選択されるとlikefood関数を実行するといった意味となります。
では、likefood関数とはどのような挙動をするJavaScript関数なのかを見ていきましょう。
発動するJavaScript関数（likefood）のコード
likefood関数のコードは下記となります。
<script type="text/javascript">
function likefood(){
var select = document.getElementById('like_food__example').value;
if(select == "焼肉" ){
document.getElementsByClassName('food_part_message')[0].innerHTML = "<strong>２. 焼肉のどの部位が好きですか？</strong>";
document.getElementById('like_food__part').innerHTML = "<option value=" + "ハラミ" + ">ハラミ</option><option value=" + "カルビ" + ">カルビ</option><option value=" + "てっちゃん" + ">てっちゃん</option>";
}
if(select == "お寿司" ){
document.getElementsByClassName('food_part_message')[0].innerHTML = "<strong>２. お寿司のどのネタが好きですか？</strong>";
document.getElementById('like_food__part').innerHTML = "<option value=" + "トロ" + ">トロ</option><option value=" + "サーモン" + ">サーモン</option><option value=" + "タイ" + ">タイ</option>";
}
if(select == "おにぎり" ){
document.getElementsByClassName('food_part_message')[0].innerHTML = "<strong>２. おにぎりのどの具材が好きですか？</strong>";
document.getElementById('like_food__part').innerHTML = "<option value=" + "梅" + ">梅</option><option value=" + "こんぶ" + ">こんぶ</option><option value=" + "ツナマヨ" + ">ツナマヨ</option>";
}
if(select == "" ){
document.getElementsByClassName('food_part_message')[0].innerHTML = "<strong>２. 上で好きな食べ物を選択してください</strong>";
document.getElementById('like_food__part').innerHTML = "<option value=" + "" + "></option>";
}
}
</script>
コードの挙動としては、リストボックスで選択された項目のValueを取得し、if文でValue内容の応じて次のリストボックスの項目を生成するといった動きをしています。
VBAで実現させたい動き（手動操作）
当然、手動でリストボックスを操作するとJavaScriptが発動して、次のリストボックスが変化します。
例えば、焼肉が選ぶと次のリストボックスの項目は下図のように「ハラミ」「カルビ」「てっちゃん」が入ります。
では、「前回コードを使って失敗するとどういった動きになるか？」を確認してみましょう。
失敗：前回コードでリストボックスを選択した場合
先に失敗パターンを紹介します。
動画で失敗例を見る
では、前回コードでリストボックスを選択した動画をご覧ください。
JavaScriptが上手く動かないVBAコード
前回コードを流用したコードを紹介します。
リスト選択だけなら問題ないですが、これではJSが発動しません。
Sub ie_NotJS_ListBox()
'IEオブジェクトを作成
Dim ie As InternetExplorer
Set ie = CreateObject("InternetExplorer.Application")
'HTMLコレクションを取得 独自関数化
Call IeGetObj(ie, "https://mmm-program.com/vba-test-selectbox2/")
'長いの変数に格納 可読性を高めるため
Set foods = ie.document.getElementById("like_food__example")
'Valueで選択 焼肉を選択
foods.Value = "焼肉"
'オブジェクトを閉じる
ie.Quit
'メモリからオブジェクトを破棄
Set ie = Nothing
End Sub
成功：リストボックス選択後に、JS発動の成功した動画
では、手動操作したときのように、リストボックスを変動させる方法を見ていきましょう。
まずは動画で動きを確認してから、VBAコードを見ていきましょう。
VBAコードでJavaScriptが発動した動画
焼肉を選ぶと、次のリストボックスが空白→ハラミとなっていることが解りますね。
次はどのようにVBAでJSを発動させているかを見ていきましょう。
このVBAコードでJavaScriptを発動！
Sub ie_NotJS_ListBox()
'IEオブジェクトを作成
Dim ie As InternetExplorer
Set ie = CreateObject("InternetExplorer.Application")
'HTMLコレクションを取得 独自関数化
Call IeGetObj(ie, "https://mmm-program.com/vba-test-selectbox2/")
'長いの変数に格納 可読性を高めるため
Set foods = ie.document.getElementById("like_food__example")
'Valueで選択 焼肉を選択
foods.Value = "焼肉"
'jsで発動させる
foods.FireEvent ("onchange")
'オブジェクトを閉じる
ie.Quit
'メモリからオブジェクトを破棄
Set ie = Nothing
End Sub
1行だけを除き、前回コードと同じです。
JS発動のカギはFireEventメソッド
さて、失敗コードとの違いはたった一つだけです。
17行目の下記コードを書くことで、JavaScriptを発動させることができます。
onchangeがない場合、直接関数を指定する
まとめ
リストボックスのJavaScript発動方法をお伝えしました。
ここまで８回に渡り、VBA IE操作編をお送りしてきました。
Webサイト情報の取得から入力操作までをじっくりお伝えしてきました。
最初からきっちりやっていれば、VBAでのIE操作がかなり上達しているのではないでしょうか？
さて、次がIE操作編の最終回をお送りします。
最後は、Webサイト上にあるファイルを選択（ファイル添付・アップロード）ボタンを操作する方法をお伝えします！
お楽しみに！
コメント