"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

ブラウザの履歴を無視して、静的HTMLとCSSの変更を即反映させる方法(備忘)

 

f:id:arakan_no_boku:20190301193447j:plain

 

目次

静的HTMLだけでキャッシュを無視させるのは意外に難しい

 

静的HTMLでコンテンツを作成している場合、修正自体は簡単ですが、修正したものをサーバーにアップしても、表示が変わらない時があるのは当然です。 

ブラウザの履歴(キャッシュ)に残っていれば、そちら優先されますから。 

でも、いつまでも古いまま見続けられても困るので方法を整理してみます。

方法1:キャッシュに保存させないようにする

一番良いのは、キャッシュに保存させないようにすることです。 

HTTPレスポンスヘッダを操作してやればできます。 

JAVAサーブレットとかで、動的にHTMLを生成させたり、PHPなんかの動的スクリプトを使う場合は簡単です。 

ApacheなどWEBサーバーの管理権限を持っていれば、静的HTMLでもできます。 

例えば、この記事のようなやり方とか。

qiita.com

qiita.comでも、この手段は使える人が限られます。 

通常、HTML・CSSなどのファイルを、権限で許されたフォルダにFTPすることだけ許されているようなケースが多いのですが、そんな場合は無理です。 

方法2:クエリ文字列の利用 

変更を即時反映させたいのは、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ファイルへの影響はありません。 

方法2の課題1と対処方法:変更の手間

クエリ文字列の方法をとると、毎回HTMLやCSSを更新した時は?以降の文字列(まあ、普通日付 または日付+時刻)を書き換えないといけないわけです。 

ファイルの数が少ないうちは、エディタで1ファイルずつ開いて一括置き換えでも問題ありませんが、増えてくるとそうもいきません。 

なんらかの一括置き換えツールを使ってカバーするしかないので、クエリ文字列として指定するユニークな文字列は、他と重複しないようによく考える必要があります。

方法2の課題2と対処方法:Google検索SEOには不利 

社内システムの場合はどうでもいいのですが、URLがしょっちゅう変わるというのは、SEO的には非常に不利です。 

動的ページなんかと同じ理屈ですね。 

それが問題になるなら、cananicalタグを使ってURLの正規化はしておきます。 

やることは簡単で、以下のようなタグを<HEAD>~</HEAD>の間におくだけです。

<link rel="canonical" href="http://example.com/">

これについては、自分が説明するより、こちらのサイトがわかりやすいので、リンクをのせておきます。ferret-plus.com

それにしても・・。 

静的HTMLだけのシンプルなサイトって、逆に面倒な部分もあるもんだな・・と、思い知った次第です。