ひゃまだのblog

ひゃまだ(id:hymd3a)の趣味のブログ

JavascriptでCGIを起動して、起動元のページにCGIの出力を表示する

(2023-10-26 初稿 - )

pythonでWeb Serverを起動して、javascriptで日付や時計を表示して遊んでいる。

お手軽なWeb Serverがあるので、どうせならCGIを呼び出して、結果を呼び出し元のページに書き込みたいと思った。

需要が多そうだから、ネットで検索すればすぐにできると思いきや、「javascriptCGI ⇒ 新しいページにCGIの結果表示」というのはたくさんあるが、元のページに結果を表示させるのが、なかなか良い情報に巡り会えず…

2〜3日かけて、なんとかそれらしいのができたので、自分用にメモを残す。

最初に結論だけ言うと、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を使って自分なりのページが作成できるから便利だね。

皆さんの参考になれば幸い。