商品画像登録用のファイル選択ダイアログはsetTimeoutを使って動かす

以前公開したメルカリ自動操作ツールに関して、一点大事なことを忘れていました。

以前公開した「自分用に作成したPC版メルカリの自動操作ツール（VBA）の解説」のままツールを作成すると、

「出品情報入力画面へのセットは終わったし、ファイル選択ダイアログも何とか目的のファイルを選択させる処理を作ることができた。だけど、VBAでダイアログが出現するリンクをクリックすると、ダイアログが出たまま処理が止まってしまった！」という状態になってしまいます。

この現象は、VBA（正確にはIE）がダイアログの応答を待ってしまっているためです。イメージとしては「Msgbox」や「InputBox」を使った場合が分かりやすいと思います。どちらもそのダイアログを閉じる操作を行わない限り次の処理に進みませんよね。それと同じ現象が発生している状態です。

さて、ここで「仕方無いからファイル選択は手動でやるか・・・」となっては、ここまで自動化した意味がありません。

特別複雑な処理ではありませんので、今回で”setTimeout”の使い方も覚えてしまいましょう。ダイアログの操作以外にも直接Javascriptを実行できる様になるので、IE操作の幅がより広がります。

- 目次 -

1 setTimeoutとは？
2 setTimeoutでファイル選択ダイアログを表示させる
3 ダイアログに値を入力する
4 まとめ

setTimeoutとは？

スクリプトオブジェクトを利用して、指定のページでJavaScriptを実行させるための処理です。

「ie.document.Script.setTimeout “javascript:～”」で動作させることができます。

試しに以下のコードを実行してみましょう。

Sub test()
    Dim objIE As InternetExplorer
    
    Set objIE = CreateObject("InternetExplorer.Application")
    objIE.Visible = True
    objIE.Navigate2 "https://www.google.co.jp/"
    
    Do While objIE.Busy Or objIE.readyState <> READYSTATE_COMPLETE
        DoEvents
    Loop
    
    objIE.document.Script.setTimeout "javascript:alert('test')"
End Sub

上のソースではGoogleを開いていますが、ページは何でも構いません。

setTimeoutを使ってJavaScriptでアラートを表示させる処理です。実行してみるとIE上に「test」と表示されたのが確認できると思います。アラート以外にクリックイベントを発生させることもできますし、何らかのボタンを押した際に実行されるJavaScriptを無理矢理実行させることもできます。

これを利用し、VBAからダイアログを表示させるのではなく、JavaScriptを使って間接的にダイアログを表示させてみましょう。

setTimeoutでファイル選択ダイアログを表示させる

早速メルカリを開いて、ファイルのアップロードを行う場所のソースを確認してみましょう。

「<input class=”sell-upload-drop-file” multiple=”” name=”image1″ style=”display: none;” type=”file”>」この部分の様ですね。

ちなみにメルカリは最大4枚まで画像をアップロードすることができます。

1枚アップロードすると、登録フォームがこの様になります。

この時、右側のinput要素部分は以下の様に変化します。

「<input class=”sell-upload-drop-file” multiple=”” name=”image2” style=”display: none;” type=”file”>」

それではこのinput要素に対して、VBAからclickを行うのではなく、setTimeoutをを用いてclickを行ってみましょう。

For i = 0 To UBound(d.pic)
    ie.document.Script.setTimeout _
        "javascript:document.getElementsByTagName('input')(0).click()", 500
    '-----この辺にダイアログ操作処理-----'
Next

1行目の「d.Pic」は、画像ファイルのパスを配列として用意していることを想定しています。3枚分のパスを配列として格納していた場合、「image1～3」のname値に自動で対応させてファイル選択ダイアログを表示させてくれます。

ちなみに今回の出品画面では、一番最初に出てくる「input」がこのファイル選択ダイアログのinput要素となっています。1枚目の画像を登録した後は<div>タグが追加されて以下の様な状態になります。