REMIX07 TOKYO イベント レポート

---

REMIX07　ブレイクアウト セッション
「Silverlight とはなにか? なにができるのか? どうやって作るのか?」

Web クリエイティブ業界に新風を運んできた Silverlight。では、その Silverlight とはそもそもどんなもので、なにができて、なにが特長なのか? 新作ツールは? どうやって作ればいいのか? 実際のサンプル コンテンツや Expression Studio、Visual Studio のデモを交えながら、わかりやすく解説します。

【メインスピーカー】
春日井 良隆
マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 シニアプロダクトマネージャー

ブレイクアウト セッション DS001 概要

「REMIX07」のキーノートやジェネラル セッションで紹介したマイクロソフトのテクノロジ以外にも、Web 業界の有識者の方々から Web デザイナー、Web デベロッパー、意志決定者向けにさまざまな情報をお届けするブレイクアウト セッション。ここではマイクロソフト デベロッパー & プラットフォーム統括本部 シニアプロダクトマネージャの春日井 良隆が、Silverlight に焦点を当て、そのコンセプトから実制作のポイントまでを紹介します。

そもそもユーザー エクスペリエンスとは何か?

Silverlight の話の前に、まず 「ユーザー エクスペリエンス」 の話です。アプリケーションの操作をする際に、マウスのクリックや移動を行いますが、そのときに単にクリックするだけでなく、ちょっと心地良いとか気持ちいいとか、そういった部分を非常に重視しながらソフト開発を行っています。
たとえば Windows Vista のインターフェース、Virtual Earth のインターフェースにおいても、非常に注意を払い、どういうユーザー体験をさせるかということ自体を、一つのコンセプトとして開発に取り組んでいるわけです。

動画の視聴におけるユーザー エクスペリエンス

では、それは動画を見る場合とどう違うのでしょう?　ここで当社のゲームであります 「Halo 3」 のプロモーション ムービーを見ていただきましょう。プロモーション サイトでは、Windows Media のインターフェースが表示され、そのなかでトレーラー ムービーが再生されます。ここでの作りは HTML ベースの通常の Web サイトがあり、それとは別に Windows Media の画面が開く形になっています。このとき、観る側は視線を動かしたくありません。ですので HTML のサイトのなかに Windows Media のコンポーネントを使って、ムービー メディアを埋め込んでいるケースもあります。

こういったときに、作り手のデザイナーとしては、ボタンの色を変えたい、配置を変えたい、形を変えたい、など、自分が意図したデザインに変えたい場合があります。観る側としても、より使いやすくよりカッコイイ デザインで視聴したいという要望が出る場合があります。全体的なデザインを崩さないで、コントロール部分のデザインを意図通りのインターフェースに作り込む。これを実現するのが Silverlight ということになります。

• Windows Media Player で、動画をそのまま配信
• Windows Media のコンポーネントを使い、動画をそのまま Web サイトに埋め込む
• Silverlight を使い、インターフェースを作り込んだ状態で Web サイトに埋め込む

また、高画質の動画を目で体験いただけると、ユーザー エクスペリエンスとして、より高画質なものを送り手も受け手も望んでいることも実感いただけると思います。

ユーザー エクスペリエンスを高める Silverlight

Silverlight は Web ブラウザ用のプラグインです。プレイヤーやランタイムといった言い方をしてもいいでしょう。 Silverlight には 3 つの特徴があります。

(1) クラス プラットフォーム / クロス ブラウザである
Windows だけでなく Macintosh に対応しています。Internet Explorer だけでなく、Firefox や Safari、将来的には Opera 対応を予定しています。ノベルとの技術協力のもと、Moonlight の名称で Linux 版 Silverlight の開発も進んでおります。

(2) 柔軟なプログラミングモデル
Adobe Flash との最大の違いになります。JavaScript を基本にしていますが、それ以外にも、.NET Framework で使用される Virtual BASIC、C#、Ruby、Python といった言語でのアプリケーション開発が Silverlight 1.1 より可能です。 DLR ( 動的言語ランタイム) および CLR (共通言語ランタイム) を Silverlight のなかに内包していますので、Macintosh 環境であっても、.NET ベースのアプリケーションが問題なく動作する構造になっています。

