Silverlight 1.0でメディアを操作する

はじめに

　前回の記事ではSilverlightの一般的な概要について説明し、さらに、Silverlight 1.1アプリケーションでマネージコードを実行する方法について説明しました。本稿では、Silverlightの主要な機能の1つである、リッチメディアエクスペリエンスについて考察します。それにあたり、WindowsメディアファイルをSilverlightアプリケーションに埋め込む方法、Windowsメディアファイルの再生を制御する方法について学習します。また、ビデオに単純な効果を作成する方法についても学習します。

編集部注

　Silverlight 1.1はバージョン番号が見直され、Silverlight 2.0としてリリースされることになっています。

Silverlightプロジェクトの作成

　まず、Silverlightプロジェクトを作成します。Microsoft Expression Blend 2 September Previewを使用して、プロジェクトにMediaという名前を付けます（図1を参照）。ページのXAMLビューに切り替えて、ページに次のようなCanvasオブジェクトを追加します。

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="664" Height="611"
    Background="White"
    x:Name="Page"
    >

    <Canvas Width="544" Height="595" 
         Canvas.Left="8" 
       Canvas.Top="8"/>    

</Canvas>

図1　新規プロジェクトの作成： Expression Blend 2 September Previewを使用して新規プロジェクトを作成します。

　後でこのCanvasオブジェクトにWindowsメディアファイルを関連付けます。

　［Project］ウィンドウでプロジェクト名（Media）を右クリックし、［Add Existing Item］を選択します。Windowsメディアファイルを選択します。この例では、「WindowsMedia.wmv」という名前の.wmvファイルを選択します。これでプロジェクトに「WindowsMedia.wmv」ファイルが追加されます。

　［Project］ウィンドウで「WindowsMedia.wmv」ファイルをダブルクリックして、ページに追加します。

注

　このプロジェクトを実行するには、Windows Media Player 10以上が必要です。

　「WindowsMedia.wmv」ファイルがCanvasオブジェクト内に取り込まれていることを確認します（図2を参照）。<MediaElement>要素を<Canvas>要素内に手動で移動することが必要な場合もあります。

図2　ファイルの追加: .wmvファイルがCanvasオブジェクトに関連付けられます。

　F5キーを押して、ページをテストします。ページの読み込みが終了すると、ビデオが自動的に再生されます（図3を参照）。

図3　ビデオの再生: ページの読み込みが終了すると、既定ではメディアが自動的に再生されます。

自動再生の無効化

　ビデオの自動再生は便利な機能ですが、場合によっては、自動再生を既定で無効にした方が適切なこともあります。たとえば、ページに複数のビデオが埋め込まれている場合、この機能は非常に邪魔になります。自動再生機能を無効にするには、次のように、<MediaElement>要素のAutoPlay属性をFalseに設定します。

<Canvas Width="544" Height="595" Canvas.Left="8" Canvas.Top="8">    
    <MediaElement x:Name="WindowsMedia_wmv" 
       AutoPlay="False" 
       Width="320" Height="240" 
       Source="WindowsMedia.wmv" 
       Stretch="Fill"/>
</Canvas>

　次に、ビデオをどのような場合に、どのような方法で再生するかを決定します。ユーザーのマウスがビデオの上に移動したらビデオを再生し、ビデオから離れたら一時停止するように、プログラムで制御することにします。また、ユーザーがビデオをクリックしたら、再生を停止して最初まで巻き戻すことにします。このような処理を行うには、次の太字で示す属性を設定します。

<Canvas Width="544" Height="595" Canvas.Left="8" Canvas.Top="8">    
    <MediaElement x:Name="WindowsMedia_wmv" 
           AutoPlay="False" 
           MouseEnter="MouseEnter"
           MouseLeave="MouseLeave"
           MouseLeftButtonDown="MouseClick"
           Width="320" Height="240" 
           Source="WindowsMedia.wmv" 
           Stretch="Fill"/>
</Canvas>

