Mobify HELP Mobifyを使ってモバイル上のiframesと作業

Mobify HELP
Mobifyを使ってモバイル上のiframesと作業
iframe
要素は、モバイル上でのユーザエクスペリエンス関連において特別な課題を提示します。二つの異なる問題があり
ます。
a） iframe
コンテンツも、モバイルデバイス用にフォーマットしなければ水平オーバーフローが生じ、重要なコンテンツに到
達するためにスクロールをする必要が発生します。これは、ユーザー
·
エクスペリエンスの問題であり、目障りでもあります。
b）親ページの
iframeのサイズが
iframe
内に含まれる文書のサイズより小さい場合は、一部のコンテンツに到達するために水平
垂直スクロールが必要となります。ほとんどのスマートフォンは、スクロールバーが表示されないタッチ操作を使
用しています。ときにタッチジェスチャーを使用してサイトユーザーがスクロールした時、スマートフォンは、ど
のスクロール可能な要素がスクロールイベントを受け取るかを決定する必要があります。訪問者が
の内側に触れている場合には、
iframeがスクロールされます。訪問者が
iframe
の外側に触れている場合は、親文書がスクロールされます。この現象の発生は非常に乏しいユーザー体験へと通じ
ます。
携帯電話はスクリーンも小さく、
iframe
が画面の殆ど、もしくは全体を占領指定舞うこともあり、親フレームのスクロールが不可能に近くなります。
iframe
が小さい場合であっても、訪問者がジェスチャーを使って親文書のスクロールに失敗した場合混乱する可能性があ
ります。 iframe
がスクロール可能な要素であることを示すために目に見えるスクロールバーがないため、訪問者が問題を理解する
ためヒントは限られている。
最高の解決法：
/
iframe
iframesを出来るだけ排除する
Iframesみたいな機能は、
AJAX
callsや JSONP等といったもっと近代的な
HTML技術で行えます。
Iframes
を可能な限りサイトから削除することによってデスクトップサイトもモバイルサイトもより維持しやすくなります
。
候補 1： iframe callsを AJAXへと変換
もしあなたの
iframeが親ウィンドウと同じドメインに存在するのであれば、
iframeのコンテンツのフェッチを
iframeの代わりに
AJAX
callを使って行うという選択肢があります。
Mobifyテンプレートにてコンテンツセレクタを特定したら、
を見つけ、 iframe srcを取り出し、結果を
$.ajax
callにフェッチさせるようにするのです。次にテンプレートをコンテンツに適用させ、出てきた
HTML
を直接親ドキュメントに入れると、
iframeが完全に消されて問題が解決されます。
iframe
ページ 1 / 3
(c) 2017 Domobi <[email protected]> ¦ 2017-04-27 22:00
50/ja/mobify%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E4%B8%8A%E3%81%AEiframes%E3%8
Mobify HELP
候補 2：コンテンツにフレームを合わせる
もしあなたの
iframeのコンテンツが他のドメインから来ており、
AJAX
call
で作れないようであれば、フレームドキュメント毎囲める程大きなフレームを作ることです。フレーム内でのスク
ロールする必要がなくなり、スクロールイベントは全部親ドキュメントに解釈してもらえます。
解決チャレンジ
A：水平スクロールを無くすために
iframeの Mobify化
チャレンジ
Aは iframeのコンテンツを
Mobify化することによって解決できます。
Ifram
HTMLに Mobifyたぐを入れ、
Mobifyテンプレートを使ってコンテンツを形成すればいいのです。
解決チャンレンジ
B： iframe内の垂直スクロールの削除
この問題を解決するには
iframe内でスクロールをしないようにすることです。それは、
のサイズを中に含まれるドキュメント以上のサイズにすることです。それは垂直、水平共にそうしてください。
CSSを使って高さを
iframe
100%にする
このオプションは色んなコンテンツの種類で使えますが、全ての
iframeコンテンツと
iframe
の含まれているページを
CSSで取り締まっている必要があります。まず、
iframe要素スタイルを高さ
<iframe
にしてください。例
style=”height:100%”> そうしたら、
iframeの CSS内に以下のスタイルを入力してください。
<style type=
text/css
100%
>
html {height:100%}
body {
margin:0
height:100%;
overflow:hidden
}
</style>
ページ 2 / 3
(c) 2017 Domobi <[email protected]> ¦ 2017-04-27 22:00
50/ja/mobify%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E4%B8%8A%E3%81%AEiframes%E3%8
Mobify HELP
Iframeサイズの取得：
iframeコンテンツ用の固定サイズを使用
可能ならば、これが一番簡単な方法です。もし
iframe
がコンテナよりも数ピクセルだけでも小さいことを確定出来るのであれば、問題は解決です。残念ながら、これを
出来るのはとても稀です。動的に生成されるコンテンツや可変フォントサイズはすべて、様々なサイズの
を作り出す要因になります。
メッセージングを使用して親に
iframeのドキュメントサイズを通信し、
iframe
iframe要素のサイズを変更する
iframeコンテンツのレンダリングが完了したら、親ウィンドウに
iframeの window.innerHeightを伝えるために
window.postMessage（ https://developer.mozilla.org/en/DOM/window.postMessage）を使用することができます。
parentWindowはその後、
iframe内のすべてのコンテンツを格納するのに十分な大きさに
iframe
要素の高さを変更する小さなスクリプトを実行できます。
一意的なソリューション ID: #1149
製作者: umemori
最終更新: 2013-03-24 03:46
ページ 3 / 3
(c) 2017 Domobi <[email protected]> ¦ 2017-04-27 22:00
50/ja/mobify%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E4%B8%8A%E3%81%AEiframes%E3%8
Powered by TCPDF (www.tcpdf.org)

Download Report