楽天市場　スマホアプリ　スマートフォン用商品説明文　のiframeを使用した場合に途中で切れる件

Question

お世話になります。

楽天市場　スマホアプリにて、スマートフォン用商品説明文を見た場合でお聞きしたいのですが、
imgの枚数制限をタグでクリアした形にして並べると、何枚並べても縦長で表示されるかと思います。

レアなケースかもしれませんが、iframeでコンテンツを作って表示させている場合ですが、
そのiframeが長い場合途中で切れてしまいます。

実際のページです
https://item.rakuten.co.jp/trendstyle/em204002/

ちなみに、アプリの場合、スマートフォン用商品説明文
にて、LPの縦の長さの制限などありますでしょうか？
※楽天公式にはアナウンスがないと思いますが。

もしくは、iframeの場合で、長すぎて途中で切れるといった事象などはありますでしょうか？

過去ログを見ましたが、それらしいのが発見できず、質問させて頂きました。###HR######IMG09d7acc71718ac81ad1d90b09e0da9b62.pngIMG0###

Answer

こんにちは！本日よりECマスターズに参加のシノエクラWEB担当のかっちゃんです。
高さの設定はできます。

スマートフォン用商品説明文に“iframe”タグを記入する時に、idを設定します。
例えば。

スマートフォン用商品説明文には、直接cssタグは記入できないので
そこに読み込むcssに、“iframe#xxxxxxxx { width: 100%; height: 400px; }”　と記入します。

当店サンプル：　https://item.rakuten.co.jp/shinoeclat/k18bezel_diamondbracelet/

スマホで見ると、iframeと次の画像の間に少し余裕を持たせるために隙間開けてます。
画面解像度がバラバラなアンドロイドやタブレットなどでiframeの中のhtmlが見切れる場合があるので、
heightのpxを長めに設定しています。

また各種イベントやバナー等で画像切り替えが必要ですが、楽天等のキャッシュのため直ぐには切り替わりません。

なので、ifremeで指定する読み込み先のhtmlにバージョン情報を記載し、更新したらcsvで一気に書き換えています。


cssとsample.htmlを更新してgoldにアップ、上のiframeタグの“?20190919”の数字を増やしてcsvのスマートフォン用商品説明文を置換し楽天csvにアップして一気に更新してます。


今日からECマスターズに参加したのでわからないんですけど、ツール利用すれば楽に運用できるのかな？
とりあえず現場からは以上ですー

Answer

ECマスターズの田中です。

shinoshinoさん、早速実例をご共有いただき、ありがとうございます。

EMP遠藤さんにいただいた商品ページでは、
アプリの高さ制限ではなく、
高さの指定が実際の内容の高さよりも不足していることが原因で、
途中で切れた表示になっております。

仕組みを、順を追って説明いたします。

EMP遠藤さんのショップでは、スマートフォン用の
商品ページ共通説明文に、
「iFrame Resizer」という、iframeの高さを自動調整する仕組みが
導入されております。
そのため、スマートフォンのブラウザで商品ページを閲覧すると、
iframeの高さが内容に合わせて、自動で調整され、
問題なく閲覧することができます。

ですが、アプリの商品詳細画面は
ブラウザで閲覧したときと根本の仕組みが異なっており、
各商品のスマートフォン用商品ページを
単独のWebページとして読み込み、表示させております。

そのため、共通説明文に設置した「iFrame Resizer」の仕組みが
読み込まれず、高さの自動調整が行われないために
途中で切れた表示になってしまいます。

表示を途中で切れさせないためには、
切れない十分な高さを予め指定しておく、
アプリでも高さの自動調整を行うように仕組みを修正する、
といった形で、ご対応いただく必要がございます。

楽天市場 スマホアプリ スマートフォン用商品説明文 のiframeを使用した場合に途中で切れる件

楽天市場　スマホアプリ　スマートフォン用商品説明文　のiframeを使用した場合に途中で切れる件