Web Designing

Web Designingバナー:キャッシュ読み込みへの対応について

Webブラウザでは快適な閲覧環境を提供するためにキャッシュ機能が搭載されています。このキャッシュ機能をオンに設定していると、一度表示したWebコンテンツのデータをローカルマシン環境にキャッシュとして保存し、次の表示時には、サーバからデータを要求するのではなく、そのキャッシュを参照して読み込むことでコンテンツの表示速度が向上するようになっています。そのため、更新頻度の高いコンテンツを提供している場合、このキャッシュ機能により古い情報が表示されてしまうことがあります。

配布しているWeb Designingバナーでは、こうしたキャッシュ読み込みを回避して、更新情報が適切に表示されるように設計しています。本バナーの制作解説記事(2005年1月号第1特集P060)では、制作手順の基本を学んでいただくことを目的としているため、キャッシュ読み込みの回避方法について触れておりません。具体的には下記のように(赤い部分)、各外部ファイルを指定するURIの最後に日付を元にした変数を続けることで、バナーが表示される都度、サーバの外部ファイルを参照するようにしています。

2005年1月号第1特集サンプル「wdbanner.fla」 scriptレイヤーの1フレーム目のスクリプトを以下のように変更

//変数paramに、1900年から現在までの経過ミリ秒を代入

var param = (new Date()).getTime();


this.onEnterFrame = function() {
  var loaded = imageTarget.getBytesLoaded();
  var total = imageTarget.getBytesTotal();
  if ( loaded >= total && total > 4 && this.xmlLoaded ) {
    this.play();
    delete this.onEnterFrame;
  }
};
//外部画像ファイルのURIの後に「?」と「param」を続ける
imageTarget.loadMovie( "http://book.mynavi.jp/wd/banner/bannerBG.jpg?" + param );




logoColor1 = logoColor2 = 0;
_root.linkList = [];
xmlLoaded = false;

links = new XML();
links.ignoreWhite = true;
links.onLoad = function() {
  _root.logoColor1 = Number( this.firstChild.attributes.logocolor1 );
  _root.logoColor2 = Number( this.firstChild.attributes.logocolor2 );
  _root.linkList = this.firstChild.childNodes;
  _root.xmlLoaded = true;
};
//外部XMLファイルのURIの後に「?」と「param」を続ける
links.load( "http://book.mynavi.jp/wd/banner/links.xml?" + param );