Wii向けウェブサイトのつくり方 - HTML編

Wiiのウェブブラウザ「インターネットチャンネル」向け
ウェブページ制作の基本

Wii向けウェブサイトのつくり方 - HTML編（1）

角谷和昭[著]

更新日: 2009/01/20
公開日: 2009/01/19

ポスト

インターネットチャンネル用ページを表示させる

ユーザーエージェントを利用して動作を分ける

　ブラウザのユーザーエージェントを確認して、表示する内容を決定する方法です。ユーザーエージェントを偽る機能を持つブラウザを使えば、PCからでも動作確認が行えます。

　以下は、「Nintendo Wii」がユーザーエージェントに含まれるブラウザでアクセスした場合に対応するサンプルです。

JavaScriptでの例

var ua = navigator.userAgent;
if(ua.indexOf("Nintendo Wii")<0) {
    alert("Not Wii!");//Wiiではなかった場合、警告を出す
};

PHPでの例

<?php
if(!strpos($_SERVER[HTTP_USER_AGENT], "Nintendo Wii")) {
    header("Location: notwii.html");//Wiiではなかった場合、ページ移動する
};
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>for Internet Channel</title>
</head>
<body>
    <p>これはインターネットチャンネル用のページです！</p>
</body>
</html>

CSSで表示を変える

　インターネットチャンネルは、CSSのメディアタイプに「tv」が指定されている場合、標準モードではそれを優先して読み込みます。

　CSSでデザインをコントロールしている既存のコンテンツをWiiに対応させる場合には、この手法が最もお手軽です。

　次のサンプルは、見せたいスタイルをmedia属性「tv」に設定し、「screen」（PCやタテ長モード）では警告表示を出すというものです。同じものを筆者のサイトに用意しました。実際にお試しください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8" />
<style type="text/css">
h1 {
    padding: 4px 10px; background-color: #ddd; font-size: 32px;
}
li {
    float: left; margin: 0 10px 10px 0; background-color: #aaa; border: 1px solid #999; text-align: center;
}
a {
    display: block; width: 220px; font-size: 24px; padding: 20px 5px;
}
@media tv {
    body {
        background-color: #fff; color: #000;
    }
    #screen {
        display: none;
    }
}
@media screen {
    body {
        background-color: #000; color: #fff;
    }
    h1 {
        background-color: #900;
    }
    ul,#tv {
        display: none;
    }
}
</style>
<title>CSSで切り替え</title>
</head>
<body>
<h1>Wii<sub>&reg;</sub> インターネットチャンネル</h1>
<p id="tv">media=tvです。背景が白、黒文字です。</p>
<p id="screen">media=screenです。背景が黒、白文字です。<br />
このページは、Wiiの「インターネットチャンネル」でご覧ください。<br />
インターネットチャンネルのタテ長モードでご覧の場合は、Wiiリモコンの2ボタンを押してください。</p>
<ul>
    <li><a href="http://www.nintendo.co.jp/">任天堂</a></li>
    <li><a href="http://codezine.jp/">Codezine</a></li>
    <li><a href="http://www.yahoo.co.jp/">Yahoo!</a></li>
    <li><a href="http://www.google.co.jp">Google</a></li>
</ul>
</body>
</html>

　ケータイのように、厳密な意味での「専用サイト」にはなりませんが、上記のような方法を組み合わせて、インターネットチャンネルに最適化したデザインのページを表示させることができます。

　次回は、（X）HTML+CSS+JavaScriptで作る「Wii向け画面」の作例を紹介したいと思います。

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

この記事の著者: 角谷和昭（カドヤカズアキ）

三重県松阪市出身。大学卒業後、デザイン会社でウェブ制作を担当、2004年にフリーランスに。縁あって翌年上京。最近は、情報サービス系携帯サイトのデザインや、企業サイトの制作、ウェブ制作系講師などをさせていただいていております。ゲーム大好きですが、最近はあまりやる時間がありません。http://www.kadoyan.com/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事