• 動機
• というという訳でツールを作った

動機¶

以前はサイトのDOMを参照するときcurlを使っていて、それはそれは便利だったんですが近年SPAとか動的にDOM構築するサイトが増えるようになって、ぜんぜん使えなくなりました。
かといって、SeleniumやPuppeteerやBeautiful SoupやSplashなんかを使うとプログラミングする必要がでてきて面倒だなぁ・・・となっていました。なんか色々インストールすることなくcurlみたいにお手軽に使いたいだけだし、1行でやりたい。。シェル芸したいんじゃ。。

という訳でCUIでChromeをヘッドレスモードで呼び出せばいいじゃんっていう話なんですが、SPAの時、JavaScriptがDOM構築を完了するまでどうやって待ち合わせるか、そもそもそういうオプションあるのかしら…とずっと思っていました。でも、最近ようやくわかったんですね!!!1!あったわ、オプションありましたわ…!

あと、Windows環境であれば標準で入っているEdgeをヘッドレスモードで動かせるので、それをWSLで動くようにしたい～

というという訳でツールを作った¶

EdgeHeadless.sh

#!/bin/bash

# EdgeのヘッドレスモードでSPAのページをcurlみたく出力する ver 0.1

Edge="/mnt/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"

"$Edge" --headless --enable-logging --dump-dom --virtual-time-budget=10000 $1 $2 $3 $4 $5 $6 $7 $8 $9

Edgeの実行ファイルPATHをChromeのそれに置き換えても動くと思います。

たまに以下のエラーで返ってくる時があるんだけどその時はもう一回実行してください（リトライ処理を書くのをサボっている）

TypeError: Cannot read properties of null (reading 'outerHTML')

ではちょっと試してみましょう。
ちょっと適切なサイトが思い浮かばなかったので内閣サイバーセキュリティセンターで試してみます。

そうですね。。ではこの中の下の方にある「情報セキュリティ教育用教材」のリンクを取得してみましょう。

まず、ここの内容はJavaScriptで動的にDOMを構築しているようなのでcurlで取得できません。

$ curl -s https://www.nisc.go.jp|grep 情報セキュリティ教育用教材

curlだと何も引っかからないですね。では、今回作ったツールでやってみます。

$ ./EdgeHeadless.sh https://www.nisc.go.jp|grep 情報セキュリティ教育用教材
        <div title="ランサムウェア対策について" data-href="https://security-portal.nisc.go.jp/stopransomware/"><span style="background-image: url(&quot;/img/banner01.jpg&quot;);"></span><p>ランサムウェア対策について</p></div><div title="参照すべき関係法令をQ&amp;A形式で解説" data-href="https://security-portal.nisc.go.jp/guidance/law_handbook.html"><span style="background-image: url(&quot;/img/banner02.jpg&quot;);"></span><p>参照すべき関係法令をQ&amp;A形式で解説</p></div><div title="セキュリティが分からなければこの1冊" data-href="https://security-portal.nisc.go.jp/guidance/handbook.html"><span style="background-image: url(&quot;/img/banner03.jpg&quot;);"></span><p>セキュリティが分からなければこの1冊</p></div><div title="IPA情報セキュリティ・ポータルサイト" data-href="https://www.ipa.go.jp/security/kokokara/"><span style="background-image: url(&quot;/img/banner04.jpg&quot;);"></span><p>IPA情報セキュリティ・ポータルサイト</p></div><div title="みんなで使おう サイバーセキュリティ・ポータルサイト" data-href="https://security-portal.nisc.go.jp/"><span style="background-image: url(&quot;/img/banner05.png&quot;);"></span><p>みんなで使おう サイバーセキュリティ・ポータルサイト</p></div><div title="情報セキュリティ教育用教材" data-href="/policy/group/general/kyozai-booklet.html"><span style="background-image: url(&quot;/img/banner06.jpg&quot;);"></span><p>情報セキュリティ教育用教材</p></div></div>

はい取れました!じゃぁシェル芸してリンクだけ抜き出します。

$ ./EdgeHeadless.sh https://www.nisc.go.jp|tr '<>' \\n\\n |grep 情報セキュリティ教育用教材|head -1|awk -F= '{print $3}'
"/policy/group/general/kyozai-booklet.html"

はいリンク取れましたスッキリした～