- PR -

Ajaxで同一名称の画像入れ替え

1
投稿者投稿内容
ほまらら
ベテラン
会議室デビュー日: 2005/10/19
投稿数: 54
投稿日時: 2005-11-18 10:25
Ajaxを使って、表示中の画像を定期的に更新するページを作成しています。
イメージとしては動画のような感じです。

『pngファイルを作成すると共に、表示用の<img>記述を返すjsp』をXMLHttpRequestで定期的に取得して、
呼び出しページの<div>のinnerHTMLにresponseTextを代入するという形式で画像を差し替えています。
jspによって作成されるpngファイルは呼び出される度に異なる画像であると考えてください。

ここで、pngファイルの名前を固定すると、画像が更新されないという問題が起こりました。（つまり、呼び出されるjspの<img src="pngファイル名">のpngファイル名が固定なら、という事です）
pngファイル名を毎回違うものにすれば目論見どおり画像は定期的に挿し変わるのですが、ファイル名が変わらないと画像が更新されません。
定期的なページの取得自体は上手くいっています（文章部分は定期的に書き換わってますので）。

画像の滑らかな切り替えと、クライアント側のテンポラリーファイルをえらいことにしてしまわないために、できれば同一ファイル名で定期差し替えを実現したいのですが、どなたか方法をご存知無いでしょうか？
Gio
ぬし
会議室デビュー日: 2003/11/28
投稿数: 350
お住まい・勤務地: 都内から横浜の間に少量発生中
投稿日時: 2005-11-18 23:22
Ajax の技術概要は存じているつもりですが、実際に Ajax でシステムを作成したことがないため、以下誤りを含んでいるかもしれません(_ _)

クライアントが Web ブラウザであるならばという前提で、既にお気付きと思いますが、真っ先に疑われるのが画像のキャッシュです。
画像のファイル名を img1.png→img2.png→img3.png→img1.png のように循環的に再利用するように変更してみて、表示される画像もこの通り循環的に変わるようなら、ブラウザの画像キャッシュを禁止することで解決すると考えます。

ただし、運用上、利用者に対して画像キャッシュを禁止するよう Web ブラウザの設定を要請するのは問題があるとも考えます。

今手元では Mozilla Firefox 1.0.7 と MS Internet Explorer 6.0 しか確認できませんでしたが、この二つはキャッシュサイズの上限を設定し、越えた場合に古いものを削除する管理機構を持っています。
他のブラウザについてはわかりませんが、可能であれば、画像ファイル名を毎回異なるものとし、ブラウザのキャッシュ管理に任せるという選択肢もあるということをお伝えしておきます。
ほまらら
ベテラン
会議室デビュー日: 2005/10/19
投稿数: 54
投稿日時: 2005-11-19 13:06
Gioさん返答ありがとうございます。
ファイル名を循環させる実験は３交代ではなく２交代で試してみました。
方法としてはsession変数として整数を一つ保持して、
呼び出し一回毎にインクリメントしながらその奇偶で作成するpngファイルの名前を交代させる、というものです。
で、結果としましては、仰るとおり循環的（というか交互）に２通りの画像が入れ替わるだけでした。無念。実験環境はLinuxのFireFox1.0です。

キャッシュをブラウザ側で制御してもらうのは、Webアプリとしてのユーザビリティがダウンしすぎるので避けたいところです。
かといって、長期表示しっぱなしが想定される現状で「異なる名前の画像ファイルをどんどんダウンロードしつづける」というのは避けなければならないでしょう。

悪あがきですが、HTMLのヘッダーにno-cacheとかいうプロパティがあったと思うので、そちらも試してみます。あとは、imgタグの中で静的に指定するのではなくイメージオブジェクトとしてJavaScript側で持った状態でダウンロードさせて、表示画像のsrcを指定するスクリプトを毎回動かしてみるとか（多分だめでしょうが・・・）。

やはりAjaxの使い方としては邪道だったかもしれません。
IFRAMEとか使えばできるのでしょうか。（同じ現象に嵌りそうな気が・・・）
1

スキルアップ／キャリアアップ（JOB@IT）