楽天 GOLD を使って LP などを作っていると、CSS や JavaScript を変更したのに正常に内容が反映されないことがあります。
この原因は、恐らく楽天サーバーのサーバーキャッシュが強く働いているからだと思われます。
こうした場合、読み込む CSS や JavaScript に一工夫してあげることでこの問題を解決することができます。
楽天 GOLD で読み込むファイルにパラメーターを付与する
通常、CSS や JavaScript を読み込む際には以下のように記述することが多いと思います。
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>これを、以下のように記述すると、変更したファイルは内容が正常に反映されると思います。
<link rel="stylesheet" href="css/style.css?ver=TS292RWH1559548013838336">
<script src="js/script.js?ver=TS292RWH1559548013838336"></script>上記の ? 以降に「一意の文字列」を付与することで、同じファイルであってもサーバーは新規のファイルとして認識してくれるため、古いファイルのキャッシュ情報を無視して読み込ませることができるといった原理です。
これは、一般的に「パラメーターを渡す」といった呼び方で利用され、CSS や JavaScript 以外にも、画像ファイルなどにも利用できます。
なお、? 以降の文字に特別指定は無いため、?ver= でなくても、?version= であったり、?file= といった指定でも OK です。
ただし、上記例のランダムな文字列 TS292RWH1559548013838336 に関しては、ファイルをアップするたびに変更する必要があります。
VS Code を使うと簡単にランダム文字列を生成・一括変更できる
楽天 GOLD を使って LP を作成していると、ページが複数になることが多いと思いますが、すべてのページの各要素にパラメーターを付与していくのは大変ですし、ランダムな文字を毎回打ち込むのも面倒です。
この問題は、VS Code を使うことで解決できます。
拡張機能を使ってランダム文字列を生成する
VS Code には各種の拡張機能をインストールすることができますが、今回のケースでは「vscode-random」という拡張機能が役に立ちます。
このプラグインは、各種のランダムな情報を自動で生成してくれるものですが、パラメーターに渡すランダムな文字列の生成にももちろん利用できます。
先ほどの例は、「IBAN コード」をパラメーターの値として渡したものです。（＊ちなみに IBAN コードとは、銀行口座情報を特定するためのコードです）
使い方は簡単で、以下の手順でランダムな IBAN コードを生成できます。
command + Shift + Pibanと入力Random: IBANと候補が表示されるのでエンターキーを押下
上記で VS Code 上のカーソルがあった位置にランダムな文字列が記述されると思います。
まずは、この文字列をコピーして削除します。
全ファイルの任意の文字列を一括変更する
（＊プロジェクトのルートディレクトリを読み込ませた状態でアプリケーションを起動する必要があります）
VS Code には作業環境内のファイルの任意の箇所を一括で検索・置換する機能が備わっていますが、この機能を使って目的のパラメーター値を一括で置換してあげれば OK です。
具体的には以下の手順で行います。
- 古いパラメーター値を選択
command + Shift + F- 画面左側のメニューが「検索」に、1. で選択した文字列が検索窓に表示される
- 検索窓の左側の矢印アイコンをクリック
- 新たに表示された窓に、先ほど生成・コピーした IBAN コードを入力
- 一括置換を実行
こうして見ると、やや手順が多いように見えるかもしれませんが、何度か操作をしているうちに慣れてくれば、それほど時間をかけずに今回のトピックであった「楽天GOLDでCSS・JavaScriptが反映されない問題」を解決できるようになると思います。
（ただ、面倒は面倒です。。）