　ここでは基本的に、<MediaElement>要素によって処理される各種イベントのイベントハンドラを設定しています。イベントハンドラを記述するには、［Project］ウィンドウに移動し、「Page.xaml.js」ファイルをダブルクリックします。

　「Page.xaml.js」ファイルに、次のコードを追加します。

function MouseEnter (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.play();
}

function MouseLeave (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.pause();
}

function MouseClick (sender, eventArgs)
{  
   var obj = sender.findName("WindowsMedia_wmv");
   obj.stop();
}

　findName()メソッドを使用すると、Silverlightページ上の指定された要素（x:Name属性によって識別されます）への参照をプログラムで取得できます。この例では、MediaElementオブジェクトのインスタンスを参照しています。このオブジェクトは、play、pause、およびstopプロパティをサポートしています。

　F5キーを押して、アプリケーションを再度テストします。今回は、マウスがビデオの上に移動すると再生が始まり、マウスがビデオから離れると一時停止します。ビデオを再度初めから再生するには、ビデオをクリックします。

鏡像効果の作成

　ビデオに対するおもしろい操作として、鏡像効果を作成してみましょう。図4に、下に鏡像を同時再生するビデオの例を示します。

図4　鏡像: ビデオに対するおもしろい操作として、鏡像効果を作成します。

　この鏡像を作成するには、まず、元のCanvasオブジェクトを修正します。そのためには、XAMLビューに切り替えて、リスト1の太字のコードを追加します。

　これにより、ビデオは、図5に示すような形に変形します。

図5　ビデオの変形: 元のビデオを変形します。

　次に、リスト2のような<MediaElement>要素を追加して、鏡像効果をシミュレートします。

　これで、正像のビデオと鏡像のビデオが作成されます（図6を参照）。

図6　2つのビデオ: 2つのビデオがあるページ

　鏡像を半透明にするには、Opacity属性を0～1の値に設定します。

<MediaElement x:Name="WindowsMedia_wmv1" 
   AutoPlay="False" 
   MouseEnter="MouseEnter"
   MouseLeave="MouseLeave"
   MouseLeftButtonDown="MouseClick"
   Width="319.125" Height="125.423" 
   Source="WindowsMedia.wmv" 
   Stretch="Fill" 
   Canvas.Left="188.405" Canvas.Top="523.848" 
   Opacity="0.3">

　さらに、「Page.xaml.js」の後続のコードブロックをリスト3のように修正します。

　各イベントハンドラ内でfindName()メソッドを使用してメディアオブジェクトを探すのではなく、handleLoad()関数を使用して探すこともできます。また、このページ内にある2つのビデオは同じものなので、鏡像として作成したビデオを自動再生する必要はありません。同じ理由から、ボリュームプロパティを0に設定してボリュームをオフにします（使用可能な値は0～1です）。

　F5キーを押して、ページをテストしてみましょう。上部に配置されたビデオの上にマウスが移動すると、両方のビデオの再生が始まります。

Silverlightのその他の機能

　この記事では、Silverlightの<MediaElement>オブジェクトが持つ機能について、ごく簡単に説明しました。Silverlightのメディア機能の詳細については、ここのドキュメントを参照してください。

著者紹介

Wei-Meng Lee（Wei-Meng Lee）

Microsoft MVP受賞者。Microsoft社の最新テクノロジー実地研修を専門とするDeveloper Learning Solutions社を創設。.NETとワイヤレステクノロジーの開発者、指導者として知られる。
国際的なカンファレンスでたびたび講演し、.NET、XML、ワイヤレステクノロジーに関する著書、共著書多数。.NETからMac OS Xに至るまで広範な分野について執筆している。著書に『.NET Compact Framework Pocket Guide』（Oreilly&Associates Inc、2005年5月）、『ASP.NET 2.0: A Developer's Notebook』（Oreilly&Associates Inc、2005年6月）、『Programming Sudoku』（Apress刊、2006年3月）など。ブログ「Wei-Meng Lee's Blog」を開設している。