楽天スマホにiframe表示した際の高さ自動取得

Question

楽天スマホにiframe表示した際の高さ自動取得に関して教えてください。

シンプルにiframeに直接hight指定したところ
ブラウザでOKでもアプリで切れてしまう現象が確認できました。

jQueryAutoHeight.js を利用する方法をテストしてみたのですが
うまく動作させられない状況です。

どのような方法で実装されているのか教えてください。
よろしくお願い致します。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法を含む内容のため、
　今後、RMSの改修により、使用できなくなる可能性があります。

jQueryAutoHeight.js は、
別の目的（複数のブロック要素の高さをそろえる）のためのプラグインなので、
代わりに、下記プラグインをお試しください。

iFrame Resizer
http://davidjbradshaw.github.io/iframe-resizer/

導入方法ですが、たとえば、

上記サイトの「Download ZIP」よりダウンロードしていただいた
zipファイルを解凍し、「js」フォルダの中にある
「iframeResizer.min.js」「iframeResizer.contentWindow.min.js」を
楽天GOLDにアップロードしていただき、

iframeとして埋め込まれる側のHTMLファイルに



を、iframeを呼び出す側のページに


 jQuery(function($){ $('iframe').iFrameResize(); }); 

を、それぞれご記載いただく、といった形になります。
（各jsファイルのURLは、実際のURLに変更してご利用ください）

Answer

ありがとうございます。

早速導入してみましたところ、

〇iframeとして埋め込まれる側のHTMLファイル


〇スマートフォン用商品説明文

 jQuery(function($){ $('iframe').iFrameResize(); }); 

※URLは変えて入力しています

ブラウザはOKですが、アプリが高さ取得が出来ていない模様で
うまくいっておりません。

お手数おかけいたしますが、よろしくお願いします。

Answer

ECマスターズの田中です。

申し訳ありませんが、アプリ内のブラウザは、
SafariやChromeなどのブラウザと動作が異なる可能性があり、
また、楽天アプリの中で動いている関係で、
Safariのように開発者ツールを利用して分析することができないため、
エラーが起こった場合もその内容を確認することができず、
正確な原因を調査することができません。

別途、アプリ向けに、タグのheight属性で
おおまかな高さをご指定いただくことはできますでしょうか。

念のため、解決策がないか確認させていただきますので、
実際に導入された商品の商品管理番号を
お知らせいただけますでしょうか。
フォーラムにて返答いただき辛い場合は、
リクエストフォームよりお知らせください。

Answer

ありがとうございます。

101a-01

になります。
よろしくお願い致します。

別途、アプリ向けに、タグのheight属性で
おおまかな高さをご指定いただくことはできますでしょうか。

を指定しても、教えて頂いたjsで対応ブラウザは問題なく表示
されるのでしょうか？

Answer

ECマスターズの田中です。

＞101a-01
＞になります。

ご連絡いただきありがとうございます、
改めて確認させていただきます。

＞を指定しても、教えて頂いたjsで対応ブラウザは問題なく表示
＞されるのでしょうか？

height属性の指定よりも、JavaScriptによって変更される方が優先され、
問題なく表示されるはずです。
一度、height属性に短めの高さをご指定いただき、
iOS以外のブラウザで表示をご確認いただけますでしょうか。
（iOSのブラウザは、原則として、
　のheight属性にかかわらず、内容全てを表示する仕様となっております）

Answer

ECマスターズの田中です。

私にて、101a-01での表示を確認してみました。

iPhone6sのSafariですと、
のheight属性が10200pxと設定されているところ、
iFrame Resizerによって9832pxに調整され、
丁度良い高さとなっております。

いっぽう、アプリで見た場合も、
商品説明文の部分がブラウザと同じ高さで表示されておりました。

現在は、アプリで表示した場合も、
問題なく表示されているのではないでしょうか。
再度、ご確認いただけますでしょうか。

もし、FBさんの環境で正しく表示されない場合は、
ページを読み込んだことのない他の機種でご覧いただく、
アプリのバージョンが最新かご確認いただく、
といったご対応をお願いいたします。

Answer

こんにちは。
初めて投稿いたします。よろしくお願いします。

スマホ商品ページのiframeの高さ自動取得方法につきまして、
下記の通り設定しましたが、反映されません。

----------------------------------------------------------------

〇iframeとして埋め込まれる側のGOLDのHTMLファイル


〇スマートフォン用商品説明文（商品ページ共通説明文でも試しました）

 jQuery(function($){ $('iframe').iFrameResize(); });

Answer

ECマスターズの田辺です。

１点確認ですが、

iFrame Resizer
http://davidjbradshaw.github.io/iframe-resizer/

