連載 続・無償環境でSilverlight 2アプリを開発しよう！ 第1回 動きのあるSilverlightアプリを作ろう シグマコンサルティング　菅原 英治 2009/02/10
Page1 Page2 Page3 Page4

■動画を利用しよう

　ここでは前章の「アニメーションを利用しよう」のサンプルに動画を加えて解説します。

●動画利用のサンプルを動かそう

　下に表示されているのは、動画利用のサンプルです。

動画を再生するSilverlight 2アプリ

　画面の中央で動画が再生されています（この動画は、筆者の会社のそばの隅田川テラスにて水上バスが進む様子を、自分の携帯電話のカメラで撮影したものです）。

　これは、先ほどのアニメーションのサンプルに動画再生を追加したので、文字列をアニメーションさせる機能も利用できます。もしかすると読者の一部の方は、ある事に気付かれているかもしれません。そうです、これは、動画にコメントを付けることで人気のあるニコニコ動画をイメージしたものです。

●動画を利用するサンプルを開発しよう

　それでは、動画を利用するサンプルを開発しましょう。繰り返しになりますが、前章の「アニメーションを利用しよう」のサンプルに追加することで開発します。

　「アニメーションを利用しよう」のプロジェクトから、「Page.xaml」を開き、次の太字のコードを入力してください。

<UserControl ……略……>   <!--レイアウト-->   <StackPanel Background="Azure">     <Canvas Height="200">       <MediaElement Source="waterbuss.wmv"           Height="200" Width="400" />       <TextBlock x:Name="textBlockMessage"           FontSize="30" Height="50">         <TextBlock.RenderTransform>           <TranslateTransform/>         </TextBlock.RenderTransform>       </TextBlock>     </Canvas>     <TextBox x:Name="textBoxMessage" FontSize="30"></TextBox>     <Button x:Name="buttonEnter" Content="入力"         Width="100" Click="buttonEnter_Click" />   </StackPanel>   ……略…… </UserControl>

動画利用のサンプルのXAMLコード（Page.xaml）

　続いて、現在開いているソリューション内にあるWebプロジェクト内のClientBinフォルダに、以下の動画ファイルをダウンロードし配置してください（次の画面を参照）。

• 水上バスの動画ファイル

ClientBinフォルダ内に配置された動画ファイル

　Page.xamlファイルのポイントは、<MediaElement>要素です。この要素のSourceプロパティに、動画ファイルのパスを設定しています。このとき動画ファイルのパスは、MSDNの「MediaElement.Source プロパティ」によると、Silverlightプラグインが含まれるHTMLページ（つまりTestPage.aspxまたはTestPage.html）からの相対パス（つまりClientBin/waterbuss.wmv）を設定できる……はずなのですが、わたしの確認する限りうまく動作しません。

　そのため、今回はClientBinフォルダ直下に動画を配置し、Sourceプロパティは「waterbuss.wmv」を設定しています（ちなみに、絶対パスで指定することは可能）。

■

　動画利用の解説は以上です。簡単に動画を利用できることが理解できたのではないでしょうか。動画は、それ自体でさまざまなことが表現できるため、アプリを楽しいものにできます。ぜひ皆さんも、動画を利用して楽しいアプリを開発してください。

■まとめ

　それでは、まとめです。今回は、「動きのあるアプリを作ろう」のテーマの下、「ドラッグ＆ドロップ」「アニメーション」「動画」の3点を、Silverlight 2アプリで利用する方法を解説しました。

　「ドラッグ＆ドロップ」では、文字列をドラッグする方法を解説しました。そのポイントは、移動先の座標を求めることにありました。その座標は、始点、終点、初期位置から求めることができました。

　「アニメーション」では、文字列を右から左にスライドさせる方法を解説しました。そのポイントは、Silverlightでのアニメーションは、アニメーションさせたいコントロールのプロパティの変化（今回はX座標の変化）だということでした。

　「動画」では、動画を利用する方法を解説しました。そのポイントは、<MediaElement>要素を利用することでした。

　次回は、Silverlight 2からWebサービスを利用する方法について解説します。お楽しみに。では、さようなら。

INDEX
	連載：続・無償環境でSilverlight 2アプリを開発しよう！
	第1回 動きのあるSilverlightアプリを作ろう
	1．文字列をドラッグ＆ドロップするサンプルを動かそう
	2．ドラッグ＆ドロップを開発しよう
	3．アニメーションを利用しよう
	4．動画を利用しよう

「続・無償環境でSilverlight 2アプリを開発しよう！」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）