楽天でのスマホインラインフレームの高さ指定

Question

楽天のスマートフォンの共通エリアで、インラインフレームにてバナーを表示させています。
今までiphoneで見ていたのですが、androidで確認するとワイズは100%で問題ないのですが、縦がほとんど見えません。
ハイトを1000pxとかautoとかいろいろ試してみましたが、うまくいきません。
解決策あれば教えていただけないでしょうか？
以上、よろしくお願いいたします。

Accepted Answer

お世話になっております。

2点中、1点のゴールドページ（iframeの中に表示させるページ）には
を変更したURLで挿入し
もう1点は表示させず

商品共通説明文の方は

 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); 

こちらもURLを変更して挿入しています。

クロームの拡張機能でアンドロイド表示を確認しておりますが
今回は最初と同じようにスクロールバーが表示されているようです。
ご迷惑おかけしておりますが、よろしくお願いします。

Answer

ECマスターズの田辺です。

iframeはiPhoneなどのiOS端末では内容の大きさに
合わせて表示されるのですが、
android端末の場合には高さが自動で取得されませんので
例えば以下のようなの高さを内容に合わせて自動調整する、
下記jQueryプラグインをお試しください。

iFrame Resizer
http://davidjbradshaw.github.io/iframe-resizer/

導入方法ですが、たとえば、

https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.js
https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.1.1/iframeResizer.contentWindow.min.js
上記２つのURLを直接開いて、パソコンに「保存」していただいた上で
楽天GOLDにアップロードしていただき、

iframeとして埋め込まれる側のHTMLファイルに



を、iframeを呼び出す側のページ（今回の場合は商品ページ共通パーツ設定）に


 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); 

を、それぞれご記載いただく、といった形になります。
※各jsファイルのURLは、実際のURLに変更してご利用ください。
（2019/3/1 20:56 コード修正・2019/9/19 19:37 ダウンロード方法修正）

Answer

お世話になっております。
ありがとうございました。早速、試してみました。

ゴールドで作成している埋め込まれるURLに下記を


呼び出す方のRMSのスマホ商品ページ共通設定に

 jQuery(function($){ $('iframe').iFrameResize(); }); 


それぞれURLを変更して挿入してみました。
スクロールはしなくなったのですが、読み込みのフレームが途中で切れてしまいました。
どこか、heightの指定が必要になるのでしょうか？
お手数をおかけしますがご回答をお願い致します。

Answer

ちなみにゴールドの作成ページは2点あり、それぞれにを変更したURLで挿入しました。

入れる場所が良くなかったなどありますでしょうか？

Answer

ECマスターズの田中です。

私にて確認したところ、
iframeResizer.contentWindow.min.jsを設置していない
（楽天のシステムによって自動的に挿入されたものなど）に対して
リサイズを行おうとして、JavaScriptエラーを起こした結果
サムネイルの表示処理が止まっていることがわかりました。

対象のタグを絞って、リサイズを行っていただけますでしょうか。

具体的な方法ですが、
スマートフォン用商品説明文に含まれるタグの中身、
 jQuery(function($){ $('iframe').iFrameResize(); });
を、
 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); });
このように修正していただき、
動作をご確認いただきますようお願いいたします。

Answer

ECマスターズの田中です。

私にて確認したところ、iFrame Resizerが問題なく動作しているようですが、

＞今回は最初と同じようにスクロールバーが表示されているようです。

というのは、縦がほとんど見えない状態でしょうか、
それとも、２つ以上のスクロールバーが同時に表示されておりますでしょうか。

また、
＞クロームの拡張機能でアンドロイド表示を確認しておりますが
こちら、どの拡張機能をご利用されているかをお知らせいただけますでしょうか。
私にて、同じ拡張機能を利用して確認させていただきます。

Answer

お世話になっております。

拡張機能は
User-Agent Switcher for ChromeのAndroid KitKatで確認しております。

すみません、ジャバについてよくわからずこちらのお伝えが悪かったのですが
スマホ商品説明共通文と
shopCommonText（直接スマホの商品説明文）の方に
どちらにもiframeを入れておりました。

共通説明文に入っているiframeに関してひとまずスクロールを解消したいと思います。

状態についてはスクロールバーが表示されておりiframeの縦幅がほとんどとれておらず縦がほとんど見えていません。

たびたび恐れ入ります、よろしくお願いします。

Answer

ECマスターズの村井です。

休み明けに担当の者より改めて回答させていただきますので、
今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

大変お待たせいたしました。
共通説明文のiframeについて確認したところ、
User-Agent Switcher for ChromeでAndroid KitKatに切り替えた場合、
弊社で所有のAndroid機、
いずれの場合でもiframe Resizerが動作して
問題なく縦幅が確保されることを確認いたしました。

taketakeさんにて、まずは
User-Agent Switcher for ChromeでAndroid KitKatに切り替えた場合にて、

・スーパーリロードを行う
https://liginc.co.jp/web/tool/browser/47339
・Chromeの設定画面から、キャッシュを削除する

といった方法で、ページを再度読み込んでいただき、
やはり縦幅がとられないかどうか、ご確認いただきますようお願いします。

どうしても縦幅がとられない場合は、
別のブラウザやスマートフォンにて、
縦幅がとられている様子をご確認いただくことはできますでしょうか。

Answer

やはり、スーパーリロードをしても回復しません。
商品ページで見ていただけているのでしょうか？
https://item.rakuten.co.jp/takespo/fme60-dn8374/###HR######IMG0fcf84f4f37bdff8c3512ff0dd80ba3bf.gifIMG0######BR###

Answer

ECマスターズの田辺です。

確認させていただいたところ、
レビュー下にあるiframeは問題なく表示されているようですが、
画像でいただいた方のiframeは、
との中にある



がコメントアウトされておりましたので
から外してご記入いただき再度動作をご確認いただいてもよろしいでしょうか。

Answer

いつもお世話になっております。

すみません、いろいろ勘違いをしておりまして、
今回は#shopCommonText に適応できてレビュー下の方の表示ができていたと思うのですが

上の方にあるスマホ説明文（共通ではなく直接の商品説明）に入れている
iframeにも同様に適応させて、きれいに表示させていきたいと思っています。

を外して表示確認しましたところ、長い空白欄ができてしまったので
こちらも解消したいと思いますが




 jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); }); 



以前ご教示いただいたコチラを変更したらうまく表示できるのでしょうか。
誠に恐れ入りますがご回答の程、お願い致します。

Answer

追記です。

ChromeのAndroid KitKat→長い空欄となりましたが
スマホのAndroidで確認したら「縦がほとんど見えない状態」と同様に切れて表示されております。

Answer

お世話になっております。

キャッシュの問題だったのか、ブラウザや確認機種を変更したら解決しましたので
終了させていただきます。

大変お世話になりました。
お時間いただき誠にありがとうございました。

Answer

ECマスターズの田中です。

無事解決して何よりです。
また、何か問題などございましたら、改めてご質問ください。