Share on Facebook

Smart-Fit Rendering®

Smart-Fit Rendering は、ページを画面幅に合わせて見やすくレイアウトする機能です。この機能により、PC 向けに作成されているさまざまなサイトを、モバイル端末上で適切に表示させることができます。

ページの幅が画面幅よりも大きい場合、ページ全体を閲覧するには横スクロールが必要になります。特に 1 行の長さが画面幅を超えるようなページでは、1 行読むごとに左右のスクロールが必要です。Smart-Fit Rendering では、このようなページを画面幅に合わせてレイアウトするので、横スクロールが発生せず、スムーズに閲覧することができます。

PC 向けに作成されているページの多くは、640 ~ 800 ピクセル以上の画面幅が想定されています。一方、携帯電話や PDA の画面幅は、大きくても 240 ピクセル程度です。画面幅が 240 ピクセルの端末で、PC 向けのページをそのまま表示すると、240 ピクセルを超える部分が画面からはみ出し、横スクロールが必要になります。Smart-Fit Rendering は、このようなページを 240 ピクセルに収まるようにレイアウトを調整します。

具体的には次の処理が行われます。

  1. 画面幅より大きい画像を画面幅に合わせて縮小する
  2. 画面幅より大きいテーブルを分割し、縦にレイアウトする

Smart-Fit Rendering が行われる環境で、コンテンツを問題なく表示させるには、次の点に注意します。

1. スタイルシートで position:absolute を指定しない

position:absolute で絶対位置を指定した場合、Smart-Fit Rendering によってレイアウト調整が行われると、表示すべき位置が定まらず、期待どおりのレイアウトにならないことがあります。Smart-Fit Rendering の行われることが想定されるページでは、position:absolute を指定しないことをお勧めします。

2. テーブルのレイアウトに注意する

Smart-Fit Rendering が行われると、横に並ぶことを期待して作成したセルが、縦にレイアウトされる場合があります。

3. 画像が縮小されることに注意する

Smart-Fit Rendering では、画像が画面幅に合わせて縮小されます。このため、幅の広い画像を幅の狭い画面で表示すると、画像が過度に縮小され、見にくくなる場合があります。画像を配置するときは、縮小されても内容を確認できるような適切な画像サイズを決定します。

Smart-Fit Rendering に類似する機能に、Just-Fit Rendering があります。Smart-Fit Rendering は画面幅に収まるようにテーブルを縦にレイアウトし直すのに対し、Just-Fit Rendering は画面幅に収まるようにテーブルを縮小するだけで、レイアウトを変更しません。

Smart-Fit Rendering と Just-Fit Rendering の動作は、NetFront®Mobile Content Viewer を使用することで、PC 上でも確認できます。


レゾリューションフリーコンテンツへのヒント

携帯電話向けのコンテンツは、Compact HTML を用いて、PC 向けとは別に作成する必要があります。Compact HTML は小型情報端末向けのコンテンツ記述言語です。弊社が初めてブラウザを搭載した 1999 年当時の携帯電話は、CPU やメモリが非力で、ハードウェア上の制限が多くありました。Compact HTML は、これらの制限が考慮された HTML のサブセットとして弊社によって策定され、大手メーカ 5 社と共同で W3C へ提案されたものです。

しかし、年々ハードウェアの性能が向上し、今では携帯電話にフルブラウザを搭載することも可能です。携帯電話にフルブラウザが搭載されるようになれば、PC 向けのコンテンツと携帯電話向けのコンテンツを共通にすることもできます。これは今後のコンテンツ作りが大きく変わることを意味します。

携帯電話にフルブラウザが搭載されたとき、PC と携帯電話の違いで障壁になるのは画面の解像度です。これらの違いを考慮し、PC と携帯電話で共通に閲覧できるコンテンツを、ここでは「レゾリューションフリーコンテンツ」と呼びます。

レゾリューションフリーコンテンツを作成するには、次の点に注意します。

1. 幅の狭い画面にレイアウトされた状態を考慮する

レイアウトが崩れないことを確認する
幅の狭い画面で表示すると、ページのレイアウトが期待したとおりにならない場合があります。作成したコンテンツは、画面幅を狭くした状態でも確認します。

ページが縦長になるため、ページの先頭へ戻るためのリンクを付ける
幅の狭い画面で表示すると、1 行の長さが短くなり、ページ自体が縦長になります。それにともないスクロールする量も増えるので、ページの先頭へ戻るためのリンクを付けるなどの配慮が必要です。

2. Smart-Fit Renderingでの注意事項を考慮する

携帯電話や PDA などの機器で Smart-Fit Rendering が行われることを想定し、Smart-Fit Rendering の注意事項を考慮します。詳しくは Smart-Fit Rendering を参照してください。


NetFront 判別方法

コンテンツの中には、ユーザが使用しているブラウザをコンテンツ側で判別し、処理を振り分けたいものがあります。ここでは、ユーザエージェントや JavaScript の navigator オブジェクトを参照して、ユーザの使用するブラウザが NetFront であることを判別する方法について説明します。

1. ユーザエージェントで判別する

CGI などでは、環境変数の HTTP_USER_AGENT に「NetFront」という文字列が含まれていれば、使用しているブラウザが NetFront であると判別できます。JavaScript では、navigator オブジェクトの userAgent プロパティに、HTTP_USER_AGENT と同じ値が設定されるので、これを参照することでも NetFront であると判別できます。


if (navigator.userAgent.indexOf(“NetFront”) != -1) {
    // NetFront用の処理
}

2. navigator オブジェクトの appName プロパティで判別する

JavaScript では、navigator オブジェクトの appName プロパティが、「ACCESS NetFront」であれば、使用しているブラウザが NetFront であると判別できます。


if (navigator.appName.indexOf(“ACCESS NetFront”) != -1) {
    // NetFront用の処理
}

注意: この記事は、ユーザエージェントや navigator オブジェクトが弊社の推奨する書式(「NetFront」「ACCESS NetFront」)で指定されている NetFront 搭載製品の判別方法を説明したものです。搭載製品によっては上記の書式ではなく、製品独自の書式を定めている場合があります。その場合は、製品独自の書式で判別する必要があります。