ブログ内検索

テック

楽天Cabinetの画像がなかなか反映されない!

r-tips-cabinet.avif
かなこ
かなこ
この画像キャビネットにあげといてよ。
こうじ
こうじ
OK!マジェスティ!
かなこ
かなこ
あ!伝える内容間違ってたわ!直しといて!てへぺろ☆
こうじ
こうじ
ぐぬぬ!!!(でも逆らえない)

なんてことありませんか?僕はありました。…あれ?僕だけですか?

Cabinetの画像上書きの不便さを解消!

楽天Cabinetは画像上書きだとすぐ変わらない。

本来で行くと、ただ修正した画像を上書きすればそれでページにそのまま反映されます。

が!楽天の場合上書きしても変更されません。厳密に言うとデータは変更されているのですが、サーバー楽天側でキャッシュかなんか残ってるのかな?実際表示される画像が変更されません。

r-tips-cabinet-1

一番手っ取り早い方法

修正を今すぐ反映させたい!そういった場合、今までの会社で良くやってたやり方が

ファイル名を変更してしまう!

例えばアップした画像が『hoge.png』というファイル名で登録していたとしたら『hoge-1.png』として新しく画像を登録して使用する。一番早いですね。

html
# 修正前
https://image.rakuten.co.jp/account/cabinet/hoge.png

# 修正後
https://image.rakuten.co.jp/account/cabinet/hoge-1.png

でもこれだと、見た目同じような画像がCabinet上に何個も並んで見た目よろしくないです。

それに容量も無限ではないので、なるべくこういった無駄な画像は無いに越したことは無いです。

まぁ、普通に都度いらない画像は消して居ればいいんですが、ほら。みんな忙しくて、『やべ!Cabinet容量いっぱいだ!』ってなってから初めて画像整理しませんか?わかります。それ僕の事です。

おススメ!煩雑にならない画像の上書き

ならどうすれば良いか。めちゃくちゃ簡単!

普通に上書きして下さい。

そしてアップロード上書きした画像のURLの後ろに『?』を付けるだけです。それだけです。すぐ画像変わります。

分かる人からしたら当たり前かもしれませんが、簡単に言うと一回その画像URLを誰かが見てしまうと、『またその内容探すの面倒だからしばらくそのURLは同じ画像表示しちゃうよ~』みたいな感じです。

てな感じで、Cabinetで上書きしたのに、修正が反映されないのです。

早いと数時間の時もありますけど、大体次の日の昼くらい?(24時間かな?)には通常のURLで修正画像に反映されてます。

楽天の場合は、それまでは古い修正前の画像が表示されてしまいます。

r-tips-cabinet-2

『?』ってなんなの?

URLの後ろの『?』は本来、パラメーター渡し用に使用するデータです。今回の場合は、強いて言えば『画像データに、パラメータ何も無しを渡しますよ。』みたいな感じでしょうか。

要するに、何もしないので、実質キャッシュだけクリアできる感じです。

また画像を修正したい場合は?

また変更でちゃった!なんて時は、『?』の後ろに連番でもいれて上げればOKです。

text
https://image.rakuten.co.jp/account/cabinet/hoge.png?1

といった感じです。実際は?の後ろはなんでもよいです。

サムネイルドメインに注意!

画像URLが『https://image.rakuten.co.jp/account/cabinet/』から始まるアドレスなら問題ないですが、『https://thumbnail.image.rakuten.co.jp/@0_mall/account/cabinet/』から始まる場合、『?』までは大丈夫ですが、連番の部分は上手くいきません。

text
https://thumbnail.image.rakuten.co.jp/@0_mall/account/cabinet/hoge.png?
https://thumbnail.image.rakuten.co.jp/@0_mall/account/cabinet/hoge.png?1

その場合は、?の後ろに『_ex=横サイズx縦サイズ』を入力して、その後ろに『&』を入れてあげればOKです。

text
https://thumbnail.image.rakuten.co.jp/@0_mall/account/cabinet/hoge.png_ex=200x200&

こんな感じですね。
サムネイル機能に関しては、コチラも合わせてご覧下さい!

モバイル画像には使用できません

ただし、商品編集画面のモバイル画像設定フォームにはこのやり方は使用出来ません。URL自体に『?』だったり『&』を使用すると、エラーになってしまうからです。

いつも画像を直す度に、ファイル名を変更していた方は一度試してみてはいかがでしょうか?

ちなみに、僕がファイル名を変更してあげていた時期の最高にうざいファイル名は『hoge-aaaaaaaaaaaaa111.jpg』です。

こんなファイルがCabinet内を牛耳らないように管理はしっかり出来るようにしましょう!

関連記事

timestamps-converter-cover.avif

「このUNIXタイムスタンプいつ?」をサクッと解決!Mac開発者のための快適設定

Python+シェルスクリプトでUNIXタイムスタンプ(秒/ミリ秒)を即変換。

apple-emacs-shortcut-cover.avif

