【楽天市場のしつこいキャッシュを消す方法】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20160821123739j:plain

普通、ホームページの画像はFTPなどでサーバーに上書きすると、
すぐにブラウザの表示も新しい画像に変わります。
　
でも、楽天市場などいくつかのサーバーではなかなか
画像が変わってくれません。

ブラウザの履歴（キャッシュ）をクリア（消す）してもだめ。
　
でもサーバー上の画像ファイルは間違いなく新しいファイルに
置き変えてある。

なぜ？
　
という問題に遭遇したことがある方も多いかと思います。
　
それは、ブラウザではなく楽天のサーバー側に「前の画像」が
保管されているからです。
　
だから、画像の中身を変えてもファイルの名前が一緒だったら
サーバーは
　
「これ、前と同じファイルだな」
　
と考えて、保管してある古い画像をブラウザに受け渡します。
　
だから、ブラウザのキャッシュを消しても意味がないワケです。
　
じゃあどうすればいいのか？
　
↓対処方法がこちら。
　
▼修正前

<img src="/images/●●●.jpg">

▼修正後

<img src="/images/●●●.jpg?t=20160820">

　
なかなか切り替わってくれない画像の埋め込みタグの、
ファイル名の後ろに
　
?t=20160820
　
のように、「?」に続けて「■■=★★」の形式の文字列を付けるだけです。
　
■■と★★に入れる文字は何でもOKですが、以下に説明する理由のため、
■■には時間(time)の意味で「t」を、★★には日付を入れることが多いです。
　

ファイル名につける「？」の意味

　
ファイル名の後ろに「？」をつけると、「？」の後ろに書かれた「■■=★★」
の部分がそのファイルの付属情報とみなされます。
　
もしそのファイルがプログラムでできたファイルなら、プログラムは
「■■=★★」の中身を読み取って動作を変えることができます。
　
本来、「？■■=★★」という書式はそのようなプログラム的な目的で
利用できるための仕組みです。
　
しかし、ホームページに埋め込む画像のファイル名に「？■■=★★」をつけると、
画像ファイルはプログラムではないので見た目には何も変化しませんが、
サーバーは「？■■=★★」の部分も含めてファイルのアドレスだと解釈します。
　
そのため、サーバーが古い画像ファイル名を覚えていた（キャッシュ）場合でも、
「■■=★★」の部分が１文字でも変わっていたらあらためて新しい画像ファイルを
読み込もうとします。だから、すぐに新しい画像に表示が変わります。
　
実用を考えると、画像を変更するたびに「■■=★★」を書き換えることになるので、
いつ画像を更新したかという意味の日付を★★に書くのがわかりやすいです。
　
そして、■■には、★★が日付（時間の情報）なのだという意味を
わかりやすくするため時間(time)の「t」を使うことが多いのです。
　

URLに「？」がつくウェブサイト

　
http://xxxxxx.com/?page=3
http://xxxxxx.com/?page=4
　
こんなアドレスのウェブサイトを見たことがあるかと思います。
　
本当のURLは「http://xxxxxx.com/」までですが、「？」の後ろが、
「何ページ目を表示させるのか」
というパラメータの役目を果たします。
　
例えばワードプレスではデフォルトで固定ページに「?page=●●」がつき、
投稿（ブログ）に「?p=●●」がつきます。
　
これは、ワードプレスでは編集画面で登録した内容がデータベースに保存され、
「この内容はどのページのデータなのか」をワードプレスのプログラム（システム）
が区別できるようにするために1つ1つのページに「ID番号」が割り振られ、その
ID番号が●●に入るようになっているからです。
　
他にも、みなさんが普段お使いのYahoo検索やGoogle検索のページでも、
検索したあとのアドレスバーを見ると、
　
「https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=%E6%...」
　
のように、URLのうちページのアドレスを示す部分の後ろに「?」が付いていて、
その後ろに「■■=★★」という形式の組み合わせがいくつか繋がっています。
　
これらは検索欄に入れたキーワードやブラウザの種類など、検索プログラム側に
渡されたパラメータ（付加情報）を示しています。
　
このようなパラメータのことを、クエリパラメータと呼び、
　
「?」から後ろの部分全体を指してクエリストリング（クエリ文字列）と呼びます。
　
クエリ（Query）とは検索の意味。
　
ウェブプログラムに興味のある方は「jQuery」という名前を聞いたことがあるかも知れません。
　
jQueryは、JavaScriptの拡張版で、JavaScriptに比べてHTMLのタグ構造を
検索しやすい文法を備えています。
　
その意味もこめて「Query（検索）」という名前がついているのかも知れません。
　
このように、アドレス１つとってもあらゆる文法には理由と目的があり、
それを理解するといろんな情報の関連性がつながって、
体系的に理解することができます。