イベント告知君のスマートフォンページへの設置

Question

お世話になります。

イベント告知君の横スクロール版をスマートフォンページに設置したいのですがうまくいきません。
具体的には倍率表示の吹き出し分がはみ出してしまい、ページ全体の幅が広がってしまいました。

イベント告知君はスマートフォンページの場合、どこに設置するのが適当でしょうか？

よろしくお願いします。

Answer

ECマスターズの田中です。

横スクロール版イベント告知君の横幅が510ピクセルで固定なのに対し、
ページ全体の幅はそれより狭くなっております。
（iPhone5で320ピクセル、iPhone6plusでも414ピクセル）

下記のタグを共通説明文に記載することで、
イベント告知君の横幅を、ページ幅におさまるよう縮小して
表示させることができます。

===== この下の行から ================




===== この上の行まで ================
※タグに含まれる ショップURL は、ぴのさんのショップのURLにご変更ください。
例）http://www.rakuten.ne.jp/gold/sample/rpoint_box/rpoint_box_scroll.html
※楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

Answer

便乗させて下さい。
スマホでは横スクロール型の告知はユーザーは素通りするので、縦長になっても全部表示させたほうが良い、とアドバイスを受けたことがあります。

横スクロース型ではない通常版の設置方法も教えて頂けますでしょうか。
マニュアルを参考にして設置しましたところ、表示はされますが縦のサイズが短すぎたり長過ぎたりですので、内容に合わせて動的に縦サイズを調整する方法を教えて頂けますでしょうか。
スマホに最適化されたタグをアドバイス頂ければ幸いです。

Answer

ECマスターズの田中です。

通常版は、以下の方法でご設置ください。

===== この下の行から ================


===== この上の行まで ================
※タグに含まれる ショップURL は、自ショップのURLにご変更ください。
例）http://www.rakuten.ne.jp/gold/sample/rpoint_box/rpoint_box.html
※楽天RMSの、禁止タグを入力できるバグを利用した方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。


＞内容に合わせて動的に縦サイズを調整する方法を教えて頂けますでしょうか。
上記タグを挿入していただくだけで、
自動的にiframeの内容が全て表示される仕様になっております。
逆に、縦幅を指定して表示させることはできません。

これはスマートフォンのブラウザが、iframeをPCと異なる解釈をしているためであり、
今後、バージョンアップにより、
iframeの解釈方法が変わり、表示される高さが変化する可能性があります。
現在のところ、具体的に変更される予定はありませんが、念頭にだけ入れていただければと思います。

Answer

ありがとうございました。
無事設置できました。

ぴの様、便乗質問、失礼いたしました。

Answer

便乗になりますが質問させてください。

上記方法で設置をしましたが、スマートフォン環境ではバナーが表示されますが
楽天アプリでは表示されません。

（使用環境　iPhone6　）
FireMObile で他環境は確認致しました。

やはり、アプリ環境とは異なった仕様になるのでしょうか。

Answer

ECマスターズの田中です。

＞やはり、アプリ環境とは異なった仕様になるのでしょうか。　
詳細な違いはわかりませんが、異なる仕様にはなっております。

本来、スマートフォン向けページにてiframeの使用は想定されておりませんので、
楽天アプリのように、一部環境にて表示のされ方が異なる可能性があります。

Answer

田中様

いつもありがとうございます。

ご回答ありがとうございます。

Answer

田中様
ご回答ありがとうございます。

あまりスマホページをさわっていなかったので、PCサイトと比べて制限が厳しいとは知りませんでした。

基本的にスマホではiframeを使わない方がいいのでしょうか？
ECステーションの出荷日バナーもスマホだと買い物かごに入れるボタンの近くに設置するのが難しいみたいで苦労しています。

当店はあす楽に対応していますが土日は休みなのでスマホで出荷日がリアルタイムでわかると便利です。
スマホサイトでの効果的な設置方法をアドバイス頂けないでしょうか？

Answer

ECマスターズの田中です。

＞基本的にスマホではiframeを使わない方がいいのでしょうか？
はい、基本的にスマホではiframeを使わないようにしてください。
本来、スマホページにおけるタグの使用は楽天によって禁止されております。
また、スマホ上でのiframeの挙動は、環境によって曖昧で、
想定外の動作をする可能性があります。

ライバル店舗では、スマホ上で出荷日の案内をされておりますでしょうか。
まずは、ライバルと自社とのギャップを見た上で、
ライバルができていて、自社でできていない箇所を埋めていくことが
必要となりますので、
改めて、ライバル店舗の状況をご確認ください。

その上で、出荷日バナーを設置される際は、
下記のタグを利用して、
共通説明文の一番下に埋め込む、
画面下部の「お買い得！おすすめ商品！」バナーと
同じ要領で画面に固定させて表示させる、などの方法で
ご設置ください。

===== この下の行から ================

===== この上の行まで ================
※タグに含まれる 出荷日バナーのURL は、
　ECステーションで作成した出荷日バナーの貼り付けソースに含まれる
　URLをご記載ください。
※タグに含まれる 横幅 は、出荷日バナーの横幅を半角数字でご記載ください。

Answer

ありがとうございました。

バグを利用してiframeを埋め込んでいたのですね。
対策されるのも怖いのでできるだけiframeを使わずに画像やリンクで案内しようと思います。