以前ラクマの自動出品化についての記事を書いた際、画像編集用のフォームを操作しました。今回そのフォームを消す時の検知処理について書いてみたいと思います。
超限定的な話かと思いきや結構色々なシーンで使えると思いますので、考え方は知っておいて損は無いと思います。
今回は以下の記事の続きの様なものなので、詳しく知りたい場合は以下の記事から先に読んで下さい。
■VBAによるラクマの自動出品化に成功！その方法を公開
■ラクマの画像編集画面のフォームについて
さて、早速本題のフォームを確認しましょう。
・ラクマの画像編集用フォーム
※ちなみに私が勝手にこう呼んでいるだけなので、正式名称は知りません。
このフォームを操作した後、最終的に右上にある「保存」というボタンを押すことで編集を確定させ、このフォームを閉じることができます。
しかし、このフォームはobject型の様に「If obj is Nothing Then」の様な形でフォームが消えたかどうかを確認することができません。
ではどうすれば良いか。
幾つか方法を考えてみましょう。
■IEの状態を参照して検知する
IE上で何か処理をした時、「Busy」や「readyState」の値を確認して「画面の読み込みが完了するまで待つ」といった処理をしていたのを覚えていますでしょうか。
※以下の記事で触れています。
⇒VBAでブラウザを操作して作業を自動化してみよう -ウェブスクレイピングツール編①-
PCからラクマに出品したことのある方なら分かると思いますが、先程のフォーム上にある「保存」のボタンを押した際、フォーム上で歯車の様な形のものが回転し、処理中の様な見た目になっていますよね。
こんな感じです↓
この時ってIEの状態はどうなっていると思いますか？
実はこの処理中っぽい状態は、IE側の状態に何も影響していないんです。
IE側の「Busy」や「readyState」で何か検知してくれれば楽なんですけどね・・・
では実際にIE側の状態を確認してみましょう。
「Debug.Print “画像アップロード開始”」のコメント出力から始まり、モザイク部分でダイアログの操作と画像編集用フォームのボタン押下を行っています。
ボタン押下直後に「編集フォーム終了待ち」と書かれた後の「waitForBrowse」の中で「Busy」と「readyState」の値をそれぞれチェックしています。
しかし、画像を見て頂けると分かる通り「Busy」の値はFalse。「readyState」の値は4を示しています。
これは「IEはもう読み込みを完了していて何も処理はしていませんよ」という事です。
つまりこの方法では画像の加工処理が終わってフォームが消えたかどうかは検知できないということになります。
■sleepで指定秒数待機させる
sleepを使って一定時間待機させる方法もアリと言えばアリです。
しかし、何秒待機させれば良いでしょうか？
PCのスペック、回線速度にも影響しますので、フォームの処理が1秒で終わることもあれば10秒掛かることもあります。
何秒に統一すれば良いか分からないからとりあえず「30秒」にしたとしましょう。
さすがに30秒以上掛かることは無いと思うのでこれだけ時間に余裕を持たせればうまく動くとは思いますが、1秒で処理が終わった場合は残り29秒が無駄になってしまいますよね。
10件処理した場合は単純に290秒（4分50秒）もの時間のロスに繋がります。
個人で使う分にはとにかく動けば良いので何分待たされようと構わないと思いますが、人に使ってもらうものだと良くないですよね。
■タグの内容を見る
「HTMLタグを見る」という方法があります。
そもそもこのフォームはアプリケーションソフトの様に見えますが、HTMLで表示されているモーダルウィンドウ（子画面）の様なものです。
ちなみによく見かけるモーダルウィンドウというとこんな感じのやつですね。
どこかのサイトのログイン画面などで見た事はありませんか？
元のページが若干薄暗くなって、前面にメッセージやらログインフォームが現れるあれです。
このモーダルはボタンを押したりするとよく突然出現しますが、実は見えない様にしているだけで最初からhtmlには記述されています。
ボタンを押した際に裏でjQueryやらが動いて表示/非表示を切り替えているのですが、このjQueryが何をしているのかと言うと・・・
指定したIDやclassを持つタグに対して、”要素を追加したり消したり”しています。
追加したり消したりすることでどうなるのかというのは、CSSとかまた別の話になってくるので細かい説明しません。
ただ、普段モーダルのウィンドウが見えていないのはモーダルの部分のHTMLタグに「非表示にする」という指定がされているからということだけ覚えておいて下さい。
ボタンが押されるとjQueryという物が動作して、この「非表示にする」という部分を「表示する」に書き換えているという事ですね。
ということは・・・もう分かってきましたね。
ラクマの画像編集用フォームにも同じく「表示/非表示」を指定する要素が記述されており、リアルタイムでHTMLが書き換えられることでフォームが出てきたり消えたりしています。
その要素部分を監視することで、フォームが消えたかどうかを判断することできるという事です。
早速ソース部分を確認してみましょう。
上の画像は画像編集用フォームのソース部分です。
この中にある赤枠の部分に「style=“display: ～;”」という記述がありますね。
大まかにこの部分が「none」であれば非表示、「block」であれば表示状態になると思って下さい。
この「display」の部分のstyleを直接取得して確認してみても良いですし、タグの中に指定した記述が含まれているかどうかを監視し続けるという風な処理を組みたければ、
Set objDisplayChk = ie.document.getElementById("avpw_tool_main_container")
Do
Sleep 200
DoEvents
Loop While InStr(objDisplayChk.outerHTML, "display: block;") > 0
こんな感じで記述すれば良いと思います。
上記のプログラムを解説すると、
「“avpw_tool_main_container”というIDを持つタグが表示状態（display: block）である限りループする」
という感じになります。
このループを抜ける条件は「非表示になった時」＝「編集画面が消えた時」という事になります。
※ちなみにこのIDのタグは子タグが色々と含まれているので、このIDを指定しても正常に検知しません。ただの記述例です。
これでフォームが消えたかどうかのチェックは完璧ですね！
■最後に
いかがでしたでしょうか。
「タグ要素の動きを見る」という考え方は、今回のラクマに限らず他の場面でも使えそうですよね。
覚えておくときっと何かの役に立つ！・・・かもしれません。
今回の内容で不明点や誤りがありましたらコメントでご指摘下さい。
それでは！