Microsoft Silverlight

Silverlight1.0
アプリケーション開発
0．はじめに
Silverlightの特徴
• ベクターベースの図形の描画
• アニメーション対応
• メディア対応
• 高精細動画配信
• .NET開発環境との連携（ver 1.1以降）
• JavaScriptに加えて、C#、VB、IronRuby、
IronPythonでの開発が可能になる
Silverlight1.0 / 1.1 アプリケーションの仕組み
• Silverlightアプリケーションのファイル構成
• 必要最低限の構成は以下の通り
ファイル
用途
xxxx.htm
スタートページ。Silverlightオブジェクトの作成ロジックの
呼び出し。
Silverlight.js
Silverlightプラグインのインスタンス生成を行う。
Silverlight SDKに付属。
xxxx.xaml
Silverlightアプリケーションの描画やイベントの定義を格納。
XXX.dll
XAMLのNameSpaceの箇所に、以下の参照が追加される
(1.1)
xmlns:Custom="clr-namespace:XXXXXXXXXXXXXXX;assembly=ClientBin/XXX.dll“
Silverlightアプリケーションの仕組み
• Silverlightアプリケーションの動作
１．Webブラウザ上で、JavaScriptがSilverlightインスタンスを
生成。
２．生成されたSilverlightインスタンスは、指定されたXAMLの
内容に従い画面の動的な描画を行う。
（ブラウザ上に、もう一層、ブラウザ非依存のXAMLレンダリ
ングエンジンを搭載しているイメージ）
Silverlightアプリケーションの仕組み
XAML
Silverlight
JavaScript
(Silverlight.js)
)
JavaScript
(html
HTML
内
レスポンス
ブ
ラ
ウ
ザ
Silverlight 1.0
アプリケーション
開発
1．Silverlight
アプリケーション開発の
準備
Silverlightアプリケーション開発に必要なもの
Silverlightアプリケーション開発に最低限必要なもの
• Silverlight1.0ランタイム（プラグイン）
http://www.microsoft.com/silverlight/install.aspx
• Silverlight1.0 Software Development Kit
http://www.microsoft.com/downloads/details.aspx?FamilyId=C7
2F125F-A6F6-4F4E-A11D-6942C9BA1834&displaylang=en
• Webブラウザ
Silverlightアプリケーション開発の準備
• フォルダを作成し、以下のファイルを配置
• Silverlight.js
• Silverlight1.0 SDKのインストール先（デフォルトでは、
C:\Program Files\Microsoft Silverlight 1.0 SDK\Resources）より、
コピーして使用
• HTMLファイル
• XAMLファイル
js/Silverlight.js
XAML/demo.xaml
Default.html
Silverlightアプリケーション開発手順
htmlファイルの作成
• 通常のHTMLファイル中に以下を記述する
１．Silverlight.jsファイルへの参照
２．CreateSilverlight関数の記述
３．CreateSilverlight関数の読み込み
４．<div>によるSilverlightアプリケーションの表示
位置指定
Silverlightアプリケーション開発手順
htmlファイルの作成（続き）
Silverlightアプリケーション用htmlファイル標準的な記述例
<html>
<head>
</head>
// １．Silverlight.jsへの参照
<script type="text/javascript"
src="js/Silverlight.js"></script>
// ２．createSilverlight関数
<script type="text/javascript" >
function createSilverlight() {
// 内容は後で記述
}
</script>
// ３．createSilverlight()関数の読み込み
<body onload=“createSilverlight()”>
// ４．Silverlightアプリケーションの表示位置
<div id="SilverlightControlHost"></div>
</body>
</html>
Silverlightアプリケーション開発手順
htmlファイルの作成（続き）
createSilverlight関数の記述例
Silverlightプラグインのインスタンス生成に必要な引数の記述
function createSilverlight()
{
Silverlight.createObjectEx({
source: “XAML/demo.xaml”,
// XAMLファイル
parentElement: document.getElementById(“SilverlightControlHost”),
id: “SilverlightControl”,
// このオブジェクトのID
properties:{
width: “100%”, // 表示領域の横幅
height: “80%”, // 表示領域の縦幅
version: “1.0”
// バージョン
},
<div id="SilverlightControlHost"></div>
events:{},
});
}
Silverlightアプリケーション開発手順
createSilverlight関数について
Silverlight1.0 SDKのインストール先の、
CreateSilverlight.jsファイルに、
CreateSilverlight関数の説明が記載されている
Silverlightアプリケーション開発手順
Silverlight.jsとCreateSilverlight.jsについて
Silverlight.jsとCreativeSilverlight.jsについての
詳細な情報は、以下のドキュメントを参照のこと
『Using CreateSilverlight.js and Silverlight.js』
http://msdn2.microsoft.com/en-us/library/bb412401.aspx
Silverlight1.0
アプリケーション開発
2．XAMLによる
Silverlightオブジェクトの
記述
XAML
(eXtensible Application Markup Language)とは
• XAMLは、グラフィックデータ、UI、アニメーションなどの定義に
使用できるXMLベースの言語。.NET Framework 3.0のWPF
(Windows Presentation Foundation)で使用するマークアップ言語
として導入された。
• アプリケーション開発時に、デザイナとデベロッパーとの間の、
共同作業を円滑にするように設計されている。
Designer
Developer
XAMLの作成方法
• Expressionなどの開発ツールを使用する
• ツールで作成したデザインがそのままXAMLとして出力される。
生産性が高い。
• テキストエディタなどを使用して直接記述
• XAMLを直接記述していくので、XAMLの知識があれば、効率
良い記述が可能
• Expression Blend、Designer、Encoder、Media、等を
Visual Studio 2008 と組み合わせて使用するのがベスト
• 他社製品のファイル形式も読み込み可能
• 3rdパーティ製プラグインも存在（SWF、Illustrator、・・・)
• デベロッパーもBlendだけは使えるようにする必要がある
Silverlightアプリケーション開発手順
SilverlightアプリケーションでのXAMLの記述
• テキストエディタ、ツールなどを利用して、拡張子“.xaml”のファ
イルを作成し、Silverlightで使用可能な各エレメントと属性を記述
• Silverlight用のXAMLでは、ルートエレメントとしての、<Canvas>
要素を、必ず記述する必要がある
※WPFの場合には＜Window>または＜Page＞タグ
• そのタグの間に各オブジェクトを表すタグを記述していく
Silverlight用XAMLのルートエレメント<Canvas>要素の記述
<Canvas
xmlns = “http://schemas.microsoft.com/client/2007”
xmlns:x = “http://schemas.microsoft.com/winfx/2006/xaml”>
<!-– この間に描画用の各要素を記述していく -->
</Canvas>
Silverlightアプリケーション開発手順
XAMLのコントロールオブジェクト
• ルート要素<Canvas>タグ内に図形に対応したタグを記述していく
Silverlightアプリケーションの主なオブジェクト
タグ
意味
<elipse>
楕円
<Line>
線
<Path>
カーブや円弧を含む複雑な図形を表
すための線
<Polygon>
任意の数の辺を持つ閉じた図形
<Polyline>
閉連続した線
<Rectangle>
矩形
<Image>
画像
＊他にも描画要素には、<textblock>、<MediaElement>
などがある
Silverlightアプリケーション開発手順
XAMLのコントロールオブジェクト記述例
• Canvasの左端から10、上端から10、高さ100、幅100、色ライトブ
ルーの矩形を黒い幅10の枠線で描画
demo.xamlファイル
<Canvas
xmlns = “http://schemas.microsoft.com/client/2007”
xmlns:x =
“http://schemas.microsoft.com/winfx/2006/xaml”>
<Rectangle
Canvas.Top = “10”
Canvas.Left = “10”
Height = “100”
Width = “100”
Fill = “LightBlue”
Stroke = “Black”
StrokeThickness = “10”
/>
</Canvas>
Silverlightアプリケーション開発手順
XAMLのプロパティの記述
• プロパティは、オブジェクトを表すタグの属性として記述される
ほとんどのコントロールオブジェクトで共通のプロパティ
属性
意味
Canvas.Top
Canvasの上端からの距離
Canvas.Left
Canvasの左端からの距離
Height
高さ
Width
幅
Fill
塗りつぶしの色
Stroke
枠線の色
StrokeThickness
枠線の幅
Silverlightアプリケーション開発手順
XAMLのプロパティ記述例
• プロパティは、個別にタグを記述することで、より詳細な設定が
可能
Fillプロパティを個別に設定し、色にグラデーションを設定
demo.xamlファイル
<Rectangle
Canvas.Top = “10”
Canvas.Left = “10”
Height = “100”
Width = “100”
Stroke = “Black”
StrokeThickness = “10”>
<Rectangle.Fill>
<LinearGradientBrush StartPoint=“0,0”
EndPoint=“1,0”>
<GradientStop Color=“Blue” Offset=“0.0” />
<GradientStop Color=“Red” Offset=“0.5” />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
Silverlightアプリケーション開発手順
XAMLの視覚効果用プロパティの記述例
• 表示オブジェクトに用意されている視覚効果用のプロパティを設
定することで、様々な視覚的効果を加えることが可能
RotateTransformプロパティを設定し、表示させる図形を40度傾ける
demo.xamlファイル
<Image
Source = “../image/pic01.jpg”
Canvas.Top="50"
Canvas.Left="150"
Height = "200"
Width = "200">
<Image.RenderTransform>
<RotateTransform Angle=“40” />
</Image.RenderTransform>
</Image>
Silverlightアプリケーション開発手順
XAMLの視覚効果用プロパティの記述例（２）
• RenderTransformのその他の設定
設定値
効果
RotateTransform
回転
ScaleTransform
拡大／縮小
SkewTransform
傾斜
Silverlightアプリケーション開発手順
XAMLの視覚効果用プロパティの記述例（3）
• その他の視覚効果用プロパティ
設定値
効果
Opacity
透明
OpacityMask
透明マスク効果
Clip
切り取り
Silverlightアプリケーション開発手順
XAMLのアニメーションの記述
アニメーションは、<Storyboard>要素の各属性に、
アニメーション効果を適用する要素名と、変化させる
プロパティ名、変化する時間を指定する
アニメション効果を適用する図形の名前
<Storyboard x:Name=“animation1”
Storyboard.TargetName = “pic01”
Storyboard.TargetProperty =
“(Canvas.Left)”>
<DoubleAnimation
RepeatBehavior=“Forever”
To=“300”
Duration=“0:0:1” />
</Storyboard>
変化させるプロパティ
繰り返しの回数
変化させる値の最大値
変化させる時間
Silverlightアプリケーション開発手順
XAMLのアニメーションの記述例
XAMLがロードされるとオブジェクト”elipse1”の
Canvas.Leftプロパティが１秒の間に300まで増分する。
RepeatBehavior属性にForeverを指定することで、
elipse1が右への移動を繰り返す
<Canvas.Triggers>
<EventTrigger RoutedEvent=“Canvas.Loaded”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName=“ellipse1"
Storyboard.TargetProperty="(Canvas.Left)“
RepeatBehavior=“Forever”
To="300"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="ellipse1"
Height="20"
Width="20"
Canvas.Left="30" Canvas.Top="30" Fill=“Green"/>
Silverlightアプリケーション開発手順
XAMLのアニメーションの記述例（2）
HTMLファイル内にJavaScriptで定義された関数によりXAMLで
定義されたアニメーションを制御する
animeStart(); 開始、animePause(); 一時停止、animeStop(); 停止
XAML
<Canvas.Resources>
<Storyboard x:Name="animation"
Storyboard.TargetName="ellipse1"
Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation RepeatBehavior="Forever“ To="300" Duration="0:0:1" />
</Storyboard>
</Canvas.Resources>
<Ellipse x:Name="ellipse1“ Height="20" Width="20" Canvas.Left="30" Canvas.Top="30“
Fill="Green"/>
<Canvas MouseLeftButtonDown="animeStop" Canvas.Left="20" Canvas.Top="60">
<Rectangle Stroke="Black"
Height="40" Width="40" RadiusX="5" RadiusY="5">
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">STOP</TextBlock>
</Canvas>
<Canvas MouseLeftButtonDown="animePause" Canvas.Left="70" Canvas.Top="60">
<Rectangle Stroke="Black"
Height="40" Width="50" RadiusX="5" RadiusY="5">
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">PAUSE</TextBlock>
</Canvas>
<Canvas MouseLeftButtonDown="animeStart" Canvas.Left="130" Canvas.Top="60">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="40" Width="50">
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">START</TextBlock>
</Canvas>
JavaScript
function animeStart(sender, args)
{
sender.findName("animation").begin();
}
function animePause(sender, args)
{
sender.findName("animation").pause();
}
function animeStop(sender, args)
{
sender.findName("animation").stop();
}
• Silverlightのオブジェクト、メソッド、プロパティにつ
いては、以下のドキュメントを参照のこと
『Silverlight Reference』
http://msdn2.microsoft.com/en-us/library/bb188567.aspx
Silverlight1.0
アプリケーション開発
3．Silverlightと
JavaScriptとの連携
Silverlightアプリケーション開発手順
Silverlightアプリケーションのイベントの取得
Silverlightアプリケーションのイベントは、XAMLの属性を
使用してJavaScriptのイベントハンドラを割り当てることができる
XAML
<Ellipse x:Name="elipse1“
MouseLeftButtonDown=“elipse1_onClick”
Height=“100"
Width=“100“
Stroke=“Black”
StrokeThickness=“5”
Canvas.Left="30"
Canvas.Top="30“
Fill="Green"/>
JavaScript
function elipse1_onClick(sender, args)
{
alert(sender.Name + “がクリックされ
ました。”);
}
Silverlightアプリケーション開発手順
Silverlightアプリケーションのイベントの取得
イベントハンドラの引数は共通で、常に、senderとargs
引数senderを使用してイベントの発生元オブジェクトにアクセス可能
XAML
<Ellipse x:Name="elipse1“
MouseLeftButtonDown=“elipse1_onClick”
Height=“100"
Width=“100“
Stroke=“Black”
StrokeThickness=“5”
Canvas.Left="30"
Canvas.Top="30“
Fill="Green"/>
JavaScript
function elipse1_onClick(sender, args)
{
alert(sender.Name + “がクリックされ
ました。”);
sender.Fill=“Red”;
}
Silverlightアプリケーション開発手順
JavaScriptからSilverlightへのアクセス
JavaScriptからSilverlightアプリケーション内のオブジェクトに
アクセスするには、getElementByIdメソッドを使用する
getElementByIdメソッドの引数は、createSilverlight()関数で指定した
SilverlightオブジェクトのID（例えば、”SilverlightControl”）
JavaScript
function ClickMe()
{
var agCtrl=document.getElementById(“SilverlightControl”);
agCtrl.content.findName(“elipse1”).fill=“yellow”;
}
Silverlight 1.0
アプリケーション開発
4．Expression Encoder
を使用した動画配信
アプリケーションの
作成（カスタマイズ）
Silverlight アプリケーションを効率良く
開発するには
• Expression Studio、Visual Studioなどの開発
ツールを使用
• 開発ツールにより自動生成するコードをカスタ
マイズ
• 公開されているサンプルアプリケーションをカ
スタマイズして使用
Visual Studio
動画配信アプリの作成（カスタマイズ）
作成手順
1. Expression Encoderの入手
2. 動画素材の準備
3. Expression Encoderによる作業
“Media Content”ウィンドウの”Import”ボタンをクリック、メディアファイルを指定
“Metadata”タブを選択、チャプターを設定したい位置にビデオのタイムラインを合わせる
“Markers”ウィンドウ内の”Add”ボタンをクリック、作成されたMarkerの”Value”をわかりやすい名前に置き換える
サムネイル画像が必要な場合は、”Thumbnail”フィールドをチェックする
“Output”タブを選択し、同タブ内の”Thumbnail”ウィンドウ内でサムネイルに使用する画像として”1st Frame”を選択
“Job Output”ウィンドウの”Template”ドロップダウンリストから”Expression (Silverlight RC)”（任意のもの）を選択
“Encode”ボタンをクリックしてエンコード開始、結果として、動画配信アプリケーションが作成される
C:\Users\<UserName>\Documents\Expression\Expression Encoder\Output\<HOST NAME> 2007-11-03 21.09.27\Default.html
4. デザインを変更したい場合は、player.xamlをオープンしてデザイン
を変更
5. 再生するwmvファイル、チャプターなどの変更は、StartPlayer.js内
のget_mediainfo関数の内容を変更する
※直接、Expression EncoderからSilverlight Streamingに発行可能
Silverlight 1.0
アプリケーション開発
5．Page Turnサンプル
アプリケーションの利用
（カスタマイズ）
http://silverlight.net/themes/silverlight/community/gallerydetail.aspx?cat=3
PageTurnサンプルアプリのカスタマイズ
作成手順
1. Page Turnサンプル（プロジェクト）の入手
2. 入手したサンプルプロジェクトのdefault.htm.js内のcreateSilverlight関数を以下の
ように記述しなおす
function createSilverlight()
{
var scene=new PageTurn(18);
Silverlight.createObjectEx({
source: “xaml/scene.xaml”,
parentElement: document.getElementById(“SilverlightControlHost”),
id: “SilverlightControl”,
properties: {
width: “900”,
height: “740”,
version: “1.0”
background: “black”
},
events: {
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
}
});
}
3. Webサーバに配置し、動作確認
PageTurnサンプルアプリのカスタマイズ
カスタマイズ方法
１. 表示したい画像ファイルを準備する。ファイル名は、page数字.jpg
とする。
表紙は“SilverlightBackgroundLight.jpg”、裏表紙は
“SilverlightBackgroundDark.jpg”とする。
２．default.htm.jsのcreateSilverlight関数内で以下を用意した画像数
（ページ数）にあわせて変更
var scene = new PageTurn(使用するページ数);
３. pageGenerator.jsのPageGenerator定義内のfor文の初期値を1に変更
する
for (var i=1; i <= this.numPages; i++)
４. Webサーバに配置し、動作確認

Download Report