スマホのファーストビューバナー設置について

Question

お世話になってます。
デザインレシピを見てスマホのファーストビューにバナーを設置するで下記項目で躓いてます。


ファイル名の末尾を「.js」にして、
外部JSファイルとして保存し、
楽天GOLDにアップロードしてください。


本当に、ビックリ発言だと思いますが・・
「外部JSファイルとして保存し、楽天GOLDにアップロードする」の意味が分かりません。
RMSの手順では、どこにどのようにすることなのでしょうか？

jQuery(function($){
$('#itemImageSlider').before($('.iframeBefore'));
});

上記をどこでファイルに保存？して
保存したものをRMS内のどこに貼り付ける？など・・・

すみませんがよろしくお願いします。

Answer

ECマスターズの伊藤です。

> 「外部JSファイルとして保存し、楽天GOLDにアップロードする」の意味が分かりません。
> RMSの手順では、どこにどのようにすることなのでしょうか？

楽天で用意されている、Ribraryをご利用いただき、
GOLDでアップロードしていただくか
FFFTPなどのFTPツールをご利用いただき
GOLDにアップロードしていただく必要がございます。

[Ribrary] Ribraryを使う
https://navi-manual.faq.rakuten.net/service/000010188?l-id=SearchResult

[楽天GOLD] FTPソフトの設定方法：FFFTP
https://navi-manual.faq.rakuten.net/service/000010370?l-id=SearchResult

まだどちらも設定されていないようでしたら
Ribraryの方が、サムネイル表示や、URLのコピーに対応していますので
おすすめとなっています。


> 上記をどこでファイルに保存？して
> 保存したものをRMS内のどこに貼り付ける？など・・・

こちらは、メモ帳に貼り付けていただき
ファイル名の末尾を「.js」にして、保存してください。

例：sample.js

保存したファイルは、先にご案内しているツールにて
GOLDににアップロードをお願いいたします。


上記手順にてご不明な点は、返信よりご相談ください。

Answer

ありがとうございます！
色々やってますが・・たどり着きませんj
Query(function($){
$('#itemImageSlider').before($('.iframeBefore'));
});

↑
アップロードしましたが
外部JSファイルのURLが分かりません・・
ftp://ftp.rakuten.ne.jp:16910/sample.js

https://www.rakuten.ne.jp/gold/店舗の●/A/b/○○.html
↓
https://www.rakuten.ne.jp/gold/店舗の●/16910/b/sample.js
こんな風に当てはめるのかな？と・・bが不明


ECステーションで作成したバナーURL








↑
これでスマホ商品ページ共通パーツ設定に貼り付けましたが
横幅小さいし、画像の下に出ます。
横に分け分からないスクロール？も出てるので間違ってるのは分かります><

すみませんがご教示願います。

Answer

ECマスターズの伊藤です。

> https://www.rakuten.ne.jp/gold/店舗の●/A/b/○○.html
> ↓
> https://www.rakuten.ne.jp/gold/店舗の●/16910/b/sample.js
> こんな風に当てはめるのかな？と・・bが不明

/A
/b
は、フォルダの階層を意味しています。

例えば、今回sample.jsを
「16910」フォルダの中の「b」フォルダに
アップロードしていただいたのであれば
上記のURLで間違いございません。

特にフォルダを指定してなければ
https://www.rakuten.ne.jp/gold/店舗の●/sample.js
となります。


> 
> 
> 
> 
> ↑
> これでスマホ商品ページ共通パーツ設定に貼り付けましたが
> 横幅小さいし、画像の下に出ます。
> 横に分け分からないスクロール？も出てるので間違ってるのは分かります><


の横幅、縦幅はご指定頂いていますでしょうか。

指定済みであれば、実際のページを確認させていただきたいので
対応しているページのURLを
返信もしくは一番最初の投稿の右下にございます
「投稿内容について報告する」よりお知らせいただきますようお願いします。

Answer

お世話になっております。

/A
/b
は、フォルダの階層を意味しています。
↑
そうゆう意味だったんですね・・

ftp://ftp.rakuten.ne.jp:16910/sample.js
上記、ftttpのリンクをコピーしたものに
下記URLを当て込み「b]がなんだかわからなかったのでそのまま「ｂ」を入れました汗

https://www.rakuten.ne.jp/gold/店舗の●/A/b/○○.html
↓
https://www.rakuten.ne.jp/gold/店舗の●/16910/b/sample.js


特にフォルダを指定してなければ
https://www.rakuten.ne.jp/gold/店舗の●/sample.js
↑
こちらで試したところ画像の上にきましたが・・・



の横幅、縦幅はご指定頂いていますでしょうか。
↑
指定してないです。


デザインレシピに幅 304ピクセルと記載があったので
その通りでツールバー作成しました。

実際のページを送りますのでよろしくお願いします。

Answer

ECマスターズの伊藤です。

