一定時間毎に画像を自動更新したい

2004/11/29 12:05

このQ&Aのポイント

一定時間毎に画像を自動更新する方法はありますか？
画像を自動で再描画するための設定方法を教えてください。
METAタグを使用せずに一定時間で画像を更新する方法はありますか？

rannma
お礼率66% (16/24)

JavaScript
回答数6
ありがとう数4

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

sawagani
ベストアンサー率73% (19/26)

2004/12/01 22:59 回答No.6

どちらかというと↓のようなものを想像していたのですが・・・ http://www.stv.ne.jp/webcam/sapporo/index.html (表示後、自動更新を選択してください) METAタグを使用してRefreshを行った場合、動きはブラウザの「最新の状態に更新」とするのとほとんど同じです。＃４の例だと、IFRAME内のHTML読み込み→画像を読み込み、という処理が行われるので、どうしてもちらつきは出てしまうと思います。動画っぽく表示したいのであれば、画像の再読み込みだけで行うのは無理があると思いますよ。 Java等を使用して、それなりのものを作成した方がよさそうです。 ----------------------- それでも一応、無理やり作ってみた例（＾＾；画像ファイルが完全に読み込まれたあとに表示されるようにしています。 (表示の切り替えはスタイルシート使用) マシン性能にもよりますけど、多少は抑えられるかと。ただし、・画像がキャッシュに残らないようにする設定が必要です　　キャッシュファイルが残ると、最初の画像が表示され続けます・IE専用です　　id指定したIMGファイルの指定部分と、タイマー部分をどうにかすれば、他ブラウザでも可？ <html> <head> <script language="JavaScript"> var tg = true; function ImgChg() { if (tg) { document.all.img2.src = "test.jpg"; //キャッシュにファイルがなければsrcを指定した時点で画像が読み込まれる…はず document.all.img1.style.display = "none"; document.all.img2.style.display = ""; } else { document.all.img1.src = "test.jpg"; document.all.img2.style.display = "none"; document.all.img1.style.display = ""; } tg = !tg; setTimeout(ImgChg, 1000); } </script> </head> <body onload="setTimeout(ImgChg, 2000);"> <p>ああああああああ</p> <p> <img src="test.jpg" width="320" height="200" id="img1"> <img src="test.jpg" width="320" height="200" style="display:none" id="img2"> </p> <p>いいいいいいい</p> <input type="button" value="test" onclick="ImgChg()"> </body> </html>

質問者

お礼 2004/12/01 23:53

感謝致します。 > http://www.stv.ne.jp/webcam/sapporo/index.html > (表示後、自動更新を選択してください) は、教えていただいた時の結果と同じでした。お教えいただいたソースにJPEGファイルのパスを添えてテストしました。点滅は消え、期待レベルまでになりました。感謝します。あとは、Video for Windows にてキャプチャ、画像処理(論理判定＆任意処理)、BMP->JPEG、アップロードのＰＣ側のアプリケーションを開発すれば実現できそうです。本当にありがとうございました。

その他の回答 (5)

sawagani
ベストアンサー率73% (19/26)

2004/11/30 20:58 回答No.5

画像更新の際、読み込み（データのダウンロード）時間の関係でどうしてもちらつきは出てきてしまいそうです。画像をパッと表示させたい場合、クライアント上にキャッシュをあらかじめ読み込ませ、その後に画面上へ表示する、というような方法をとることがあるのですが今回のケースだと使えませんね・・・。ところで、点滅で見づらい原因ですが <META HTTP-EQUIV="Refresh" CONTENT="1;URL=http://***.com/test.html/"> となっていますが、1秒ごとに更新してるのでしょうか？もしそうであれば、ここの更新間隔を長くするなどで回避できないでしょうか？（例えば画像が1分置きにアップされるのであれば、HTMLファイルの再読み込みも1分ごととするなど）頻繁に再読み込みが発生しないのであれば、それほど見づらくはならないとは思います。なんか解決策になりそうな回答でなく申し訳ないです m(__)m

質問者

補足 2004/11/30 21:57

ありがとうございます。　助かっています。はい、１秒に設定し直しました。しかし、秒数とちらつきは関係ありません。 Refreshは画面を初期化して表示する動作のようで、それが原因のようです。実際には、下記のような画面を表示させたいのです。 http://www.museum.osaka-u.ac.jp/jp/web-camera.html これはアプレットを使ってやっているようですが、、、

sawagani
ベストアンサー率73% (19/26)

2004/11/29 23:28 回答No.4

具体的には、次のようにHTMLファイルを２つ作ります。 ----------------------------- main.html <html> <head> </head> <body> <p> ああああああああ </p> <p> <iframe src="iframe.html" width="320" height="200" border="0" frameborder="no" framespacing="0"> </iframe> </p> <p>いいいいいいい</p> </body> </html> ----------------------------- iframe.html <html> <head> <META HTTP-EQUIV="Refresh" CONTENT="10;URL=iframe.html"> </head> <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" scroll="no"> <img src="test.jpg" width="320" height="200"> </body> ----------------------------- ちょっと手抜きですが。画像ファイルは、実際のファイル名を指定してください。これで、main.htmlの方をブラウザで指定して表示します。画像ファイルを更新した時に、表示も変われば成功・・・。（ちなみに10秒間隔にしてあります）表示の更新ですが、キャッシュの設定などによっては、古いものがそのまま表示され続ける可能性がありますので、ご注意ください。意図されている動作かわかりませんが、ご参考までに。

質問者

お礼 2004/11/30 09:32

大変ありがとうございました。以前行なっていた本体全体のリフレッシュより大幅な改善になりました。機能的な面では100％ですが、残念ながら画像が点滅する点で見辛さが残っています。点滅せずに画像更新する方法がないでしょうか？

sawagani
ベストアンサー率73% (19/26)

2004/11/29 21:36 回答No.3

画像サイズは固定のままで良いですか？ <META HTTP-...>と<IMG SRC=...>を埋め込んだHTMLファイルを別に作成し、そのHTMLファイルをIFRAMEで指定する、というのはどうでしょう。枠線・隙間をなくせば、それらしく表示されると思います。・・・私も、はずした答えのような気もしますが・・・。

質問者

補足 2004/11/29 22:37

ありがとうございます。 VC++で開発の仕事をしていますが、JavaScriptは素人です。とっかかりとして先程 VJ++をインストールしてスタートアップブックを広げています。試してみたのは Javeでサーチして出てきたサンプルや期待する動きのHPのソースを移植して試したものです。そのため、現状では「そのHTMLファイルをIFRAMEで指定する」ことも書き方がわかりません。回答いただいたことの内容判断で目的通りかどうかも評価できません。 Webカメラで表示しているHPのソースではフラッシュが使われたり、CGIらしきコードを呼んでいるものがありました。 HTTPで画像をダウンロードしてDrawDIBDrawで表示すればいいんですが、IEなどで表示できれば簡便なのでトライしています。