Silverlightで作る動画プレーヤー
環境の準備
今回はExpressionを使用して、Silverlightによる簡単な動画プレーヤーを作成してみます。
まず、制作のための環境を用意します。OSはWindows Vistaを用意しましょう。Windows XPや2003でも開発は可能ですが、その場合は.NET Framework 3.0(http://www.microsoft.com/japan/msdn/netframework/downloads/)をインストールしておきましょう。
完成したSilverlightアプリケーションを動作させるには、Silverlightプラグインが必要になります。Silverlightダウンロードのページ(http://www.microsoft.com/japan/silverlight/downloads.aspx)からダウンロードし、インストールしましょう。この連載では、Silverlight 2を前提としますので、プラグインはSilverlight 2 Beta 2を選択してください。
次にツール類です。Microsoft Expression(http://www.microsoft.com/japan/products/expression/)のサイトを開き、メニューから「評価版」を選択して、評価版ダウンロードページを開きましょう。ページ内には、Expression Blend 2.5 プレビュー 日本語版ダウンロードへのリンクがありますので、今回はまず、それをインストールしてください。
また、後々のコード編集の際にはMicrosoft Visual Studioが必要になります。Microsoft Visual Studio 2008(http://www.microsoft.com/japan/msdn/vstudio/)のサイトにて、Visual Studio 2008評価版が公開されていますので、これもインストールしましょう。なお、Visual Studio 2008には無償のExpress Editionが存在しますが、これはExpression Blendとの連携機能が使えませんので、製品版でも評価版でもかまいませんから、Professional Editionを使用するようにしてください。
併せて、Silverlight 2 Beta 2アプリケーション開発のための、Visual Studio 2008用Microsoft Silverlight Tools Beta 2(http://www.microsoft.com/downloads/details.aspx?FamilyId=50A9EC01-267B-4521-B7D7-C0DBA8866434&displaylang=ja)もダウンロードし、インストールしておきましょう。
Expression Blendを触ってみる
動画プレーヤーとはいえ、今回は外部サービス連携など複雑な動作をするアプリケーションではなく、単純な動作のアプリケーションを作成します。使用する制作用のアプリケーションは、Expression Blendのみとなります。まずはExpression Blendを立ち上げて触ってみましょう。
まずは「ファイル→新しいプロジェクト」を選びます。プロジェクト作成のダイアログが開きますので、プロジェクトの種類に「Silverlight 2アプリケーション」を選択し、名前欄に適当なアプリケーション名を入力してOKを押します(図1)。
Expression Blendは、Adobe Photoshopなどのデザインツールを使い慣れたユーザーにはおなじみの、ステージ、ツールパレット、プロパティパネル、そしてタイムラインパネルで構成されます。画面左側のツールパネルからツールを選択し、それでステージのさまざまな操作を行います。また、ステージ上で選択中のオブジェクトに関して、色や位置などのプロパティ値に変更を加えるには、画面右側のプロパティパネルを使用します。
アニメーションを作成する際には、画面下部のタイムラインを使用します。基本はFlashと同じキーフレームアニメーションであり、1つのオブジェクトに関して適当なキーフレームを設定し、そのキーの状態でのプロパティを設定するという流れとなります。
また、ステージは通常、今現在編集している内容がそのまま確認可能なデザインビューモードとなっていますが、ステージ右上のタブからXAMLコードビューに切り替えることができます。同じようなオブジェクトを複数個作るような際など、XAMLを直接編集した方が早い場合もありますので、適宜切り替えて使用してください。同時表示も可能です。