• 楽天
  • Yahoo!

知ってより便利に活用しよう!「楽天GOLD」2つの特性

2

スマホバッテリーがへたってきたので激安で新品入手し交換した結果・・・
以前とバッテリーの減り具合があまり変わらず「安かろう悪かろう」を身に染みて感じた佐藤です。

店舗構築を楽天GOLDを使って独自HTMLのTOPページにすると
非常に自由度の高いページを作る事ができますよね!
WEBページ製作ができる店舗様には是非オススメしたいこの「楽天GOLD」
通常のレンタルサーバー同じように見えて実は特殊な特性をもっているのです。
今回はこの特性に影響されるファイル別でご紹介したいと思います。

画像ファイル

主要な拡張子

  • .jpg
  • .gif
  • .png

jpgなど主に保存されている画像のタイプは
上記3種類かと思われます。
色が少ない画像、アニメーションはgif、写真はjpg、透過させたい画像はpngなどで
使いわけるとよいでしょう。

1. 上書き遅延

楽天GOLDでは画像を同じファイル名で上書きした際、
ブラウザを通して確認すると中々上書きがされません。
こんな経験あるかと思います。
この上書き遅延を解消する方法がこちら。

<img src="test.jpg?123456">

上記のように画像URLの末尾に「?」を付け、その後に適当な数字を何桁か追加します。
これだけで上書きが即反映されるのです!
数字をつけた状態で上書きした場合は
今までの数字と重複しない番号に変更するだけで反映されます。

2. サムネイル表示

通常の画像表示
<img src="http://www.rakuten.ne.jp/gold/ogaria/test.jpg">
header-point10

このように何の変哲もなく表示されます。

サムネイル画像表示
<img src="http://thumbnail.image.rakuten.co.jp/@0_gold/ogaria/test.jpg?_ex=200x200">
header-point10

このようにURLをサムネイル専用にすると画像サイズの指定が可能となります。
画像URL末尾でサイズ指定をします。

サムネイルの指定最大値は700×700が最大となり、
それ以上の大きな指定は画像が表示されなくなります。
また、実際の画像が指定したサイズより小さかった場合は
数値が適応されず元画像の最大サイズが表示されます。

画像が正方形でない場合は長い方を基準にサイズ調整されますので
上記サンプルのように画像が長方形で200×200を指定した場合、正方形にはなりません。

<img src="http://www.rakuten.ne.jp/gold/ogaria/test.jpg" width="100">

これでいいのでは?と思ってしまいますね。
これだと実際の元画像サイズが読み込まれるため、元画像サイズが
大きいと読み込みに負荷がかかりページ表示までに時間がかかってしまうことがあります。
出来るだけこのサムネイル表記を使って表示させたいサイズへ調整させましょう。

WEB構成ファイル

主要な拡張子

  • .html
  • .css
  • .js
  • .xml
  • .json

ページを作る際に使用されるファイルは主にHTML、CSS、javascriptなどかと思われます。
この中で.jsファイルに限って画像ファイルと同じく
同名のファイル名で上書き更新した場合、即更新されません。

ここでも同じくコイツの出番です!

<script type="text/javascript" src="test.js?123456"></script>

これにて即更新が可能になります。

javascriptファイルや画像ファイルに限らず、
上書きが中々されない場合があります。
こんな時にもこの「?」作戦は有効なので是非お試しください!

自動数値付与ツール(楽天GOLD専用)

毎回ファイル上書きの度、数値を変更するのは手間!
なんて方には自動で数値を毎回ランダムで付けてくれるシステムを作ってみました!

このシステムは画像だけに作用します。
また、毎回新しい画像として読みこまれるので
キャッシュ機能が活かせずページ再読み込みが遅くなる事があります。

まとめ

いかがでしたでしょうか。
楽天GOLDサーバーは通常のレンタルサーバーと比べ特殊な機能がいくつか存在します。
この特性をうまく利用、対処してスピーディな店舗運営を実現してみてください!

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。