楽天で画像やCSS、JSを上書きしてもページに反映されないときの対処方法

公開日: 

楽天で画像やCSSを上書きしたのにページに反映されないときの対処方法
楽天で画像を変更して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といった記述もありかもしれません。

ちょっとしたことですが、修正内容がすぐに確認できる方法ですので、ぜひ活用してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