(2023-10-26 初稿 - )
pythonでWeb Serverを起動して、javascriptで日付や時計を表示して遊んでいる。
お手軽なWeb Serverがあるので、どうせならCGIを呼び出して、結果を呼び出し元のページに書き込みたいと思った。
需要が多そうだから、ネットで検索すればすぐにできると思いきや、「javascript ⇒ CGI ⇒ 新しいページにCGIの結果表示」というのはたくさんあるが、元のページに結果を表示させるのが、なかなか良い情報に巡り会えず…
２〜３日かけて、なんとかそれらしいのができたので、自分用にメモを残す。
最初に結論だけ言うと、iframeのタグを用いれば元のページに表示できる。以上。
ディレクトリ構成
ここでは、ラズパイ(Raspberry Pi)で実行する例を示す。
まずは、ディレクトリ構成。
ドキュメントルート(myweb)の下にindex.htmlとcgi-binディレクトリを作成する。
myweb
├── cgi-bin
│ └── cpu_status
└── index.html
呼び出し側のhtml
ということで、さっそく呼び出す側のindex.htmlの抜粋。
<html>
<body>
<!-- CPU Memory GPU Status -->
<script>
window.onload=function(){
setInterval("document.getElementById('status').src='cgi-bin/cpu_status'",10000);
}
</script>
<iframe src="cgi-bin/cpu_status" id="status" frameborder="0" scrolling="no" width="100%" height="5%"></iframe>
</body>
</html>setInterval関数の中で、cgi-binディレクトリの中のcpu_statusを10秒おきに呼び出している。
書き込む場所は、呼び出し元のid="status"の iframeタグに囲まれたところに、cgiの実行結果を書き込む。
なお、iframeの大きさは、cgiの出力に合わせて、witdhやheightを変更してね。
呼び出されるCGI
呼び出されるcgiは、何でもよいのだけど、筆者はラズパイ(Raspberry Pi)を使ってWeb Serverを立てていたので、ラズパイのCPU温度、CPUメモリ使用量、GPUメモリ使用量を出力するbashスクリプトを作成した。
簡単なスクリプトなので、特に解説はいらないと思うけど、put_html関数でヒヤドキュメントで囲んで、上記の値を出力している。
#!/usr/bin/env bash
put_html () {
cat << __EOF__
Content-type: text/html;charset=utf-8
<p align="right">CPU $cpu_temp : CPU Memory $cpu_memory : GPU Memory $gpu_memory</p>
__EOF__
}
#<p align="right">Date:$date CPU $cpu_temp : CPU Memory $cpu_memory : GPU Memory $gpu_memory</p>
date=$(date)
cpu_temp=$(/usr/bin/vcgencmd measure_temp)
cpu_memory=$(/usr/bin/vcgencmd get_mem arm)
gpu_memory=$(/usr/bin/vcgencmd get_mem gpu)
put_html実際の表示の様子をスクリーンショットで見ると以下の図のようになる。
今回作ったのは、一番下の行の出力。
簡単なJavascriptだけど、cgiを使って自分なりのページが作成できるから便利だね。
皆さんの参考になれば幸い。
