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

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

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

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

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

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

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

Windows Vista（左）や Virtual Earth（右）のインターフェースは、それ自体が「ユーザー エクスペリエンス」をもたらすことをコンセプトに開発されている

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

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

実写のスペクタクル映画と遜色のない 「Halo 3」 プロモムービー。HD 画質のまま、フルサイズ画面に切り替えることが可能

では、それは動画を見る場合とどう違うのでしょう？　ここで当社のゲームであります 「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 つの特徴があります。

	Silverlight ショーケース

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

• ZERO GRAVITY

  ZERO GRAVITY
  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		ヒューマンビジネスサービス株式会社 プランニング事業部 バイスプレジデント 川上 輝之氏と 株式会社セカンドファクトリー ストラテジックセールス グループリーダー 北村 哲弥氏

Silverlight を活用した bjtv の試作コンテンツ

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

試合を見ながら選手情報をチェックすることも 可能

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

ポイントが入ると、さながらゲームの画面のように、画面全体にアニメーションがオーバーラップする		bjtv の試作コンテンツのデモの模様。全面的に Silverlight を使ったサービスの採用を次シーズンから検討中

	Silverlight 1.0 でできること

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

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

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

Silverlight 1.0 でできること		Silverlight のグラフィックおよびアニメーションは、XAML によって記述されているのが特徴

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 を介することで、ズレのない作業を進めることができます。

Visual Studio を呼び出し Expression のプロジェクト ファイルを編集することが可能

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

Expression Blend での 「page.xaml」 の編集

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

Visual Studio での 「page.xaml」 の編集

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

	まとめ： これからの Silverlight

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