上記サイトの「Download ZIP」よりダウンロードしていただいた
zipファイルを解凍し、「js」フォルダの中にある
「iframeResizer.min.js」「iframeResizer.contentWindow.min.js」を
楽天GOLDにアップロードしていただけましたでしょうか。

２つのJSファイルをアップロードしていただいている場合でも

〇iframeとして埋め込まれる側のGOLDのHTMLファイル
iframeResizer.contentWindow.min.jsのURL
と
〇スマートフォン用商品説明文
iframeResizer.min.jsのURL

の書き方が合っているかどうかご確認をお願いいたします。

ご自身で合っているかのご確認が不安な場合には、
実際に書いていただいたURLを教えていただいてもよろしいでしょうか。

例）https://www.rakuten.ne.jp/gold/***/js/iframeResizer.min.js
URLにあるショップ名などを伏せていただくことで他の会員様から
ショップを特定することはできませんのでご安心くださいませ。

Answer

田辺さま

お世話になります。
ご返答ありがとうございました。

ご返答いただきました内容、再度確認いたしました。
間違いないように思います。

下記URL貼りますので、みていただいてよろしいでしょうか。
よろしくお願いします。

https://www.rakuten.ne.jp/gold/***/jquery/iframeResizer.contentWindow.min.js
https://www.rakuten.ne.jp/gold/***/jquery/iframeResizer.min.js

Answer

田辺さま

https://www.rakuten.ne.jp/gold/***/memo.txt
よろしくお願いします。

Answer

ECマスターズの田辺です。

GOLD内に丁寧にメッセージを入れていただきましたので
スムーズに確認することができました。
誠にありがとうございます。

PCで確認したところ
cocohideさんの設定には問題がなく、
iFrame Resizerは動作しておりました。

それであればandroidでも動作するとは思うのですが、
高さが取得されないということですので
androidでの検証をさせていただきたいと思います。

そのため恐れ入りますが、
１〜２日ほどお時間をいただいてもよろしいでしょうか。

原因が分かり次第回答させていただきます。

Answer

ECマスターズの田辺です。

検証しましたところ、
弊社のAndroidではchromeで高さを取得して表示されました。

Androidのバージョンよってはiframeと相性が悪くなることもあるようです。

また、対象のタグを絞って、リサイズを行っていただくことで解決することも
ございますのでそちらをお試しいただいてもよろしいでしょうか。

具体的な方法ですが、
スマートフォン用商品説明文に含まれるタグの中身、
jQuery(function($){ $('iframe').iFrameResize(); });
を、
jQuery(function($){ $('#itemDescription iframe, #shopCommonText iframe').iFrameResize(); });
このように修正していただき、
動作をご確認いただきますようお願いいたします。

また、アプリでは元々高さを取得することができませんので、
過去にFBさんにご案内させていただいたように
タグのheight属性で
おおまかな高さをご指定いただくことはできますでしょうか。

height属性の指定よりも、JavaScriptによって変更される方が優先され、
問題なく表示されるはずですのでご安心くださいませ。

Answer

田辺さま

早速お調べいただいてありがとうございました。

新たにいただいた修正方法で確認する前にcashを削除して確認したところ、
android chromeできれいに表示されていました。

都度都度削除していたつもりなのですが、
反映が遅かったかもしれないことに加え、更新されていなかったのかもしれません。
お手数おかけいたしました。ありがとうございます。

androidのアプリ用に高さ設定が必要になりますが、
今まで、iphoneのアプリ、safari、androidのアプリ、chromeと、
iframeの高さがあるほどに差が出てしまうので、
どの高さで設定するか困っておりましたので、
androidのアプリだけに絞って高さを入れることで対応できるようになり、
手間が減って助かります。
ありがとうございました。

Answer

田辺さま

お世話になります。
いろいろと試してみました。
iOSだったり、jsだったり、height指定だったり、
どれが高さを出しているのか、難しいですね。
以下、報告です。

-----------------------------------------------

jsなし、heightなし

　・iphone 楽天アプリ・・・高さ取得
　・iphone safari・・・高さ取得
　・android 楽天アプリ・・・高さなし
　・android chrome・・・高さなし

jsあり　heightなし

　・iphone 楽天アプリ・・・高さ取得
　・iphone safari・・・高さ取得
　・android 楽天アプリ・・・高さなし
　・android chrome・・・高さ取得

jsあり　heightあり

　・iphone 楽天アプリ・・・高さ取得
　　　（ iframeのhtmlより短いheightを設定した場合は、height指定は無視）
　　　（ iframeのhtmlより長いheightを設定した場合は、height指定が有効）
　・iphone safari・・・高さ取得
　・android 楽天アプリ・・・高さ取得
　・android chrome・・・高さ取得

Answer

ECマスターズの田辺です。

cocohideさん、ご報告いただき
誠にありがとうございます。

またお困りのことなどございましたら
ご質問お待ちしております。