Wii「インターネットチャンネル」向けページの作り方
Wii向けのページ制作をするにあたり、まずは、インターネットチャンネルの基本的な仕様や特徴を押さえておきましょう。インターネットチャンネルには、ニンテンドーDS同様、CSSのメディアタイプで切り替えられる2つの表示モードがあるのが特徴です。
Wii「インターネットチャンネル」の主な仕様
「インターネットチャンネル」は、任天堂とOpera Softwareが共同開発しているWiiチャンネルです。これまでに何度かバージョンアップされていますが、執筆時（2010年6月）における最新版は2009年9月1日版で、ブラウザエンジンのバージョンは、Opera 9.3となっています。
一般的なHTML、XHTML、ECMAScript、CSSに対応しており、Wii向けのコンテンツを作るのに特別な言語を必要としません。画像形式は、BMP、JPEG、PNG、GIFに対応しており、Flashは、Flash 8に相当するFlash Lite3.1に対応しています。
| ブラウザエンジン | Opera 9.3 |
| ユーザーエージェント | Opera/9.30 (Nintendo Wii; U; ; 3642; ja) |
| 対応しているWeb標準 | HTML4.01、XHTML1.1、WML2.0、CSS2.1、ECMAScript、DOM2、 SSL2.0 / 3.0、TLS1.0 / 1.1 |
| Cookie | 対応（本体保存可能） |
| 表示可能な形式 | BMP、GIF、JPEG、PNG |
| FLASH | Flash Lite3.1（Flash 8相当） |
基本的な仕様については、Wiiのオフィシャルサイト内「インターネットチャンネル」に記載されていますので、制作前に確認すると良いでしょう。また、Q&Aの「インターネットチャンネル向けのウェブページを作りたいのですが…。」のページにも制作に関する情報が掲載されています。
画面サイズ（表示領域）
インターネットチャンネルの幅サイズは、800ピクセルで固定されています。縦サイズについては、画面モードやツールバーの表示／非表示によって異なってきます。
インターネットチャンネルには「4：3モード」と「16：9モード」の2つの画面モードがあり、テレビ画面のアスペクト比（一般に、地上アナログテレビは4：3、ワイドテレビは16：9）に合わせて表示されます。また、ツールバーの表示、非表示はユーザー設定によって切り替えることができます。
ツールバー表示中の画面サイズ（表示領域）は、4：3モードの時で800×528ピクセル、16：9モードの時は、800×396ピクセルです。ツールバー非表示の時は、4：3モードで800×628ピクセル、16：9モードで800×472ピクセルとなっています。
JavaScriptでウインドウサイズを取得する
横幅は800pxで常に一定ですが、ユーザーは、画面幅を0から9までに設定することができ、縦幅は「window.innerHeight」で取得することができます。インターネットチャンネルの画面幅の設定によって、縦幅は次の大きさになります。
| ワイド設定 | ツールバー設定 | 画面幅の設定 | ||||||||||
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ||
| 4:3 | 常に表示 | 560 | 556 | 548 | 544 | 536 | 528 | 524 | 520 | 512 | 508 | 500 |
| 自動/手動 | 660 | 656 | 648 | 644 | 636 | 628 | 624 | 620 | 612 | 608 | 600 | |
| 16:9 | 常に表示 | 420 | 416 | 412 | 408 | 400 | 396 | 392 | 388 | 384 | 380 | 376 |
| 自動/手動 | 496 | 492 | 488 | 484 | 476 | 472 | 468 | 464 | 460 | 456 | 452 | |
ポイント時のリンクの青枠を制御する
インターネットチャンネルでは、a要素やフォームパーツなどをポイントした時、デフォルトで青枠が引かれます。この時使用されているスタイルシートは次のとおりです。
a:hover, img[onclick]:hover {
outline: 4px -o-highlight-border;
}
button:hover, input:hover, select:hover, textarea:hover {
outline: 4px -o-highlight-border;
}
input[type="file"]:hover {
outline: none;
}
カーソルのポイント時に表示される青枠は、インターネットチャンネルならではのインターフェイスですので、一般的にはこのままのUIの方が分かりやすいかと思いますが、この青枠を表示したくない場合には、「outline: none;」を指定します。
画面モードとメディアタイプ
Wiiのインターネットチャンネルには、ニンテンドーDS／DSiブラウザと同じように、PCでウェブページを見るときとほぼ同じように表示する「通常モード」と、Webページのレイアウトを画面の横幅に合うように自動的に変換する「タテ長モード」の2つの表示モードがあります。ユーザーが、リモコンの2ボタンを押すことで、2つの表示モードを切り替えられる仕組みです。
インターネットチャンネルは、CSSのメディアタイプ「screen」と「tv」に対応しており、通常モード時はメディアタイプ「tv」が適用され、タテ長モード時にはメディアタイプ「screen」が適用されます。
従って、通常モードの表示に関しては、メディアタイプ「tv」のCSSを用意するだけで、Webサイトの見た目をインターネットチャンネルに最適化することができます。ただし、タテ長モードの表示に関しては、PC用モニタと同じ「screen」を共有することになってしまうので、ユーザーエージェントで振り分ける必要があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>メディアタイプによるCSS解釈テスト</title>
<!-- タテ長モード用 -->
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<!-- 通常モード用 -->
<link rel="stylesheet" href="tv.css" type="text/css" media="tv" />
</head>
<body>
<h1>メディアタイプによるCSS解釈のテスト</h1>
<p>screen用CSSでは、背景色は白、文字色は黒を定義しています。</p>
<p>tv用CSSでは、背景色は緑、文字色は白を定義しています。</p>
</body>
</html>
上記サンプルを、通常モードで表示すると、次のように、メディアタイプ「tv」のスタイルシートが適用されます。
タテ長モードに切り替えると、メディアタイプ「screen」のスタイルシートが適用されます。
