PR

Silverlightで作る動画プレーヤー

2008年7月8日(火)
後藤 雄介

環境の準備

 今回は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を直接編集した方が早い場合もありますので、適宜切り替えて使用してください。同時表示も可能です。

株式会社アゼスト
UX・情報アーキテクト。広く・浅く・普くをキーワードに、クライアントサイド・サーバサイドの様々なテクノロジーを囓り散らす。UXとアーキテクチャを主軸に、アプリケーション開発における上流設計を専門とする。またその傍ら、マラソンやトライアスロンを趣味とし、日々トレーニングに勤しむ。http://www.azest.co.jp/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています

Silverlightで作る動画プレーヤー | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。