EC運営ヒント

楽天(キャビネットやGOLD)で画像やjsをすぐに反映させる方法

投稿日:

[`evernote` not found]
LINEで送る

こんにちは!!きたむです!

ページの定期更新などで、「楽天のキャビネットまたはGOLDに画像やjsを上書きしたのに、全然反映されない!!!急いでいるのにどうしたらいいんだ」という声をよく聞きます。

EC運営で楽天の店舗を扱っている人なら経験があるのではないかなと思います。

結局、画像名やjsファイル名を新しくしてアップし直して対応することになりますが、変更前のファイルを削除しなくてはいけなかったり、
連番で画像名のルールをつけている時や、ファイル名を変更したくない時は、できればそのままのファイル名で上書きをしたいですよね。。。

とにかくファイル名を変えずにすぐに反映させたい!!

というわけでそんなお困りの人のために、今回は画像やjsを上書きで即時に切り替えられる方法をお教えします。
 

そもそもどうしてすぐ反映されないのか

画像やjsファイルをアップしたけど、実際に反映されるのに何時間もかかるなんてことがよくありますが、
これは実は沢山のアクセスの負荷を軽減するため、キャッシュという、データを記憶装置に一時的に保存する仕組みが働いているのです。
このキャッシュが即時反映を妨げているのが原因です。
 

クエリ文字列を使用しキャッシュのクリアをする方法

まずはじめに「クエリ文字列(URLパラメータとも言います)」を使ってキャッシュをクリアする方法をご紹介します。
これは画像、js両方に使用することができます。

下記のようにhtmlでファイルを読み込んでいる記述に対して、
urlの末尾に「?」と任意のアルファベットや数字を入れるとキャッシュがクリアされます。

気をつけてほしいポイントとしては、
必ず画像ファイルや、jsファイルを先にアップしてから、下記の記述を加えたhtmlをアップしてください。
この順番が逆になってしまうとキャッシュがクリアされません。
そして一度クリアしたものを再度変更するには、任意のアルファベットや数字を違うものに変更してください。

以上を気をつければ、キャッシュクリアは簡単にできます。
ちなみに下記では「バージョン1」という意味で「?v1」を使用しています。
別に「?123」などでも構いません。

<img src="https://www.rakuten.ne.jp/gold/fcafe/images/img.jpg?v1" />

<script src="js/script.js?v1"></script>

 

javascriptを使用してキャッシュ機能を無効化する

こちらは画像のキャッシュクリアの時に使えます。
先ほどご紹介した「クエリ文字列」は、画像一枚だけとかなら問題ありませんが、
一気に複数の画像を上書きした場合や、更新頻度が高い場合は、毎回「クエリ文字列」を使用するのは、大変です。
そこでjavascriptを使用して、キャッシュ機能を無効化する方法をご紹介します。
※キャッシュはアクセス負荷を軽減するためにある機能なので、ページの読み込みが重たくなる場合があります。
できれば「クエリ文字列」の方がオススメです。

方法は簡単でheadタグの中に下記のjavascriptを貼り付けましょう。
基本的に楽天は外部リンクは禁止のため「jquery.min.js」はローカルに落として、そちらを読み込んでください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     var rand = parseInt(Math.random()*10000);
     $.fn.ctrlCache = function(baseURL){
       return this.each(function(){
             var html = this.innerHTML;
             this.innerHTML = html.replace(/(\.jpg|\.gif)/gi, "$1?"+rand);
       });
     }
     $("body").ctrlCache();
});
</script>

 
というわけで、今回は楽天のキャッシュ対策についてご紹介しました。
更新日時が決まっている場合はキャッシュが自然に消えるのを待っているのは難しいため、
ぜひ今回ご紹介した方法を試してみてください。

関連ニュース

[`evernote` not found]
LINEで送る

-EC運営ヒント

Copyright© EC grow | EC関連のニュースメディアサイト , 2017 All Rights Reserved.