日曜プログラマーのためのVisual Studio 2010入門 第3回

ブラウザーで多種類のムービーを再生できるSilverlightコンテンツ

青山倫子さんに詩を朗読してもらおう！

　ASCII.jp内の特設サイトで公開中のSilverlightコンテンツ「倫子の空模様」がアップデートされた。今回は追加された、青山倫子さんが時刻と天候に応じた詩を朗読してくれる機能を中心に紹介していこう。

天候や時刻に応じたグラフィックを背景に中原中也や若山牧水など数種類の詩を朗読するムービーが流れる。時間帯を変えて何度かアクセスして欲しい

　ここでは前回に引き続き、コンテンツをSilverlightで作成する際のヒントをいくつか紹介していこう。

動画をオーバーレイさせるには？

　さて、今回公開したコンテンツは、アクセス時の天候や時刻に合わせた空模様のグラフィックスを背景に、青山倫子さんが詩を朗読するムービーが流れる。そして背後には朗読中の詩の文字が左から右にスクロールしながら表われては消えていくというもの。

　詩の内容も天候・時刻に応じたもので、晴れた朝は若山牧水の「海の声」、そして夜には中原中也「都会の夏の夜」が流れるといった按配だ。

撮影時はブルーバックを背景に朗読している。このブルーバック部分を手軽に切り抜けるカスタムシェーダーを自作してみよう

　ここで注目したいのは、青山倫子さんがまるで空を歩きながら朗読していること。つまり、あらかじめ撮影したムービーから人物のみを切り抜いているわけだ。

　このような動画のオーバーレイを実現するには、どのような作業が必要だろうか。ムービーの一部を切り抜くには、Silverlight 3から使えるようになった「ピクセルシェーダー効果」を使う。これに対応したカスタムシェーダー効果を自作し、指定した色を透明にすることで目当ての素材（今回は青山倫子さんと椅子）を切り抜いた状態にできる。

　以下にカスタムシェーダーの自作手順を掲載しよう。限られたスペースということもあり、すべてのコードを掲載することはできないが、基礎となる仕組みを公開するので、Silverlightでのコンテンツ制作に興味を持った読者はぜひ挑戦して欲しい。

　前準備として、http://msdn.microsoft.com/ja-jp/directx/default.aspx から最新のDirect X SDKをダウンロードしてインストールしておこう（動画作成時点ではFebruary 2010が最新）。

　まずは、http://wpffx.codeplex.com/ からソースコードをダウンロードし、上記のソースコードのなかから、ColorKeyAlhpaのシェーダーのソース（HLSL）とクラス定義をWPFのプロジェクトからSilverlightのプロジェクトにコピーする。

【コピー元】WPFSLFx\WPF\ShaderEffectLibrary\ShaderSource\ColorKeyAlpha.fx
【コピー先】WPFSLFx\SL\SLShaderEffectLibrary\ShaderSource\MyColorKeyAlpha.fx

【コピー元】WPFSLFx\WPF\ShaderEffectLibrary\EffectFiles\ColorKeyAlphaEffect.cs
【コピー先】WPFSLFx\SL\SLShaderEffectLibrary\EffectFiles\MyColorKeyAlphaEffect.cs

　次に、WPFSLFx\SL\SLShaderEffectLibrary.csproj を開く。MyColorKeyAlpha.fxとMyColorKeyAlphaEffect.cs のそれぞれをプロジェクトに追加して、変更を加える。変更後、コンパイルし(以下のコマンドをコマンドラインで実行)、できたpsファイルをプロジェクトへ追加する。

>cd WPFSLFx\SL\SLShaderEffectLibrary\ShaderSource
>fxc MyColorKeyAlpha.fx /T ps_2_0 /Fo MyColorKeyAlpha.ps

赤字が変更・追加した箇所

赤字が変更・追加した箇所

　最後にプロジェクトをビルドする。SLShaderEffectLibrary.dllができるので、これをコンテンツのプロジェクトの参照設定に追加する。

*

　文字にすると面倒そうに見えるが、元になるソースが存在するので、経験者ならばここまで3～4時間もあればこなせるだろう。

　このカスタムシェーダーは透明にする色を自分で指定できるので、指定色とそれに対する許容値――指定色を中心として、ここからここまでという範囲――を設定するだけで切り抜きが可能になる。

　ただし、この機能を十全に活かすには、素材の撮影時から切り抜きを意識する必要がある。今回の朗読ムービーの場合、青山倫子さんの背後にはブルーバックを敷いたが、Silverlightで使うために動画をエンコーディングしたところ、色調が落ちてしまい、ブルーバックの青色にグラデーションがかかってしまった。

　その結果、ひとつの指定色では完全に切り抜けないものになってしまい、試行錯誤の末、明るい青、暗い青、中間の青と計三色分指定して細かく抜く手間がかかってしまった。特に、暗い青色と髪の色が馴染んで作業が遅延したことを考えると、今回に限ってはブルーではなく、グリーンバックにしたほうがよかったかもしれない。

　素材撮影時は、切り抜く際の手間も考えて撮らないと後々面倒なことになる。特に色味に関しては試行錯誤する必要があるので大幅な時間ロスにつながるので気をつけたい。

光の玉をクリックすると朗読が始まる。この仕組みは？

　無事、素材を切り抜けたら今度はアクセス時の天候と時刻に応じて数種類のムービーのなかから適したものを再生する方法に移るわけだが、これは基本的に前回説明した天気のRSS読み込みと同様。

　RSSで取得した天候情報に合わせて適切なムービーを選んで、外部サーバーから再生している。なお、雲の流れに沿って詩の文字が画面左から浮かぶように表われて、画面右で透けるように消えていくが、これはオブジェクトに透明なマスクを指定しているだけ。文字が流れる枠に対して透明度のマスクを設定している。

　Visual StudioでプロパティのOpacityMaskに「グラデーションブラシ」を指定し、スライダーを動かすだけ。直感的な操作で完結する。もちろんソースコードで指定することもできる。