アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うことを書いてます。

ブラウザの履歴を無視して、更新した静的HTMLとCSSを即反映させたい時の工夫(備忘)

久しぶりにWEBサイトの構築を手伝いました。 

静的HTMLで作ったマニュアル的な資料を見せるだけの極シンプルなものです。 

なので、作成自体は難しくもないのですが、意外なところでちょっと苦労したので、備忘録代わりに書いておきます。

 

「変更したHTMLがすぐに反映しない!」とクレームが

 

作業手順書を兼ねたような資料でしたので、頻繁に更新が発生します。 

元々、書いた内容が間違っている場合もあります。 

実際、使った人から修正依頼がくることもあります。 

静的HTMLなので、修正自体は簡単です。 

ところが、修正したものをサーバーにアップしても、表示が変わらない人がいる。 

言われて見れば当たり前です。 

ブラウザの履歴(キャッシュ)に残っていれば、そちらから表示されることがありますから。 

ところが、資料の正確上、修正したものが即時に反映して、全員が同じものが見れないと困るわけです。 

実にうっかりしてました。

 

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

 

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

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

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

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

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

qiita.com

qiita.com


ところが、今回の場合はそれがすべて使えません。 

できることは、HTML・CSSなどのファイルを、権限で許されたフォルダにFTPすることだけです。 

PHPすら使えません。 

いやはや、さすがに困りました。

 

力技でURLを変更してやるしかないか・・

 

今回、変更を即時反映させたいのは、HTMLとCSSです。 

画像は変更したらファイル名も変えるので問題なく、Javascriptも使ってませんので。 

キャッシュに保存させない手が使えない以上、キャッシュから読ませないようにするには、URLを変更するしかありません 

といって、変更する都度、ファイル名を変更するのは厳しすぎます。 

自分が修正・管理するわけでもないしね。 

結局、唯一可能だと思った方法「クエリ文字列の利用」をやってみることにしました。 

クエリ文字列とは「?」に続けて文字列を指定することです。 

もともと、パラメータを渡すために利用されるものなので、リンクの時にそれを書いていても、飛び先の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を更新した時は?以降の文字列(まあ、普通日付 または日付+時刻)を書き換えないといけないわけです。 

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

今回は、そこは一括置き換えツールを使ってカバーしました。 

例えば、20171216 を20171220 に一括置き換えできるようなツールは、フリーソフトでもたくさんあります。 

気に入ったものを使えばよいと思います。 

だから、ポイントはクエリ文字列は1つのファイルしか更新しなくても、全部を同じ文字列で置き換えられるようにしておくことですね。 

下手に、ファイル毎に更新日付を変えて管理しようなどとすると、どこかで破綻しますから。 

めんどくさくて。 

もうひとつの問題は、Google検索の話です。 

今回はあまりSEOを気にする必要はないのですが、URLがしょっちゅう変わるというのは、SEO的には非常に不利です。 

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

なので、念のため、cananicalタグを使ってURLの正規化はしておいた方がいいです。 

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

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

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

それにしても・・。 

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