(3) 高品質・低コストなメディア配信
Silverlight には Windows Media の再生プレイヤーという側面があり、その特徴をすべて引き継ぐことができます。たとえばコンテンツホルダーさんが HD 画質の動画配信を行いたい、DRM 対応の動画配信を行いたいというときに、Silverlight でそのまま対応が可能となります。

Silverlight ショーケース

実際に Silverlight を活用したアプリケーションの実例をご紹介しましょう。

• http://zerogravity.terralever.com/
  重力をモチーフにしたゲームです。4 方向のキーだけを使って、操縦士をロケットまで誘導します。技術的な特徴としては、C# で開発されています。また XAML ファイルの圧縮やプレローダーなどの独自手法も活用されています。
• Top Banana
  http://www.metaliq.com/portfolio/silverlight.html
  アメリカの Metaliq という制作会社が開発したビデオ編集 Web アプリケーション。画面を見てわかるとおりですが、Macintosh 上の Safari でも問題なく動作しています。ムービー ファイルを再生しながらフレームをドラッグ操作するだけで、簡単に映像の入れ替えや追加などの編集が可能です。
  

  

  Top Banana

  

  フレームをドラッグ操作するだけで
  簡単に映像の入れ替えや
  追加などの編集が可能

• Contoso Bicycle Club
  http://contosobicycleclub.mslivelabs.com/
  Virtual Earth と連動し、ツーリング マップおよび動画を連動表示させたガイド サイト。車載ビデオカメラの風景と地図上のアイコンが連動して動作しています。ちなみに、ブラウザを Macintosh 版 Firefox に切り替えてデモンストレーションしております。
  

  

  Contoso Bicycle Club

  

  Virtual Earth の 3D マップ上を、自転車
  のアイコンがリアルタイムに移動する

• tafiti
  http://www.tafiti.com/
  Live Search と連動し、検索結果をドラッグ操作でメモできるなど、新しいインターフェースを搭載した検索サイト。アニメーション表示とともに、Web サイト、イメージ、RSS フィードなどが包括的に検索されます。検索結果は右側のエリアにドラッグすることでストックしておけます。
  

  

  tafiti

  

  右側のエリアで検索結果をストックしたり
  整理したりが可能になっている

  

  春日井 良隆のスピーチは続く

■ Silverlight によるサイト構築の実例： bjtv

実際に、Silverlight を使ったサイト構築は日本でも進んでいます。ここでは BJ リーグの試合中継を行う 「bjtv」 (バスケットボール・ジャパン TV) のコンテンツの Silverlight 化を行った事例をもとに、デモを交えながらさまざまなポイントを解説します。

【登壇者】
川上 輝之氏
ヒューマンビジネスサービス株式会社 プランニング事業部 バイスプレジデント
北村 哲弥氏
株式会社セカンドファクトリー ストラテジックセールス グループリーダー

【サイト URL】
bjtv
http://www.basketballjapantv.com/

「bjtv」 は、2005 年に開幕した日本初のプロバスケットボールリーグである 「bj リーグ」 の全試合 (昨年度 165 試合、今年度 227 試合) を配信するサイトとなります。スター選手のインタビュー映像なども取り扱っています。
日本のマーケットでもスポーツ ビジネスへの注目が集まっていますが、アメリカに比べれば成功事例は少ないのが現状です。日本のバスケットボールも、競技人口は 500 万人ぐらいいると言われていて、かなりの人気スポーツですが、プロリーグがなかったため少し遅れていました。そこで bj リーグでは、「プロフェッショナル」 「スポーツ エンターテインメント」 「グローバル＆コミュニティ」 という 3 つの視点を打ち出して、40 万人以上の観客を動員するまでに至りました ( 今年度目標 70 万人) 。
そして、今後のさらなる成長のために 「インターネットによる情報配信」 が大きな鍵を握っていると我々は考えています。bjtv としては“動画のリッチ加減”という部分で、より bj リーグの魅力が伝わるインターフェースと、インタラクティブな仕掛けを摸索し、できる限りユーザーの皆さんに提供しなければならないと感じています。
Silverlight というプラグインは、表現の自由度が高いうえに、高品質かつ低コストで動画配信が可能だと知りまして、今回サイトの Silverlight 化を試みました。

