スマホ商品説明文について

Question

いつもお世話になっております。

↑こちらPC用販売説明文に設置しているものです。

スマホでもそのままこちらを設置したいと考えていますが、
幅などがうまく設定できず躓いております。
ご教授よろしくお願いいたします。

Answer

ECマスターズの村井です。

担当より確認して回答させていただきますので、
今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

こちらは、Photoshopで書き出されたHTMLファイルですね。
横幅が960pxの固定幅で設定されておりますが、
スマートフォンのブラウザの横幅は350〜400px強程度のため、
横幅960pxと明示したままスマートフォン用ページに設置されますと
大きく右にはみ出してしまいます。

・iframeの横幅をページ全体の横幅に合わせる
・iframeの内容が横幅960pxであることをブラウザに伝える
以上２つの方法の合わせ技をお試し願います。

・iframeの横幅をページ全体の横幅に合わせる
iframeタグの width="960" を width="100%" にご変更ください。

・iframeの内容が横幅960pxであることをブラウザに伝える
fwarine-slice.htmlの〜の間（タグの直後など）に
下記metaタグを追記してください。

Answer

ありがとうございます。
https://www.rakuten.ne.jp/gold/アカウント/pc-cushioncover-Lineup/pc-cushioncover-lineup.html

↑こちらで試してみました。



↑をスマートフォン用商品説明文 に記述したところ、
大きく右にはみ出してしまいます。

head内はこのようになっています。↓

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

それでは、下記HTMLタグを使って、
CSSとJavaScriptで無理やり横幅を収める方法をご利用ください。

= この下の行から ====================

jQuery(function($){
  $('iframe[src$="pc-cushioncover-lineup.html"]').css({ transform: 'scale(' + Math.floor( (window.innerWidth / 960) * 1000 ) / 1000 + ')', transformOrigin: '0 0' });
});





= この上の行まで ====================

※アカウントは、ビーバイさんのショップの文字列にご変更ください。
※他のページに流用される際は、「pc-cushioncover-lineup.html」「920」「960」
　といったページごとの値の変更を忘れないようご注意ください。

Answer

やってみました！
上手く表示させることができましたが、少々右が切れています。

Answer

ECマスターズの田中です。

> 上手く表示させることができましたが、少々右が切れています。

ページ全体の横幅を基準として縮小していたことが原因ですので、
下記タグに修正をお願いいたします。
（5/14 13:50・5/17 18:10 タグ修正）

= この下の行から ====================

jQuery(function($){
var pdv = $('#★'), ifr = pdv.find('iframe');
var divw = pdv.width(), ifrw = parseInt(ifr.attr('width')), ifrh = parseInt(ifr.attr('height'));
ifr.css({ transform: 'scale('   Math.floor( (divw / ifrw) * 1000 ) / 1000   ')', transformOrigin: '0 0' });
pdv.css({ height: Math.ceil(divw * ifrh / ifrw) + 'px' });
});





= この上の行まで ====================
※★は、同じページ上で重複しない、
　半角英数字・ハイフン（-）・アンダースコア（_）・コロン（:）・ピリオド（.）
　の組み合わせによる文字列にご変更ください。（pc-cushioncover-lineup など）

なお、横幅のはみ出るiframeを縮小する方法につきましては、
https://forum.ec-masters.net/post_view.php?id=9758
以前に一度、ご回答差し上げたことがございます。

以前ご案内差し上げた方法に比べて、
使い回す場合の修正箇所が減っておりますので、
（iframeタグと、「pc-cushioncover-lineup」と記載されている２箇所）
今後、固定サイズのiframeを埋め込む場合は、今回の方法をご利用いただきますようお願いします。

Answer

ありがとうございます。無事表示させることができました。

二つ挿入したい場合、↓

jQuery(function($){
var pdv = $('#pc-cushioncover-lineup'), ifr = pdv.find('iframe');
var divw = pdv.width(), ifrw = parseInt(ifr.attr('width')), ifrh = parseInt(ifr.attr('height'));
ifr.css({ transform: 'scale(' + Math.floor( (divw / ifrw) * 1000 ) / 1000 + ')', transformOrigin: '0 0' });
pdv.css({ height: 'calc( 100vw * ' + ifrh + ' / ' + ifrw + ' )' });
});







jQuery(function($){
var pdv = $('#pc-cushioncover-lineup'), ifr = pdv.find('iframe');
var divw = pdv.width(), ifrw = parseInt(ifr.attr('width')), ifrh = parseInt(ifr.attr('height'));
ifr.css({ transform: 'scale(' + Math.floor( (divw / ifrw) * 1000 ) / 1000 + ')', transformOrigin: '0 0' });
pdv.css({ height: 'calc( 100vw * ' + ifrh + ' / ' + ifrw + ' )' });
});