URL、設置タグのご連絡ありがとうございました。

> https://www.rakuten.ne.jp/gold/店舗の●/sample.js
> ↑
> こちらで試したところ画像の上にきましたが・・・

sample.js がきちんと指定できたため
無事、画像の上に表示させることができたようです。


> 
> の横幅、縦幅はご指定頂いていますでしょうか。
> ↑
> 指定してないです。
> 
> デザインレシピに幅 304ピクセルと記載があったので
> その通りでツールバー作成しました。

ECステーションの設定と、上記とでは、設定する箇所が異なりますので
width="横幅" height="縦幅"
も指定していただきますよう、お願いいたします。



また、このままですと、左によってしまいますので

Answer

お世話になっております。
早々にご回答いただきありがとうございます！




囲ってみました。

width="横幅" height="縦幅"
↑
縦の数値は入れて無いですが横幅に「100％」と入れてみました。

正常に設置できたように思います。
大変お手数ですが問題なさそうかご確認いただいてもよろしいでしょうか？
よろしくお願いします。

Answer

ECマスターズの伊藤　様

何度もご回答いただきありがとうございました。
問題なく設置出来てるようなので先ほど書き込みした確認は不要です。
同じ要領で「お気に入りボタン」設置もしてみました。
忙しい中、本当にありがとうございました。
今後ともどうぞよろしくお願いします。

Answer

ECマスターズの伊藤です。

> 正常に設置できたように思います。
> 大変お手数ですが問題なさそうかご確認いただいてもよろしいでしょうか？

ご対応いただきありがとうございます。
ページを改めて拝見させていただきました。


> width="横幅" height="縦幅"
> ↑
> 縦の数値は入れて無いですが横幅に「100％」と入れてみました。

縦の数値を入れていただかないと
一部機種にて高さが取得できず、正常に表示することができなくなってしまいますので
ご指定いただいたほうが、よろしいかと思います。

また
height="縦幅"
のように、"縦幅"は、本来、heightの値として想定していない
文字列となってしまうため、何かしらに影響が出てしまう可能性がございます。

高さを指定しない、というようであれば
height="縦幅"
を削除していただきますよう、お願いいたします。


> 同じ要領で「お気に入りボタン」設置もしてみました。

デザインレシピのご活用ありがとうございます。
楽天GODLを使いこなせていただけてるようで
とても嬉しいです。

慣れないと難しい点も多いと思いますので
ご不明な点がございましたら、ご相談くださいませ。

Answer

ECマスターズ 伊藤 様

ご確認いただきありがとうございます！
縦も入れないとなのですね！
横幅100％、縦は120と入れましたが合ってますか？
先ほど、アップしたタグを「投稿内容に報告する」へ送りました。

この場合、横幅も100％ではなく 304と入れた方が良いのでしょうか？

完了した気でいましたが何度も恐縮です。
よろしくお願いします。

Answer

ECマスターズの伊藤です。

> 横幅100％、縦は120と入れましたが合ってますか？

修正ありがとうございます。
横幅は問題ございません。

縦は、画像似合わせて120としていただいていると思いますが
画像の周り、枠や余白があるため
120ですと、画像が少々切れてしまいます。

また、画像の下に、登録している画像分
●●●●
と表示されています。
160に指定していただきますと
全て表示していただくことができます。

スマホでどのように表示されているか
確認していただくには、Chrome拡張機能を
ご利用くださいませ。
Chromeにて、対象のページを開いていただきますと
右下に拡張機能の黄色の丸に＋のアイコンが
表示されていると思いますので
そちらをクリックしていただき、 
スマホビューを選択してください。
https://manual.ec-masters.net/index.php?ecm-tools-manual-rmsplus#g88c38a4

なお、スマホビューの際に、PCの画像が
消えてしまうことがございますが
拡張機能のバグとなっており
実際のページで消えてるわけではございませんので
ご安心くださいませ。

Answer

ECマスターズの伊藤 様

本当に何回もすみませんでした！
縦 160に設定しました◎

Chrome拡張機能を入れてるのですがすっかり忘れて自分の携帯で見比べてました＞＜
今度は、Chrome拡張機能を色々勉強していきます◎
ありがとうございました。

Answer

ECマスターズの伊藤です。

> 本当に何回もすみませんでした！
> 縦 160に設定しました◎

設定いただきありがとうございました。
160だと少し●が切れてしまいますね。大変失礼いたしました。
もし気になるようでしたら、165以上の数字のご指定をお願いいたします。


> Chrome拡張機能を入れてるのですがすっかり忘れて自分の携帯で見比べてました＞＜
> 今度は、Chrome拡張機能を色々勉強していきます◎

Chrome拡張機能は、商品ページから、RMSの商品編集ページに飛ぶことができたり
画像の入れ替えがドラックでできるなど、日々進化しているので、
ぜひ色々と使ってみてください。