SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

WiiのインターネットチャンネルでFlashコンテンツを表示する

Wii向けウェブサイトのつくり方 - Flash編 (1)


  • このエントリーをはてなブックマークに追加

 ゲーム機の枠を超えて、テレビ欄の閲覧やショッピングなどさまざまな使い方ができる「Wii」。WiiはOperaベースの「インターネットチャンネル」というWebブラウザも備えており、Adobe FlashやJavaScriptにも対応するなど、パソコンにかなり近い形でページを表示することもできます。本記事では、簡単なサンプルを交えながら、「インターネットチャンネル」のFlashコンテンツを表示するための仕様や注意点を紹介していきます。

  • このエントリーをはてなブックマークに追加

はじめに

 ゲーム機の枠を超えて、テレビ欄の閲覧やショッピングなどさまざまな使い方ができる「Wii」。Wiiは「インターネットチャンネル」というWebブラウザも備えています。

 「インターネットチャンネル」は、パソコン向けブラウザであるOperaをベースにしているので、パソコン向けに作られたページもスムーズに見ることができますし、レイアウトもパソコンにかなり近い形で表示可能です。

 お気に入り機能も標準でついており、GoogleやYahooなどの検索サイト、任天堂がおすすめするウェブサイトにアクセスできます。加えて、Wiiの場合、文字を自動的に滑らかにしてくれたり、必要に応じてスクロールや虫眼鏡でのぞくように拡大縮小したりできるので、パソコンで見るときとは一味違ったきれいな印象を受けます。

 また、Adobe FlashやJavaScriptにも対応しているため、最近よくみかけるYoutubeといった動画サイトも見ることができます。ゲーム機ですのでサウンドもきれいに再生されます。

 本記事では、簡単なサンプルを交えながら、「インターネットチャンネル」のFlashコンテンツを表示するための仕様や注意点を紹介していきます。

対象読者

 この連載は、主にFlashコンテンツの制作知識はあるが、Wiiインターネットチャンネル向けの実装方法を知らない開発者を対象にしています。

Flash Playerはバージョン7を搭載している

 前述の通り、「インターネットチャンネル」はAdobe Flash Playerを搭載しています。対応しているFlash Playerのバージョンは「7」です。現在の最新バージョンは「10」なので、かなりの開きがあります。

 Wiiのユーザーに見せたいのであれば、バージョンを「7」で書き出せば表示できます。この場合、Flash MX 2004相当の機能しか実現できないことに注意ください。8以降で使えるフィルタ効果やビットマップ処理といった機能は使えません。ActionScriptは1.0・2.0で記述することができます。

インターネットチャンネルでFlashを表示してみる

 さて、PCのWebブラウザと同じように、Flashを表示するにはどうすれば良いでしょうか。HTMLに貼り付ける場合とフルスクリーンにしたい場合で違いはありますが、基本的に同じ手法で行えます。

FlashをHTMLで表示する場合

 PCブラウザと同じように、embedタグで貼り付ければFlashを表示できます。PC版OperaでFlashを表示するやり方と同じです。

<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" />
  <title>1-1</title>
</head>
<body bgcolor="#ffffff">
  <embed src="1-1.swf" loop="true" quality="high" bgcolor="#ffffff" width="550" height="400" name="1-1" align="left"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
  </embed>
</body>
</html>
EMBEDタグを使ってHTMLで表示
キャプション

FlashをHTMLで表示する場合(SWFObjectを利用する)

 そのほかにSWFObjectを使う方法もあるので、ご紹介しておきます。PCブラウザでの記述と同じようにすれば表示されます。上記のEMBEDタグを利用する方法はWii向けにだけなら良い方法です。ですが、Wii以外のブラウザも吸収するのであればSWFObjectのほうが使い勝手がいいと思います。

<!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" lang="en" xml:lang="en">
  <head>
    <title>1-1</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.embedSWF("1-1.swf", "wiiContent", "550", "440", "7.0.0");
    </script>

  </head>
  <body>
    <div id="wiiContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

 このFlashをHTMLで表示する方法の良い点は、JavaScriptと連携してWiiリモコンからのさまざまな情報を取得できることです。くいっとひねった時の動き(傾き)や、どれだけ離れているか(距離)といった情報も取ることができることです。さらに上下左右キーや1キー2キーも取ることができ、パソコンでマウスを操作しているのとは一味違った操作が実現できます。Wiiリモコンからのさまざまな操作を取得する詳細は、次回以降で紹介します。

Flashをフルスクリーンで表示する場合

 swfファイルに直接アクセスすればフルスクリーンで再生されます。ただし、この場合は、objectタグでの貼り付けと違いJavaScriptと連携が取れないため、クリック・ロールオーバー・ロールアウトしか検出できません。とはいえ、クリック、ロールオーバー、ロールアウトだけでも十分にコンテンツを作ることができるでしょう。Wiiリモコンの傾きやキー情報といった複雑なコンテンツでなければ、HTMLやJavaScriptを表示する必要がないだけに簡単です。

swfファイルに直接アクセスしてフルスクリーン表示
キャプション

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
クリックはどのようにとるか

修正履歴

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

  • このエントリーをはてなブックマークに追加
この記事の著者

田中 正吾(Bluemix User Group)(タナカ セイゴ)

2004年よりフリーランスで活動。以後インタラクティブコンテンツ制作を主に関わる。最近はフロントエンドを中心にJavaScript開発制作・デジタルサイネージ制作・デバイス連携など行っています。ウォンバットが好きなのでWEBの力を注いで情報収集中。

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3456 2009/02/24 12:46

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング