楽天で画像やCSS、JSを上書きしてもページに反映されないときの対処方法
楽天で画像を変更してRMSキャビネットやGOLDに内に上書きしたり、HTML、CSS(スタイルシート)、JS(javascript)の内容を書き換えて上書きアップロードをした際などショップページに反映がすぐにされずに困ったことはないでしょうか。
修正後にページを表示して、F5キーでページを何度も再読込してみると反映されることもありますが、確実に反映されるとは限りません。
新しい画像や、新規のCSSを読み込む場合は問題なく即座にページに反映されますが、すでにある画像、CSSなどを変更して上書きをした場合は反映されないことがあります。これは、楽天側のサーバーや端末のブラウザのキャッシュ機能が働いていて、内容がすぐに反映されないことがあります。
キャッシュ機能とは、よく利用するデータは毎回取りに行くのではなく、すぐに取り出せる場所に保存しておきそこから読み込むことでデータ処理を早くすることができる仕組みです。楽天などアクセス数が多いサイトではサーバー側にキャッシュ機能が使われておりページ読み込みを早くできるようになっています。その仕組みが仇となり即座にページに反映されないという現象が起こってしまいます。
上書きした場合に修正内容を即座に反映させる方法を紹介したいと思います。今回は楽天を例にしていますが、楽天以外でも利用できる方法です。
楽天の画像、CSSの上書き変更を即座に反映させる方法
修正内容がきちんと反映されているのか、すぐに確認すると修正前と表示が変わっておらず、修正が間違っていたのかと勘違いしてしまい何度も修正箇所について確認した経験があります。
実は修正した内容は間違っておらず正しく修正出来ていましたが、ページへの読み込みに反映されていなかっただけで、しばらく経過して確認してみると反映されていたことは何度もあります。
正しく修正できているのかは、すぐに確認したいですよね。
キャビネット、GOLD内の画像を上書きした場合
楽天GOLDの内の画像を上書きした場合とRMSキャビネットの画像を上書きした場合ではキャビネットの方が即座に反映されないような気がします。
通常の記述例
RMSキャビネット内の画像を直接指定した場合
（基本フォルダに画像 sample.jpg）
画像を表示するタグ <img src="sample.jpg">
記述が長くなるため、上記ではファイル名のみで省略していますが、
https://image.rakuten.co.jp/店舗URL/cabinet/sample.jpg
とキャビネット内のURLを指定します。
GOLD内の画像を直接指定した場合(GOLD直下のimgフォルダにあるsample.jpg)
画像を表示するタグ <img src="sample.jpg">
ここも記述を省略しています。実際には下記のURL
https://www.rakuten.ne.jp/gold/店舗URL/image/sample.jpg
サムネイルの仕組みで指定した場合
キャビネット <img src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗URL/cabinet/sample.jpg?_ex=120×120 "> GOLD <img src="https://thumbnail.image.rakuten.co.jp/@0_gold/店舗URL/image/sample.jpg?_ex=120x120 ">
サムネイルの仕組みについては、下記を参考
上記のように通常は画像ファイルを指定する記述は拡張子で終わりますが、即座に反映させる場合は、拡張子の後ろに文字情報（パラメーター）を付加させます。文字情報として付加するのは何でも良いのですが、ここでは、拡張子の後ろに「?No=1」としています。
上書き後に即座に反映させる記述
RMSキャビネット内の画像の場合
画像を表示するタグ <img src="sample.jpg?No=1">
ファイル名からに省略していますが、実際には下記のようなURLを指定
https://image.rakuten.co.jp/店舗URL/cabinet/sample.jpg?No=1
GOLD内の画像の場合
画像を表示するタグ <img src="sample.jpg?No=1">
ファイル名からに省略していますが、実際には下記のようなURLを指定
https://www.rakuten.ne.jp/gold/店舗URL/image/sample.jpg?No=1
修正後に即座に変更を反映させたい場合、都度前回とは違う文字にする必要があります。No=2、No=3など数字を増やしていくなどです。なぜ違う文字に変更する必要があるかというと、キャッシュはURL単位に管理されています。そのため、即座に反映させたい場合は別のURLとして認識させる必要があるためです。
サムネイル画像の場合
キャビネット <img src="https://thumbnail.image.rakuten.co.jp/@0_mall/店舗URL/cabinet/sample.jpg?_ex=120×120&No=1 "> GOLD <img src="https://thumbnail.image.rakuten.co.jp/@0_gold/店舗URL/image/sample.jpg?_ex=120x120&No=1 ">
サムネイルの場合も同様のことが可能ですが、サムネイルのURLの仕組みには、拡張子の後ろに文字が付加されている状態で、この文字列で表示する画像のサイズを指定しています。そのため、?_ex=120×120の部分は変更はしませんが、変わりにさらに後ろに「&No=1」として文字情報を付加しています。すでに別のパラーメーターがある場合は、&(アンド)で区切ることができます。
HTML、CSS、JSを上書きした場合
個人的な感覚としては、楽天GOLD内の上書きについては比較的即座に反映される気がします。反映されなくてもF5キーでのページ更新で反映されます。反映が即座にされないのは、RMS内の記述でCSS、JSを読み込んでいる場合にCSS、JSの内容を変更してもページに反映されないことが多いです。
商品ページで独自のCSS、JSを読み込む場合など下記のような記述で外部のCSSのやJSを読み込みます。
通常の記述例
Javascriptの読み込み <script type="text/javascript" src="example.js"></script> CSSの読み込み <link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
さきほどの画像と同じ考え方で解決します。外部ファイルを指定する箇所（ファイル名）のURLを指定する際に拡張子のあとに文字情報を付加してやります。
上書き後に即座に反映させる記述
Javascriptの読み込み <script type="text/javascript" src="sample.js?No=1"></script> CSSの読み込み <link href="sample.css?No=1" rel="stylesheet" type="text/css" media="all" />
ここでは、読み込む外部ファイル名しか指定していませんが、実際にはGOLD内に配置したCSS、JSファイルをURL指定する形になります。
楽天のスマホページでもCSS、JS
楽天のスマホページにもJS、CSSを読み込むことも可能です。CSS、JS等を修正しても反映されないという場合にも同様の方法で指定することで即座に反映させることが出来ます。
どんな文字を付加すれば良いか
今回紹介している事例では、付加する文字をNo=1といったシンプルなものにしていますが、実際どんな文字を指定しても問題ありません。では、どんな文字を指定したら良いのか、わからないという場合は日付情報など記述しておくのはいかがでしょうか。
sample.js?date=20180109
同一日付で何回もCSSを変更した場合は毎回指定する文字を変えるようにしてください。
sample.css?date=20180109-1 ・・・・1回目
sample.css?date=20180109-2 ・・・・2回目
sample.css?date=20180109-3 ・・・・3回目
と連番をつけていくなど
変更した日付を指定しておくことで、次回修正する際に最後に変更したのがいつだったのか確認することができます。他にも誰が修正したのかわかるようにsample.js?date=20180109nameといった記述もありかもしれません。
ちょっとしたことですが、修正内容がすぐに確認できる方法ですので、ぜひ活用してみてください。
Your Message