今回の試みでは、ニッチな市場に向けてではなく、広くバスケットボールに興味がある層、ルールは分からないけど試合は見てくれるような層にまで訴求するよう、興味を補うようなユーザー インターフェース、体感してもらうようなインターフェースということを考えました。また同時に Silverlight 化による運用コスト、動画の高品質化ということを視野に入れて、サイトの構築を行いました。デザイン考案から実際のメイクまでの期間は 2 週間です。実作業はほぼ 2 日程度で終わってます。
このコンテンツでは 「エクスペリエンス デザイン」、すなわちユーザーに感動を与え、もう一度使ってみたくなるようなインターフェースということを考えております。動画がメイン部分に表示されるのは、一般的なデザインですが、その下にサムネイル表示も可能となっております。右側の部分の選手表示は、試合動画に連動しているだけでなく、そこから選手情報を引き出すことも可能です。こういったインタラクティブな部分についても、Silverlight では比較的簡単に制作できます。また、実際に点数が入った場合、劇的なアニメーションの演出が画面全体に加わります。
この新しいインターフェースでのサービスは、2007 年 11 月 〜 2008 年 4 月の今シーズンにおいて、体験版的な形でいくつかの試合を Silverlight で視聴可能とする予定です。さらに次のシーズンにおいても、Silverlight ですべてのコンテンツを視聴可能とするべく検討中です。

Silverlight 1.0 でできること

Silverlight の基本的な機能を列挙しておきましょう。

• 2D グラフィック
• アニメーション
• 入力 ( マウス、キーボード、インク)
• メディア ( WMV、WMA、MP3)
• イメージ ( JPG、PNG)
• テキスト ( アルファベットのみ)
• HTTP ダウンローダー
• XAML パーサー
• JavaScript DOM

ところで Silverlight 1.0 についてですが、実は現在、テキストはアルファベットしか表示できません。しかしこれは、英語圏以外の地域において大きな問題であると認識しておりますので、1.1 で 100 ％解決されます。

Silverlight のグラフィックおよびアニメーションは、「XAML」 (ザムル、Extensible Application Markup Language) と呼ばれる XML ベースのマークアップ言語によって定義されます。

メディア ファイルについては、WMV のバージョン 7 以降となります。とくに VC-1 ですが、米映画テレビジョン技術者協会 (SMPTE) において標準化された VC-9 規格が VC-1 に改称されたものです。これは HD DVD や Blu-ray の標準コーデックとして採用されており、高い評価を誇っています。

すでに説明したとおり、Silverlight では JavaScript を開発可能です。HTML DOM と相互に作用することができますし、今までに身につけた Web コンテンツ制作技法をそのまま流用できますので、現在のスキルやノウハウを活かすことができます。
現在の Silverlight 1.0 のアプリケーションは、Flash でいう 「swf」 のようなバイナリ データにはなっていません。1.1 からはバイナリも選択できるようになる方向で検討中すが、現在は HTML、XAML、JavaScript、メディア ファイルなどで構成されています。
つまり、Windows Server の担当者がいなくてもメディアの配信が可能、ということになります。ただしストリーミング動画の再生に関しては、ストリーミング サーバーが必要になります。

Silverlight アプリケーションの制作ツール

Silverlight アプリケーションの制作環境としては、Expression Studio をリリースしております。「Expression Studio」 は 4 つのソフトからなる、デザインのためのスイートです。
ロジックの開発ツールとしては、Visual Studio 2008 をお使いいただくことになります。

• 「Expression Blend」 Silverlight および WPF による Web/Windows アプリケーション作成ツール
• 「Expression Web」 XHTML＋CSS サポートのサイト構築ツール
• 「Expression Design」 ベクター グラフィック描画とイメージ編集の機能を持つグラフィック制作ツール
• 「Expression Media」 素材ファイルを一元管理するデジタル資産管理/バッチ処理ツール
  ※動画のエンコードを行う 「Expression Encoder」 が、Media に含まれます (Web から無償ダウンロード可能)

