VBA IE操作編 これで完璧！【リストボックスのJavaScript発動方法】

2020.05.02
この記事は約10分で読めます。

VBA IE操作編 8回目サムネイル

どうも、マサヤです！

この記事は、VBAでのIE操作が初めて or 慣れていない方向けに『Webサイト・システムの情報を取得・設定する方法』をお伝えしていく連載記事となってます！

 

前回はリストボックス選択・取得する方法を紹介しました！

VBA デキる解る！IE操作編 【リストボックスを選択・取得する方法】
VBA IE操作編 第7回目は、リストボックスの選択・取得する方法をお伝え！動画とソースを見ながら習得できます。VBAでのIE操作が初めて or 慣れていない方向けに『Webサイト・システムの情報を取得・設定する方法』をお伝えしていく連載記事
mmm-program.com
2022.05.22

 

今回は「リストボックスを選択したときにJavaScriptを発動させる方法」をお伝えします！

手動でリストボックス選択すると、次のリストボックス項目が変化するページがあるとしましょう。

このページに対して、前回コードでリストボックス選択しても、次のリストボックス項目が変化しません。

これは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が発動して、次のリストボックスが変化します。

例えば、焼肉が選ぶと次のリストボックスの項目は下図のように「ハラミ」「カルビ」「てっちゃん」が入ります。

※クリックすると大きくなります。

VBA リストボックス手動選択

では、「前回コードを使って失敗するとどういった動きになるか？」を確認してみましょう。

 

失敗：前回コードでリストボックスを選択した場合

 

先に失敗パターンを紹介します。

 

動画で失敗例を見る

では、前回コードでリストボックスを選択した動画をご覧ください。

※クリックすると大きくなります。
VBA js未発動VBA
見事に次のリストボックス内容が連動しておらず失敗していることが解ります。

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
主要部分でないため、独自関数であるIeGetObjの内容は省略しています。
内容を知りたいあなたは前回記事をご覧ください

 

スポンサーリンク

成功：リストボックス選択後に、JS発動の成功した動画

 

では、手動操作したときのように、リストボックスを変動させる方法を見ていきましょう。

まずは動画で動きを確認してから、VBAコードを見ていきましょう。

 

VBAコードでJavaScriptが発動した動画

VBA JS発動したリストボックス

焼肉を選ぶと、次のリストボックスが空白→ハラミとなっていることが解りますね。

次はどのように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を発動させることができます。

foods.FireEvent (“onchange”)

 

サンプルのリストボックスであるSelect属性には、下記のようにonchangeにJavaScript関数のlikefood（）が付与されています。これをFireEvenetメソッドで発動させています。
<select id=”like_food__example” onchange=”likefood()”>

onchangeがない場合、直接関数を指定する

今回のようにonchangeがあれば簡単ですが、無い場合は直接JavaScript関数を指定して発動させる必要があります。
その際は、下記のコードでJavaScriptを実行させることができます。
※サンプルのリストボックスのJavaScriptを直接指定した場合
ie.document.parentWindow.execScript “likefood();”

 

まとめ

 

リストボックスのJavaScript発動方法をお伝えしました。

リストボックスを選択してから、FireEvenetメソッドでJavaScriptを発動させる。

onchangeがない場合は直接JavaScript関数を、parentWindow.execScriptを使い実行する。

 

ここまで８回に渡り、VBA　IE操作編をお送りしてきました。

Webサイト情報の取得から入力操作までをじっくりお伝えしてきました。

最初からきっちりやっていれば、VBAでのIE操作がかなり上達しているのではないでしょうか？

 

さて、次がIE操作編の最終回をお送りします。

最後は、Webサイト上にあるファイルを選択（ファイル添付・アップロード）ボタンを操作する方法をお伝えします！

お楽しみに！

コメント