ニンテンドーDSシリーズ用ページの作り方
DSシリーズならではの特徴を押さえたところで、DSシリーズ向けのWebページの作り方を紹介します。ポイントは、縦長／タテ長モードを基本とし、2つの画面モードに対応することです。
画面サイズ
DSシリーズの液晶画面の解像度は、上下画面それぞれ256×192pxですが、DSブラウザ／DSiブラウザでの有効な表示領域は、画面モードによって異なるので注意しましょう。
2画面モード／通常表示のとき、拡大画面の表示領域は256×176pxで、縮小画面は、768×528px（拡大画面を縦横に3つ並べた分が1画面）となっています。
縦長／タテ長モードでは、上下画面共に240×176pxで、合わせて240×352pxとなっています。
縦長／タテ長モードで、CSSのメディアタイプ「handheld」を指定した場合、Small Screen Rendering（以下SSR、注1）は適用されないため、幅240ピクセルを超えると横スクロールしてしまいます。そこで、「max-widthプロパティ」で最大幅を指定してあげると親切です。また、画像も幅240pxサイズより小さくして表示させることができます。サンプルでは、全体を囲むID名「wrapper」のdiv要素に最大幅240pxを指定、img要素に最大幅180pxを指定しています。
SSRとは、一般のWebページを携帯電話のような小さな画面で横スクロールすることなく表示できるようレイアウトし直す技術を言います。
div#wrapper { max-width: 240px; }
img {max-width: 165px; }
2画面モード／通常表示に対応する
2画面モード／通常表示では、PC用Webブラウザと同じように、メディアタイプ「screen」に指定されたCSSを読み込みます。PCのWebページとほぼ同じようにレンダリングされるため、アクセシビリティ的なポイントさえ押さえておけば、さほど気を使う必要はありません。
PC用ブラウザとほぼ同じとは言え、動画や音声、FlashやPDFなど、DS／DSiブラウザが対応していないものについては、部分的に表示されません。また、製品の仕様上、画像を多用したページは快適に表示できない場合があります。そのため、画像表示をオフに設定しているユーザーもいます。これらのコンテンツが表示されなくても支障のないよう、代替手段を用意しておきましょう。アクセシビリティ的なポイントとは、例えば「画像にはalt属性で代替テキストを付ける」といった基本的なことです。
<img src="sample.jpg" width="200" height="150" alt="サンプル写真" />
縦長／タテ長モードに対応する
縦長／タテ長モードでは、WebページをDSの画面に収めることが優先され、自動的に独自のレイアウトに変換されるので注意が必要です。例えば、tableタグや幅や高さを指定したCSSなどが独自レイアウトに変換されることがあります。
これは、OperaのSSR技術が使われているためです。SSRが適用されると、CSSが反映されず、悪戦苦闘することになりがちです。CSSを適用するには、メディアタイプを携帯電話やPDAなどと同じ「handheld」にします。するとOperaはそのページが携帯デバイス用に最適化されていると認識し、SSRを適用しなくなり「handheld」のCSSが有効になります。
<link rel="stylesheet" href="ds.css" media="handheld" type="text/css" />
十字ボタンとAボタンの制御
DS／DSiブラウザの操作は、タッチペンで気軽にインターネットが楽しめるようになっています。また、十字ボタンでスクロール、Aボタンで選択したリンクの決定というように、ボタンを使った操作も可能となっているのが特徴です。十字ボタンは、テンキーの上下左右、AボタンはEnterキーに対応しており、JavaScriptを利用してイベントとして取得できます。上ボタンは38、右は39、下は40、左は37、Aボタンは13となっています。
| ボタン | 番号 |
| 上 | 38 |
| 右 | 39 |
| 下 | 40 |
| 左 | 37 |
| A | 13 |
