目次
ブラウザの履歴を無視しHTMLとCSSの変更を即反映させる
静的HTMLでコンテンツを作成している場合、修正自体は簡単ですが、修正したものをサーバーにアップしても、表示が変わらない時があります。
ブラウザの履歴（キャッシュ）が優先される場合があるからです。
でも、いつまでも古いまま見続けられても困るので方法を整理してみます。
方法１：キャッシュに保存させないようにする
一番良いのは、キャッシュに保存させないようにすることです。
HTTPレスポンスヘッダを操作してやればでるので、JAVAサーブレットとかで、動的にHTMLを生成させたり、PHPなんかの動的スクリプトを使う場合可能です。
ApacheなどWEBサーバーの管理権限を持っていればの条件付きなら、静的HTMLでもで以下の記事のようなやり方で可能ではあります。
qiita.comでも、この手段は使える人が限られます。
通常、HTML・CSSなどのファイルを、権限で許されたフォルダにFTPすることだけ許されているようなケースが多いのですが、そんな場合は無理です。
方法２：クエリ文字列の利用
変更を即時反映させたいのは、HTMLとCSSです。
それで、唯一可能だと思った「クエリ文字列の利用」をやってみることにしました。
変更したHTMLやCSSになにかするのではなく、修正したファイルに対するリンクを修正し、「?」に続けて文字列を指定するクエリ文字列を追加します。
CSSの指定を以下のように変更するとか。
<link rel="stylesheet" href="css/styles.css"></link>
↓
<link rel="stylesheet" href="css/styles.css?20171216"></link>
HTMLのリンクを以下の用に変更するとか。
<a href="sub/sub_02.html">こちらへ</a>
↓
<a href="sub/sub_02.html?20171216">こちらへ</a>
こんな風にしても正しく動作して、「?20171216」の部分は無視してくれます。
でも、URLとしては変更になっているので、めでたくキャッシュからではなく、ちゃんと更新したものを表示してくれます。
クエリ文字列は、パラメータを渡すために利用されるものなので、リンクの時にそれを書いていても、飛び先のHTMLや参照するCSSファイルへの影響はありません。
方法２の課題：Google検索SEOには不利
上記の方法は、社内システムの場合はいいのですが、URLがしょっちゅう変わるというのは、SEO的には不利になります。
動的ページなんかと同じ理屈ですね。
それが問題になるなら、cananicalタグを使ってURLの正規化はしておきます。
やることは簡単で、以下のようなタグを<HEAD>～</HEAD>の間におくだけです。
<link rel="canonical" href="http://example.com/">
これについては、自分が説明するより、こちらのサイトがわかりやすいので、リンクをのせておきます。ferret-plus.com
それにしても・・。
静的HTMLだけのシンプルなサイトって、逆に面倒な部分もあるもんだな・・と、思い知った次第です。
