REMIX07　ブレイクアウト セッション
「Silverlight Web Applications デザイン技法、開発手法」

強力な RIA 制作機能を持つ Silverlight。選択するメリットはたくさんありますが、その柔軟なプログラミングを活かすには、従来と異なるデザイン技法を事前に把握しておく必要もあります。 Silverlight Web Application のプレゼンテーション ロジック開発におけるデザイナーとデベロッパーのコラボレーションをいかに実現させるか。実際の構築事例を紹介しながら、開発のワークフローを解説します。

【メインスピーカー】
松岡 清一氏
NRI ネットワークコミュニケーションズ株式会社 Web マーケティング事業部 部長
※書籍 「Microsoft Silverlight 完全解説」 監修

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

「REMIX07」 のキーノートやジェネラル セッションで紹介したマイクロソフトのテクノロジ以外にも、Web 業界の有識者の方々から Web デザイナー、Web デベロッパー、意志決定者向けにさまざまな情報をお届けするブレイクアウト セッション。ここでは NRI ネットワークコミュニケーションズ株式会社 Web マーケティング事業部 部長の松岡 清一氏が、「REMIX07 ティザーサイト」 「REMIX07 Tokyo 公式サイト」 「東京都少年サッカー・ドリームパーク “ドリパク”」 「ジュビロチャンネル」 「野村證券バーチャル店舗」 の各サイトを例にして、Silverlight Web Application の制作プロセスを段階的に説明します。

NRIネットワークコミュニケーションズ株式会社 Webマーケティング事業部 部長の松岡 清一氏（左）		PIP コンテンツである 「野村證券バーチャル店舗」 を通じて、Silverlight の潜在パワーを解説

	Silverlight を選択する理由

キーノートでもご紹介いただきましたが、PIP （Person in Presentation） を利用したコンテンツでは、従来のようにテキストだけの静的なコンテンツに比べ、読んだだけではなかなか理解しにくい概念などをより具体的な形で説明することが可能です。Silverlight の動画配信技術、リッチなインタラクティブを構築できる機能を使うことで、より分かりやすく訴求力の高いものが作れます。

Silverlight 構築の前に

Silverlight を選択する理由

さて、構築技法の話に入る前に、前提として 「企業のコミュニケーションをどう考えるか」 ということが大切な命題になります。たとえば Silverlight と Flash という選択肢があったときに、そもそも 「企業の伝えたいこと」 という主軸があり、それをどう伝えるかということが重要になります。さまざまなマスコミュニケーションのなかでも、Web コミュニケーションにおいてどういう形態を選択するのか、RIA コンテンツのなかでもどこを Silverlight で作るのかという、実装を見据えた機能との兼ね合いのバランスが、構築における大前提となります。
Silverlight を選択する理由としては、RIA 人員 （Flash エンジニア） の不足が挙げられると思います。RIA のニーズが高まる一方で、優秀な Flash クリエイターを即アサインできる状況にはなかなかなっておらず、需要に対する供給が逼迫している現状があります。しかし Lightweight Language （軽量プログラミング言語） を習得しているデベロッパーが、どんどん RIA に参入していますので、Silverlight で開発すれば、それを活かすことができます。また .NET 開発環境に長けた方々も、インタラクティブ デザイナーとして RIA 開発プロジェクトに参加することができるわけです。こういった状況を見ると、現場感覚としては難しい面もありますが、Flash クリエイターが Silverlight クリエイターに乗り換える、といったこともマーケティング的にありえるかもしれません。むしろビジネス ロジックの開発やプレゼンテーション ロジックの開発に従事していたデベロッパーが、UI デザインや新しい表現を求めて、Silverlight 導入に踏み切るケースが増えるのではないかと想像しています。
では実際に弊社が開発した Silverlight コンテンツを紹介しつつ、どういう点が構築のポイントだったのか、Flash での開発手法と違うところ、などを簡単に説明したいと思います。

■ 事例その 1： REMIX07 ティザーサイト （6 月 12 日リリース）

REMIX07 ティザーサイトが、日本で初めて Silverlight を導入

当イベントのティザーサイトも、Silverlight で構築されました。おそらく日本初の Silverlight 公式サイトとして構築された例だと思います。

【サイト URL】
REMIX07
http://remixj.com/

開発時はまだまだベータ環境でしたので、いくつか苦労はしましたが、情報デザインという面ではハッキリしていて、まだあまり認知されていなかった Silverlight プラグインの導入を促すことが主目的となっています。またその時点のプラグインは 1.0 BETA 版だったので、それも構築のポイントだったと言えます。また当時は WPF の機能の一部が移植される予定、というのも Silverlight が期待されていた点でした。最終的に 1.0 では 3D コントロール機能の搭載は見送られましたが、3D 的な表現イメージを持たせたいというのも、作り手の思いとしてありました。最終的には 3D のムービーを作成して、それを中央に表示させるというデザインになりました。

