Silverlightサンプルの紹介
Silverlightアプリケーションの仕組みはとてもシンプルで、HTML（XHTML）ファイルからSilverlightオブジェクトを作成するJavaScriptのロジック（すべてSDKに付属）を実行するだけです。
後はXAML内に簡単なXAMLコード（リスト2）を記述すれば、それだけでSilverlightアプリケーションを作成できます（このXAMLコードでは"Hello, World!"と表示されます。）。
<!-- Silverlight SDK及びイベントハンドラの読み込み --> <script type="text/javascript" src="Silverlight.js" ></script> <script type="text/javascript" src="createSilverlight.js"></script> <!-- Silverlight オブジェクト作成関数呼び出し --> <script type="text/javascript"> createSilverlight(); </script>
Sys.Silverlight.createObjectEx({
source: "myxaml.xaml", // XAMLファイルの定義
parentElement: document.getElementById("SilverlightControlHost"),
// 親要素の定義
id: "SilverlightControl", // 当オブジェクトのID
properties: {
width: "1000", // 表示領域の横幅 (*)
height: "600", // 表示領域の縦幅 (*)
version: "0.9", // Silverlightのバージョン
// (1.0は0.9 1.1は 0.95）
background: "papayawhip", // 表示領域の背景色
},
events: {}
});
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock >Hello, World!</TextBlock> </Canvas>
XAMLコントロールオブジェクト
ここからはXAMLのコントロールについて説明します。XAMLは非常に柔軟な言語で、組み合わせ次第であらゆるオブジェクトを描画することができますが、今回はサンプルのメディアプレーヤーで使用されているコントロールに限定して説明します。ここで扱わないコントロールについてはSilverlight SDKのドキュメントを確認してください。
メディアプレーヤーでは次のコントロールが使用されています。
- Canvas
- TextBlock
- Rectangle
- RadialGradientBrush
- EventTrigger
- Storyboard / DoubleAnimationUsingKeyFrames
- MediaElement
Canvas
<Canvas MouseLeftButtonDown="javascript:media_stop"
Canvas.Left="10" Canvas.Top="0"> …… </Canvas>
Canvasオブジェクトは、図形やコントロール、そして、それらの位置を指定するためのオブジェクトです。
XAMLファイルは必ず<Canvas>タグで始まり、その中にSilverlight name宣言とxmlns属性、XAML namespace宣言とxmlns:x属性を定義する必要があります。以降の<Canvas>タグでは属性の指定は必要ありません。
| プロパティ名 | 内容 |
| xmlns | Silverlight namespace宣言（固定）。 |
| xmlns:x | XAML namespace宣言（固定）。 |
| Canvas.Left | オブジェクトの左からの描画位置を指定（デフォルト値は"0.0"）。 |
| Canvas.Top | オブジェクトのトップからの描画位置を指定（デフォルト値は"0.0"）。 |
| Height | オブジェクトの高さを指定（デフォルト値は"0.0"）。 |
| Width | オブジェクトの幅を指定（デフォルト値は"0.0"）。 |
| Loaded | オブジェクトがロードされた際のイベントを定義。当サンプルではJavaScript関数を実行。 |
| MouseLeftButtonDown | マウスの左ボタンでクリックされた際のイベントを定義。当サンプルではJavaScript関数を実行。 |
TextBlock
<TextBlock Canvas.Top="5" Canvas.Left="10">Stop</TextBlock>
または
<TextBlock Canvas.Top="5" Canvas.Left="10" text=" Stop" />
TextBlockオブジェクトは、テキストを描画するためのオブジェクトです。
| プロパティ名 | 内容 |
| Canvas.Left | オブジェクトの左からの描画位置を指定（デフォルト値は"0.0"）。 |
| Canvas.Top | オブジェクトのトップからの描画位置を指定（デフォルト値は"0.0"）。 |
| Text | 描画するテキストを指定。 |
Rectangle
<Rectangle Stroke="Black" Height="30" Width="55" RadiusX="5" RadiusY="5"> <Rectangle.Fill> …… </Rectangle.Fill> </Rectangle>
Rectangleオブジェクトは、正方形や長方形を描画する図形要素です。Silverlightでは提供しているベクタグラフィックを総称して「図形要素」と呼びます。Rectangle以外にSilverlightが提供する図形要素は次のとおりです。
- Ellipse： 楕円
- Line： 線
- Polygon： 任意の数の辺を持つ閉じた図形
- Polyline： 閉じた図形かどうかに関わらず連続した線
- Path： カーブや円弧を含む複雑な図形を表すための線
| プロパティ名 | 内容 |
| Stroke | 輪郭の色を指定（ブラシ使用可能）。 |
| Height | オブジェクトの高さを指定（デフォルト値は"0.0"）。 |
| Width | オブジェクトの幅を指定（デフォルト値は"0.0"）。 |
| RadiusX | X軸の角の丸みを指定（デフォルト値は"0.0"）。 |
| RadiusY | Y軸の角の丸みを指定（デフォルト値は"0.0"）。 |
| Fill | 塗りつぶし領域の色を指定（ブラシ使用可能）。当サンプルではJavaScript関数を実行。 |
RadialGradientBrush
<RadialGradientBrush GradientOrigin="0.75,0.25"> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="1.0" /> </RadialGradientBrush>
RadialGradientBrushオブジェクトは、図形を円に沿ってグラデーションで塗りつぶすためのブラシコントロールです。GradientStopsプロパティでGradientStopCollectionを指定するか、GradientStopタグを指定することでグラデーションの色や基準位置を設定することができます。
RadialGradientBrush以外にSilverlightが提供するブラシは次のとおりです。
- SolidColorBrush： 単色で塗りつぶす
- LinearGradientBrush： 線状にグラデーションで塗りつぶす
- ImageBrush： イメージで塗りつぶす
- VideoBrush： 動画で塗りつぶす
| プロパティ名 | 内容 |
| GradientOrigin | グラデーションの開始位置を設定（デフォルト値は"0.5,0.5"）。 |
| プロパティ名 | 内容 |
| Color | グラデーションの色を設定。 |
| Offset | グラデーションの相対的な位置（0～1）を設定。 |
EventTrigger
<EventTrigger RoutedEvent="Canvas.Loaded"> …… </EventTrigger>
EventTriggerオブジェクトは、イベントのトリガと動作を定義するオブジェクトです。
| プロパティ名 | 内容 |
| RoutedEvent | 動作のためのイベントを定義。 （※現時点では、"Canvas"か"Rectangle"のLoadedイベントしかサポートしていません） |
Storyboard/DoubleAnimationUsingKeyFrames
<BeginStoryboard> <Storyboard x:Name="Timeline1"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="media"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].
"(UIElement.RenderTransform).(TransformGroup.Children)[2].Storyboardオブジェクトは、一つ以上のアニメーションを記述し、動作の制御を定義するためのオブジェクトです。DoubleAnimationUsingKeyFramesオブジェクトは、キーフレームを使用したアニメーションを定義するためのオブジェクトです。DoubleAnimationは動作させる対象のプロパティがDouble型の場合に使用します。
EventTriggerオブジェクトでアニメーションを開始するためには、<BeginStoryboard>タグを使用します。
| プロパティ名 | 内容 |
| BeginTime | アニメーションの開始時間を指定。 |
| Storyboard.TargetName | 動作させる対象のオブジェクト名を指定。 |
| Storyboard.TargetProperty | 動作させる対象のプロパティを指定。 |
| プロパティ名 | 内容 |
| KeyTime | Value値に達するまでの時間を指定。 |
| Value | 動作させる目標値を設定（デフォルト値は"0.0"）。 |
MediaElement
<MediaElement x:Name="media"
Source="Silverlight.wmv"
Width="900"
Height="500"
Volume="1"
Canvas.Top="40"
Canvas.Left="5" />
MediaElementオブジェクトは、動画ファイルの再生を定義するためのオブジェクトです。
| プロパティ名 | 内容 |
| Source | 動画ファイルの指定。 |
| Width | オブジェクトの幅を指定（デフォルト値は"0.0"）。 |
| Height | オブジェクトの高さを指定（デフォルト値は"0.0"）。 |
| Volume | オブジェクトの音量（0～1）を指定（デフォルト値は"0.5"）。 |
| Canvas.Top | オブジェクトのトップからの描画位置を指定（デフォルト値は"0.0"）。 |
| Canvas.Left | オブジェクトの左からの描画位置を指定（デフォルト値は"0.0"）。 |
| RenderTransformOrigin |
まとめ
冒頭でも述べたように、Silverlightはまだ1.0がBeta、1.1に至ってはAlphaの段階です。しかし、柔軟性の高いXAMLをベースにすることでSilverlight自体はシンプルでありながらも強力な機能を備えています。また、JavaScriptをベースにしていることは、他言語（ASP.NET、WPF、Java、PHP、Perlなど）とも親和性が高いことを表していますので、.NET開発者でなくても注目する価値は高いと筆者は考えます。
正式版がリリースされていない現段階では、コントロールや開発環境など、不足している点が多いですが、今後の可能性は大いに期待できるのではないでしょうか？
すべての開発者にとって、Silverlightが素晴らしいものになることを心より願っています。
