ID #1149

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

iframe要素は、モバイル上でのユーザエクスペリエンス関連において特別な課題を提示します。二つの異なる問題があります。

 

aiframeコンテンツも、モバイルデバイス用にフォーマットしなければ水平オーバーフローが生じ、重要なコンテンツに到達するためにスクロールをする必要が発生します。これは、ユーザー·エクスペリエンスの問題であり、目障りでもあります。

 

b)親ページのiframeのサイズがiframe内に含まれる文書のサイズより小さい場合は、一部のコンテンツに到達するために水平/垂直スクロールが必要となります。ほとんどのスマートフォンは、スクロールバーが表示されないタッチ操作を使用しています。ときにタッチジェスチャーを使用してサイトユーザーがスクロールした時、スマートフォンは、どのスクロール可能な要素がスクロールイベントを受け取るかを決定する必要があります。訪問者がiframeの内側に触れている場合には、iframeがスクロールされます。訪問者がiframeの外側に触れている場合は、親文書がスクロールされます。この現象の発生は非常に乏しいユーザー体験へと通じます。 携帯電話はスクリーンも小さく、iframeが画面の殆ど、もしくは全体を占領指定舞うこともあり、親フレームのスクロールが不可能に近くなります。iframeが小さい場合であっても、訪問者がジェスチャーを使って親文書のスクロールに失敗した場合混乱する可能性があります。 iframeがスクロール可能な要素であることを示すために目に見えるスクロールバーがないため、訪問者が問題を理解するためヒントは限られている。

 

最高の解決法:iframesを出来るだけ排除する

Iframesみたいな機能は、AJAX callsJSONP等といったもっと近代的なHTML技術で行えます。Iframesを可能な限りサイトから削除することによってデスクトップサイトもモバイルサイトもより維持しやすくなります。

 

候補1iframe callsAJAXへと変換

もしあなたのiframeが親ウィンドウと同じドメインに存在するのであれば、iframeのコンテンツのフェッチをiframeの代わりにAJAX callを使って行うという選択肢があります。Mobifyテンプレートにてコンテンツセレクタを特定したら、iframeを見つけ、iframe srcを取り出し、結果を$.ajax callにフェッチさせるようにするのです。次にテンプレートをコンテンツに適用させ、出てきたHTMLを直接親ドキュメントに入れると、iframeが完全に消されて問題が解決されます。

 

 

 

 

候補2:コンテンツにフレームを合わせる

もしあなたのiframeのコンテンツが他のドメインから来ており、AJAX callで作れないようであれば、フレームドキュメント毎囲める程大きなフレームを作ることです。フレーム内でのスクロールする必要がなくなり、スクロールイベントは全部親ドキュメントに解釈してもらえます。

 

解決チャレンジA:水平スクロールを無くすためにiframeMobify

チャレンジAiframeのコンテンツをMobify化することによって解決できます。Ifram HTMLMobifyたぐを入れ、Mobifyテンプレートを使ってコンテンツを形成すればいいのです。

 

解決チャンレンジBiframe内の垂直スクロールの削除

この問題を解決するにはiframe内でスクロールをしないようにすることです。それは、iframeのサイズを中に含まれるドキュメント以上のサイズにすることです。それは垂直、水平共にそうしてください。

 

CSSを使って高さを100%にする

このオプションは色んなコンテンツの種類で使えますが、全てのiframeコンテンツとiframeの含まれているページをCSSで取り締まっている必要があります。まず、iframe要素スタイルを高さ100%にしてください。例 <iframe style=”height:100%”> そうしたら、iframeCSS内に以下のスタイルを入力してください。

<style type=”text/css”>

html {height:100%}

body {

margin:0

height:100%;

overflow:hidden

}

</style>

 

Iframeサイズの取得:iframeコンテンツ用の固定サイズを使用

可能ならば、これが一番簡単な方法です。もしiframeがコンテナよりも数ピクセルだけでも小さいことを確定出来るのであれば、問題は解決です。残念ながら、これを出来るのはとても稀です。動的に生成されるコンテンツや可変フォントサイズはすべて、様々なサイズのiframeを作り出す要因になります。

 

メッセージングを使用して親にiframeのドキュメントサイズを通信し、iframe要素のサイズを変更する

iframeコンテンツのレンダリングが完了したら、親ウィンドウにiframewindow.innerHeightを伝えるためにwindow.postMessagehttps://developer.mozilla.org/en/DOM/window.postMessage)を使用することができます。 parentWindowはその後、iframe内のすべてのコンテンツを格納するのに十分な大きさにiframe要素の高さを変更する小さなスクリプトを実行できます。

タグ: -

関連エントリー:

この FAQ にコメントする