デザイナーは一般的にスクリプトは得意ではありません。一方でデベロッパーは絵心に欠けるケースが多く見られます。両立できるスーパーなかたもいますが、現実問題として、インタラクションが重要な Web アプリケーションでは、デザイナーとデベロッパーの協業ということが必要になります。
従来は、デザイナーが手書きや PDF やパワーポイントで作り上げたイメージを基に、デベロッパーが VB や C# で実装するという形でした。しかし、その過程で正しく両者の意図が伝わらないということが起きました。しかし Silverlight では XAML を介することで、ズレのない作業を進めることができます。

プロジェクトを作成して、イラストを描いてみましょう。Expression Design を使います。Expression Design の特徴の 1 つとして、ブラシを使った淡い表現のできるベクトル ツールが充実していることが挙げられます。タブレットによる筆圧感知にも対応しています。
Expression でのデザイン作成で、XAML そのものを意識する必要はありません。Illustrator でイラストを作成するときに、とくに PostScript を意識しなくても描画できるのと同じで、Expression を使ってデザインを作り上げれば、それが自然に XAML として保存されることになります。そして Expression で作り上げたデザインをデベロッパーが受け取ったときに、そのままマークアップ言語として解釈できることになります。 XAML ファイルとして書き出してもいいですし、クリップボード経由で XAML 形式のやりとりを行うこともできます。

同様に動画素材も準備しておきましょう。これには Expression Encoder を使います。あらかじめエンコード設定がいくつか用意されていますので、それをそのまま使ってもいいですし、フレームレートやビットレートを微調整してからエンコードしてもかまいません。コンペアモードでキャッシュの画質を複数比較しながらエンコードを行うといいでしょう。結果は単なるメディア ファイルとして保存してもいいですが、XAML で記述されたスキンを使うこともできます。
こうして出来上がったデザイン パーツを Expression Blend などにインポートして仕上げるのが基本的な制作手順となります。タイムラインをベースに、パーツがクリックされたらどのように動作したり、どのようなアニメーションが加わるかを記述することができます。

こうして完成したプロジェクト ファイルを、デザイナーはデベロッパーに引き渡し、ここからはロジックを組んでいくことになります。プロジェクト ファイルを右クリックすると、「Edit in Visual Studio」 というメニューが現れます。 Expression Blend と Visual Studio は 1 つのプロジェクト ファイルを共有することができます。こうしてデザイナーとデベロッパーが連携をとりながら、それぞれの作業を進めていくという形になります。

まとめ： これからの Silverlight

Silverlight 1.1 では、さきほど説明した日本語テキストだけでなく、.NET Framework、分離ストレージ、JSON Web サービス、マネージ コントロール フレームワーク、Media-DRM、XML リーダー/ライターなど、さまざまな機能があらたにサポートされる予定です。

また、Windows Live のチームが行っている、一種のホスティング サービスになりますが、「Silverlight Streaming」 という誰でも使える Silverlight アプリケーション配信用のストリーミング サービスを無償で用意しております。1 ファイル 22 MB、トータル 4 GB のスペースが利用可能で、10 万回/月まで無料で再生できます。
http://silverlight.live.com/

そして Silverlight のロードマップですが、9 月 5 日に 1.0 が正式版になりました。1.1 は来年の予定ですが、その前に β 版をリリースしたいと考えています。さらにその先に、Windows Mobile 用の Silverlight ランタイムである 「Silverlight for mobile」 も現在予定しています。あわせて Expression もバージョン 2 を来年に予定しています。Visual Studio 2008 はこの冬に日本語版をリリースし、同時に Visual Studio 2008 用のテンプレート集である 「Silverlight Tools」 もリリースする予定です。
なお MSDN のなかにある Silverlight のページにて、本日 (9 月 19 日) より 「Silverlight フォーラム」 を開設しますので、ぜひご利用ください。