Macユーザーに捧ぐ!日常が変わるEmacs風ショートカット厳選まとめ

Macの標準機能で利用できるEmacsキーバインドを使って日常のテキスト入力などを効率化!

adobe-graduation-ceremony-cover.avif

【Adobe卒業式】年間10万円の節約!AdobeからApple Creator Studioに乗り換えた話

高額なAdobe税から卒業!解約の違約金トラップや、解約前にやるべき事などを解説。

vim-believer-cover.avif

爆速コーディングを実現するVimを布教する記事【入門編】

俺選!実務で爆速化する神コマンドを厳選して布教します。

timemachine-to-mac-transfer-cover.avif

意外と簡単!Time MachineでMac環境をお引越し(M1→M5)

Time MachineでMacを移行したらほぼそのまま復元できた話。

vite-first-guide-cover.avif

「アナタ無しでは生きられない!」Viteを使って今スグ爆速の開発環境を整えよ!

保存した瞬間にブラウザが更新されるViteの「ホットリロード」を活用した爆速開発環境を作る手順を解説!

jetstream-profile-image-cover.avif

Jetstream(Laravel)でプロフィール画像が表示されない会場はこちらです

Jetstreamで画像が保存・表示されない原因をケースごとにまとめました。

wordpress-enqueue-scripts-cover.avif

コピペで完了!WordPressでスクリプトにdefer・async・moduleを付ける方法

WordPressでスクリプトにdefer・async・moduleを付ける方法を解説。コピペで使えるサンプル付き。

cloud-document-cover.avif

使ってみたいよね?Adobeクラウドドキュメントを試してみた

Adobeクラウドドキュメントを試して感じたメリットとデメリットをまとめました。

lv-sl-error-cover.avif

Laravelでstorageの画像が表示されない件

Webアプリ(Laravel)をサーバー移動した際に画像が表示されなかった場合の備忘録です。

railx6sj-cover.avif

ssh接続エラー: Too many authentication failuresをどうにかする

SSH接続時に出現する「Too many authentication failures」のエラーの解決法についてご紹介。

kusanagi-sever-error-cover.avif

KUSANAGIでサイトが表示されない場合は初心にかえる

KUSANAGIサーバーでどうやっても希望のドメインがサイトから見れなかった場合に試してたい選択肢をご紹介。


新着記事一覧

kindle-comic.png

無料で漫画を一気読み!Kindleで出産レポ・育児漫画などなど

timestamps-converter-cover.avif

「このUNIXタイムスタンプいつ?」をサクッと解決!Mac開発者のための快適設定

Python+シェルスクリプトでUNIXタイムスタンプ(秒/ミリ秒)を即変換。

apple-emacs-shortcut-cover.avif

Macユーザーに捧ぐ!日常が変わるEmacs風ショートカット厳選まとめ

Macの標準機能で利用できるEmacsキーバインドを使って日常のテキスト入力などを効率化!

adobe-graduation-ceremony-cover.avif

【Adobe卒業式】年間10万円の節約!AdobeからApple Creator Studioに乗り換えた話

高額なAdobe税から卒業!解約の違約金トラップや、解約前にやるべき事などを解説。

vim-believer-cover.avif

爆速コーディングを実現するVimを布教する記事【入門編】

俺選!実務で爆速化する神コマンドを厳選して布教します。

timemachine-to-mac-transfer-cover.avif

意外と簡単!Time MachineでMac環境をお引越し(M1→M5)

Time MachineでMacを移行したらほぼそのまま復元できた話。

apple-fitness-plus-cover.avif

体重乱高下アラフォーがApple Fitness+に行き着いた話

激しい体重の増減を繰り返したチョコザップユーザーが、コスパ最強の「Apple Fitness+」に乗り換えました。

vite-first-guide-cover.avif

「アナタ無しでは生きられない!」Viteを使って今スグ爆速の開発環境を整えよ!

保存した瞬間にブラウザが更新されるViteの「ホットリロード」を活用した爆速開発環境を作る手順を解説!

with-pomodoro-technique-cover.avif

「私のコトですか?」過集中&注意力散漫な人に刺さる!効率化ではなく“生存戦略”のポモドーロ術

集中力が「0か200」しかない人に朗報!ポモドーロ・テクニックが脳の暴走を止める最強の特効薬でした。

jetstream-profile-image-cover.avif

Jetstream(Laravel)でプロフィール画像が表示されない会場はこちらです

Jetstreamで画像が保存・表示されない原因をケースごとにまとめました。

wordpress-enqueue-scripts-cover.avif

コピペで完了!WordPressでスクリプトにdefer・async・moduleを付ける方法

WordPressでスクリプトにdefer・async・moduleを付ける方法を解説。コピペで使えるサンプル付き。

cloud-document-cover.avif

使ってみたいよね?Adobeクラウドドキュメントを試してみた

Adobeクラウドドキュメントを試して感じたメリットとデメリットをまとめました。