今回ART-Meterのリニューアルを受け、WiiでART-Meterの絵を鑑賞可能なプレイヤー(以下プレイヤーβ)を開発しました。
Wiiだけでなく、PCからもご鑑賞可能です。

本件、KAYAC BM11(ブッコミイレブン)のプロジェクトの一環として携わらせて頂きました。
他にも面白いプロジェクトがあるので、ぜひご覧ください!

Credit :

  • flash/design: Matsuzawa(KAYAC)
  • programmer: (KAYAC)

今回の開発のフィードバックです。

(1)絵のリアリティの再現

今回の肝の一つとして、モニタ上で絵を実寸で検索したり、鑑賞したりする事が可能です。
PCでWii用URLにアクセスすると、ほぼ実寸の絵のサイズに調整し絵を表示します。(PC用は全体像が見やすいよう小さめの表示に設定しています)

この設定は、“画面設定”より変更可能です。PC以外で表示する場合、実写領域の横幅(cm)を設定すれば微調整可能です。

上記実装は、“cmを基準にpixelを求める”といった方式で行っています。
今回は以下の計算を利用しています。

// pointを利用して、pixelを求める形です。(1cm = 28.35point)
 pixel = (point / 72) * 解像度

他に、以下の計算もあります。

//inchを利用して、pixelを求める形です。(1inch = 2.54cm)
 pixel = (cm * 解像度) / 2.54

(2)操作性の考慮

Wiiリモコンを用いたTV画面での操作を考慮すると、
見易さの面から大きめのフォント、触れやすさの面から大きめのボタンが有効です。
今回、24と30ポイントのフォントを利用し、大きめのボタンとしています。

(3)Wiiブラウザを考慮した負荷分散

Wiiブラウザでのネット閲覧はPCブラウザでのネット閲覧よりも少ない負荷で、不具合がおきます。
その為、今回のように複数の絵を沢山表示するといった事が難しくなります。
そこで、以下の2点に気を配りました。

  • 表示画面一回り分しか、読み込んだ絵を保持しない(範囲外の絵は削除する)
  • 出来る限りFlash側に動的なロジックは組み込まない(マップ配置をXML側で持つ)

当初、Flash側で絵のマップ配置のロジックを持つ予定だったのですが、負荷を考慮して廃案しました。

この実装により、回りの絵の置換率が上がり、繋がっている感の表現は若干減りましたが、
マップ配置の考慮が無い分、再配置が容易となり、延々と続いている感の表現は失わずに済みました。

(4)Flashコンテンツ表示の分岐

 Flash表示タグはWiiとPCで同等に見せる理由から、Wii用とPC用に分岐させています。

PC用の表示タグは、swfobjectを利用しています。

Wii用の表示タグは、JavaScriptのdocument.write()の記述ですと、WiiのブラウザでFlashが表示されないので、別途用意します。
今回、UserAgentの判断などはせずに、PC用の表示タグのswfobjectの“divを上書きして表示する”という特性を利用して、予めdivの中に定義しています。

Wiiブラウザの正式版からswfobjectが動作します。JavaScriptのappVersionでの分岐に変更しました。(07/04/27)

JavaScriptでWiiブラウザの概要を取得可能なので、そういった分岐も可能ですね。

User Agent:

Opera/9.10 (Nintendo Wii; U; ; 1621; ja)
※2007年4月時点での情報です

(5)Wiiリモコンに対応させる

Flashの操作をWiiリモコンに対応させる事も可能です。
現状は以下の2通りの方法があります。

  1. JavaScriptでの通信
  2. LocalConnectionでの通信

2の方法を利用しているメジャーなサイトは、WiiCadeです。
WiiCadeでは、このサイトで利用可能なWiiCade APIといったFlash用のAPIも公開しています。

 上記1と2を踏まえた実装方法は、ウノウラボさんが詳しい検証をされていますので、ここでは割愛します。
Unoh Labs: FlashでWiiリモコンのイベントを取得する方法まとめ

※プレイヤーβでは、有効な利用方法が見つからず実装は見送っています。

以上、簡単なフィードバックとさせて頂きます!
それでは、本家ART-Meterのリニューアルもぜひお楽しみください!

HTML5飯