REMIX07 ティザーサイト		REMIX07 ティザーサイト構築のポイント

■ 事例その 2： REMIX07 Tokyo 公式サイト （7 月 17 日リリース）

実際のイベント サイトでは、「UI にインタラクティブ性を持たせる」 ということが構築のポイントとなりました。具体的には、Flash の対抗ソフトという面で注目されていましたので、同種の演出を取り込むことが 1 つ。もう 1 つは Silverlight Streaming をトップページにも実装するということでした。コンセプトとしては動画の演出により、イベントへの期待感を煽ることを目指して構築しました。

【サイト URL】
REMIX07
http://remixj.com/

NRI ネットワークコミュニケーションズ株式会社 Web マーケティング事業部 部長の松岡 清一氏が Silverlight でのサイト構築ポイントを解説		REMIX07 Tokyo 公式サイト

REMIX07 Tokyo 公式サイト制作過程での課題： 日本語表示の問題		REMIX07 Tokyo 公式サイト制作過程での課題： プラグインのバージョンアップ

かなり先行しての事例ですが、この 2 つで RIA の機能実装はほぼ検証されました。ワークアラウンド的なトリッキーな手法も用いていますが、それらがいわば TIPS として蓄積されましたので、先ほど説明したようなポイントについても、Silverlight 正式版を使い回避していけば、皆様も RIA コンテンツ開発を問題なく進められると思います。
とくに Silverlight Streaming については、雑誌 「Web Creators 7月号」 （刊行MdN） に検証記事を書かせていただきましたので、こちらをご参照ください。 Silverlight ではサーバ サイド モジュールがまったくいりませんので、専用サーバの設置やミドルウェアの導入が不必要となります。そういった基本的なノウハウや情報をまとめた内容になっています。

■ 事例その 3： 東京都少年サッカー・ドリームパーク

Silverlight Streaming にはさまざまな特徴がありますが、大きくは次の 4 つになるかと思います。

• 高画質な動画を低コストで配信
• オーバーレイ インターフェースを簡単に構築できる
• チャプター画像の自動生成機能
• 将来的に、DRM 対応 （1.1 で対応？）

Silverlight Streaming について

とくに期待しているのは DRM 対応です。ネット上では YouTube をはじめとする動画サイトで、個人の動画、著作権があいまいな動画が流通していますが、Silverlight Streaming で実装することによって、著作権管理ソリューションを提供できるのではないかと考えています。将来的に、たとえば皆さんが配信されるコンテンツの中に著作権管理をしないといけない動画がある場合に、 DRM 機能を使うことでコンテンツごとの課金などがより簡単に対応ができるのではないかと思います。

実際に Silverlight Streaming を使ったサイト構築の事例として 「ドリームパーク」 を紹介しましょう。

【サイト URL】
東京都少年サッカー・ドリームパーク “ドリパク”
http://www.dreampark.sc/

東京都少年サッカー・ドリームパーク “ドリパク”

「ドリームパーク」は、東京都の少年サッカーを推進するために、非営利で運営されているコミュニティ サイトで、SNS と連動させて Silverlight での動画配信を行っています。
東京都の少年サッカーは年間 700 試合ほど行われており、従来はかなりのコストをかけて、試合動画の配信を毎回行っていたそうです。しかし非営利ということもあって、コストをなんとか削減できないかというところから話し合いが始まりました。そこで当時まだ出荷されていませんでしたが、Silverlight を使った配信を提案して、サイト構築を行いました。

“ドリパク” は、父兄が子どもの試合を見たいといった要望にも応えている

小さい画像だと、父兄が見たときに「自分の子どもがどれだか分からない」といった不満が出ますが、そこを解消するため、Silverlight の特徴でもあるフルスクリーン モードへの切り替え機能も提供しています。こういった高画質の動画提供を行うことで、少年サッカー自体が盛り上がる、そういった好循環を目指しています。
サッカーの試合を最初からすべて視聴するという場合だけでなく、名シーンだけ見たいという場合もあります。ドリームパークでは、動画にマウスオーバーを行うことで、動画上部にメニューが現れて、サムネイルのカットインを使った再生位置の指定が可能になります。これまでの動画コンテンツだと、こういった操作や制御は難しかったのですが、いったんローディングしてしまえば、シーンを指定しての再生ができます。これらのシーンの情報は動画と連携させることができます。シーンとリンクする URL を記述すれば、名シーンばかりをクリッピングした動画サイトを構築するといったことができるわけです。

このサンプルでは 6 箇所にチャプターが設定されている