↑このように表記すると二つ目がやはりはみ出てしまいますが、
修正する方法はありますでしょうか？

Answer

ECマスターズの田中です。

> 修正する方法はありますでしょうか？

幅の計算が乱れないよう、ID（pc-cushioncover-lineup の部分）を
１つずつ変更していただきますようお願いします。
（下のタグは pc-cushioncover-lineup に変更する、など）

今回の内容を受けて、先程ご案内差し上げたHTMLソースを、
不要な部分含めて修正いたしましたので、
改めてご確認いただきますようお願いします。
（★をそのままRMSに記載しないようご注意ください）

Answer

無事表示させることができました。
ありがとうございます。
ページで確認すると、
https://item.rakuten.co.jp/アカウント/0000000273/
こちらはスマートフォン用商品説明文に二つのscriptタグを入れています。
二つのscriptタグの間のスペースが大きく空いてしまっているのですが、
もう少し空白を狭くしたいです。
宜しくお願いいたします。

Answer

ECマスターズの田中です。

改めて動作を確認したところ、
高さを調整する際に、若干の空白ができることがわかりました。

iframeの高さに限り無く近づけるよう修正を行いましたので、
お手数をおかけしますが、
各タグに含まれる
pdv.css({ height: 'calc( 100vw * ' + ifrh + ' / ' + ifrw + ' )' });
を
pdv.css({ height: Math.ceil(divw * ifrh / ifrw) + 'px' });
に差し替えていただきますようお願いします。

最初にご案内差し上げたソースも、合わせて再度修正を行わせていただきました。

Answer

アプリでの表示がされなくなっています、、
アプリの仕様が変わったのでしょうか？
goldから呼び出しているものがすべてはみ出して大きく表示されてしまっています。

Answer

ECマスターズの田中です。

私にて確認したところ、
商品管理番号 0000000273 のページでは
確かに表示が乱れているのですが、
同じ仕組みを１つだけ設置している商品管理番号 0000000668-morocco のページでは
アプリでも問題なく表示されていることがわかりました。

アプリでは開発者ツールを使うことができないため、
試行錯誤しながら、対策を検討する必要がございます。

まずは一度、ビーバイさんでも上記表示をご確認いただいた上で、
0000000273 のスマートフォン用商品説明文にて、
片方を外してみて表示がどうなるか、
ご確認いただきますようお願いします。

Answer

私も確認してみたところ、
0000000668-moroccoも乱れておりましたm(__)m
アンドロイドとエクスペリアのスマホを所持しておりますが、エクスペリアだと履歴を削除しましたら乱れずに表示なりました。
アンドロイドだと履歴を削除しても改善せず、、
田中さんにご教授いただいた方法で確認してみようと思います。

Answer

ECマスターズの田中です。

> 0000000668-moroccoも乱れておりましたm(__)m

なるほど、承知しました。

今回のiframeにつきましては、

・スマートフォンの機種ごとに仕様が異なるiframeを使って
・表示幅が自動調整されないページを
・JavaScriptとCSSを駆使して無理やり見た目を整えている

という、非常に複雑な処理を行っており、
機種ごとの見た目のズレが非常に発生しやすい仕組みになっております。

機種の横幅に自動で合わせる（レスポンシブな）ページ作りや、
iframeになるべく頼らないページ作りなど、
可能な限り心がけていただければ幸いです。

Answer

https://item.rakuten.co.jp/happy11/a09129/
こちらのストア様はアプリでも表示されていますが、
このように表示できればと思っています。
画像の箇所の表示方法は同じくiframeなのでしょうか、、？###HR######IMG08b0a467067e46e498477c372348a247c.pngIMG0######BR###

Answer

ECマスターズの田中です。

確かに、いただいた商品ページでも、
ビーバイさんと同様にiframeで実現しております。

固定幅のページをスマートフォン向けに
縮小するところは同じなのですが、
私よりご案内差し上げた方法とは異なり、
横幅の段階ごとにCSSを設定されております。

実際のCSSは、下記ファイルをご参照ください。
https://www.rakuten.ne.jp/gold/maxshare/master/master.css

多数の設定があるため確認しづらいのですが、
https://sole-color-blog.com/blog/71/
上記「メディアクエリ」を使って
横幅399px以下、横幅400px以上の２パターンに分けて、
http://www.htmq.com/css3/transform_scale.shtml
上記「transform:scale」を使って
パターンごとに縮小する割合を設定されております。

この方法の場合、
各パターンごとの縮小率を予め計算してCSSファイルに記載する必要がございます。
また、予め想定された横幅でない場合、余白が発生する可能性がございます。