Expression Encoder を利用すれば、Silverlight 向けの動画のエンコード、サムネイルの生成は簡単です。チャプターについては、動画のタイムライン上にマークされた位置で判別できますが、右側の 「Markers」 欄により詳しくパラメータが表示されており、Time や Value などが分かるようになっています。このサンプルでは 6 箇所にチャプターが設定されています。チャプターについては、画面を目視しながら個別指定することもできますが、Expression Encoder では、一定時間ごとに自動的に生成する機能も用意されています。エンコード画質については、基本的には最初から用意されているなかから、好みの設定を指定するだけでよいでしょう。
最後に、テンプレートを選択して動画を描き出します。この作業だけで、プログラミングを何もしなくても、Silverlight のアプリケーションとして、動画を即時配信できるコンテンツが作成可能です。サムネイル画像なども自動的に生成され、ポイントからの再生もすでに可能になっています。

「Thumbnail」 でサムネイル画像のエンコード方法や画質を指定可能。あとは 「Job Output」 でテンプレートを選択し、動画を描き出すだけだ		高品質な動画配信が、数ステップで準備可能

■ 事例その 4： ジュビロ・チャンネル

ジュビロ・チャンネル

キーノートでご紹介いただいた 「ジュビロ・チャンネル」 でも、同様に、Silverlight を使ったフルスクリーンでの動画配信を採用しております。
「ドリームパーク」 「ジュビロ・チャンネル」 ともにサッカーのサイトとなりましたが、サイト構築の関係で、実際に会場に行って、少年サッカーの試合を観戦したりもいたしました。現場で試合を見ていると、選手達の気迫がそのまま伝わる、非常に熱い試合が繰り広げられており圧倒されたのですが、そういった感情の高まりみたいなものも考えることが、Web サイト構築のヒントになるのかもしれません。

【サイト URL】
ジュビロ・チャンネル
http://www.jubilo-ch.com/silverlight/mega/

■ 事例その 5： 野村證券バーチャル店舗

これもキーノートでご紹介いただいたサイトになりますが、「野村證券バーチャル店舗」 では PIP （Person in Presentation） を採用しております。“Silverlight でどこまで RIA コンテンツを制作できるのか” という点では、かなりのことができることに気づいていただけると思います。
なお、このサイト構築でのポイントとしては、Silverlight 1.0 では WMV にアルファ情報が持てなかったため、動画の表示位置をデザイン時点で決定しておき、ページの背景画像はあらかじめ動画に埋め込む、という作業が必要でした。背景と人物を別に動かして重ねるのではなく、最初から折り込んだ形での編集となったわけです。実制作の現場としては、今後の対応に期待したいと思います。このコンテンツについては、Flash 版と Silverlight 版の両方を制作しましたが、要所要所においては Silverlight 版のほうが占有帯域も小さく済んでいますし、滑らかな映像再生も実現していますので、使い分けあるいは組み合わせといったことも考えられるかもしれません。

野村證券 バーチャル店舗		背景と人物を別に動かして重ねるのではなく、 最初から折り込んだ形での動画となっている

	Silverlight の柔軟なプログラミング モデル

Silverlight の柔軟なプログラミング モデル

Flash デベロッパーであれば ActionScript を駆使されて開発していると思いますが、Silverlight では、JavaScript、Visual Basic、C#、あるいは IronRuby、IronPython といったダイナミック ランゲージを取り込んでいます。明確なデータはありませんが、サイト構築においては、ActionScript を使って開発している人数より、ダイナミック ランゲージを使って開発している人数のほうが圧倒的に多いと思われます。そういった方々が、ビジネス ロジックをがりがりと書くだけではなく、サイトを訪れた人になんらかのエクスペリエンスを与えるような、プレゼンテーション ロジックや UI といった部分に眼を向けていただけると、RIA コンテンツが増えていくのではないかと期待しています。
Silverlight 適応のメリットとしては 「.NET アプリとの親和性」 「動画の低コスト配信」 の 2 つを挙げられますが、いままで .NET 環境で構築されてきたものもターゲットですので、DB とのやり取りなどにおいて、サイトのサービスを心地よく利用できるよう考えて開発をしていただけると、より洗練されたインターネット アプリケーション サービスが作れるのではないか、ということも考えています。

Silverlight デザイン技法

セッション タイトルでもある 「デザイン技法」 については、実は Silverlight 独自のものがあるというわけではありません。サイトで提供するサービスや機能を考えるステップに、なんら違いはありませんし、実現のためのデザインについても、代わりはありません。唯一、ファイル フォーマットや記述言語が従来と多少異なり、XAML （ザムル、Extensible Application Markup Language） をメインとしているということが挙げられます。

Expression Studio をメインとして Web アプリケーションを構築していくと、XAML をベースにデザイン プロセスも開発プロセスも進んでいきます。たとえば Expression Design では XAML 形式の画像ファイルを書き出すことができますが、色情報、位置情報などが XML 情報になっており、そのまま Expression Blend にインポート可能になっており、エンジニアやデベロッパーもそれらを触ることができます。動画エンコードにおいても Expression Encoder は XAML タグを書き出しますので、これも Expression Blend でそのまま扱うことができます。

Expression Studio を利用した制作プロセス		Expression Studio と XAML

デザイナーとデベロッパーの連携