Silverlight開発を始めるための基礎知識：.NETを知らない人でも分かるSilverlight入門（1）（2/3 ページ）

» 2007年11月19日 00時00分公開

「Hello! Silverlight」をもう1度

　それでは、Silverlightのサンプルアプリケーションを詳しく解説していきましょう。ここで使用するサンプルは、特集記事「Silverlightは次世代のJavaScriptフレームワーク？」で紹介したHello Worldサンプルを使用します。

図4　Silverlight 1.0の「Hello Wolrd!!」サンプル（画像をクリックするとサンプルが動きます。サンプルを動かすには、事前にランタイムのインストールが必要です。→ダウンロードページ）

　サンプルのソースコードはこちらからダウンロードできるようになっています。Silverlightアプリケーションのファイル構成は特集記事でも説明したとおりですので、ここではソースコードを個別に詳しく解説していきたいと思います。なお、スタートページであるDefault.htmlに関しては決まり文句ですので、割愛します。

■ Silverlightオブジェクト生成を行うDefault_html.js

　まずは、Silverlightオブジェクトの作成を行っているロジックから見ていきましょう。

function createSilverlight()

                {

                    var scene = new Hello_World.Page();

                    Silverlight.createObjectEx({

                        source: "Page.xaml",  // XAMLファイルの定義

                        parentElement:document.getElementById

                            ("SilverlightControlHost"),  // 親要素の定義

                        id: "SilverlightControl",  // 当オブジェクトのID

                        properties: {

                            width: "100%",  // 表示領域の横幅

                            height: "100%",  // 表示領域の縦幅

                            version: "1.0"  // Silverlightのバージョン

                        },

                        events: {

                            onLoad:Silverlight.createDelegate(scene,scene.handleLoad)

                        }

                    });

                }

　ここでは、Silverlightオブジェクト作成関数であるcreateObject関数やcreateObjectEx関数を使用して、Silverlightオブジェクトの作成を行っております。処理としてはそれだけですが、その際にいくつかのパラメータの設定を行う必要があります。

■ Silverlightオブジェクト生成関数用のパラメータ

　createObject関数やcreateObjectEx関数には、主なものとして以下の表1のようなパラメータがありますので、参考にして設定してください。

**表1　Silverlightオブジェクト生成パラメータ**
	パラメータ	概要
	source	XAMLのURLを指定
	parentElement	Silverlightオブジェクトの親要素に当たるHTML要素のIDを指定
	id	SilverlightオブジェクトのユニークなIDを指定。このIDを指定することでHTMLからSilverlightオブジェクトへアクセスすることが可能
	properties	Silverlightオブジェクトのための初期プロパティを設定。配列形式で複数の指定が可能（表2参照）
	events	初回に実行するコントロールイベントを指定。指定可能なイベントは、“onLoad”か“onError”のみ
	initParams	ユーザー定義の初期パラメータを指定
	context	onLoadイベントハンドラへ渡すことのできるユニークなIDを指定

**表2　Silverlightオブジェクトの初期プロパティ**
プロパティ	概要	デフォルト値
width	幅を指定。HTMLタグのwidthプロパティに相当	0
height	高さを指定。HTMLタグのheightプロパティに相当	0
background	背景色を指定。SilverlightオブジェクトのSettings.Backgroundプロパティに相当	null（＝白）
isWindowless	ウィンドウレス・コントロールとして表示するかを指定。SilverlightオブジェクトのSettings.Windowlessプロパティに相当	false
frameRate	コントロールをレンダリングするフレーム毎秒の最大値を指定	24（最大値は64フレーム毎秒）
inplaceInstallPrompt	SilverlightプラグインがWebブラウザにインストールされていなかった場合、インプレースインストールプロンプトを表示するかを指定（標準インストールプロンプトがソフトウェアライセンス条項の画面を必ず表示してインストールを行うのに対して、インプレースインストールプロンプトはダイレクトにインストールできる点が異なる）	false
version	Silverlightオブジェクトを実行するために必要とする最小のバージョンを指定	なし
ignoreBrowserVer	実行するWebブラウザのタイプやバージョンの確認を無視するか指定	false（＝無視しない）
enableHtmlAccess	コンテンツがHTMLのコンテンツへアクセスすることを許可するか指定。SilverlightオブジェクトのSettings.EnableHtmlAccessプロパティに相当	true（＝許可する）

■ Silverlghtの中心となるXAMLを記述したPage.xaml

　次に解説するのは、Silverlightのコアとなる画面を生成しているXAMLコードになります。

<Canvas

                  xmlns="http://schemas.microsoft.com/client/2007"

                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                  Width="490" Height="350" Background="White"x:Name="Page"

                >

                <Canvas.Triggers>

                  <EventTrigger RoutedEvent="Canvas.Loaded">

                    <BeginStoryboard>

                      <Storyboard x:Name="Timeline1">

                        <DoubleAnimationUsingKeyFrames 

                          BeginTime="00:00:00" Storyboard.TargetName="textBlock" 

                          Storyboard.TargetProperty="(UIElement.RenderTransform).

                (TransformGroup.Children)[3].(TranslateTransform.X)"

                        >

                          <SplineDoubleKeyFrame KeyTime="00:00:02" Value="186"/>

                          <SplineDoubleKeyFrame KeyTime="00:00:04" Value="1"/>

                          <SplineDoubleKeyFrame KeyTime="00:00:04.5000000"

                            Value="1"/>

                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames 

                          BeginTime="00:00:00" Storyboard.TargetName="textBlock"

                          Storyboard.TargetProperty="(UIElement.RenderTransform).

                (TransformGroup.Children)[3].(TranslateTransform.Y)"

                        >

                          <SplineDoubleKeyFrame KeyTime="00:00:02" Value="149"/>

                          <SplineDoubleKeyFrame KeyTime="00:00:04" Value="299"/>

                          <SplineDoubleKeyFrame KeyTime="00:00:04.5000000" 

                            Value="1"/>

                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames 

                          BeginTime="00:00:00" Storyboard.TargetName="textBlock" 

                          Storyboard.TargetProperty="(UIElement.RenderTransform).

                (TransformGroup.Children)[2].(RotateTransform.Angle)"

                        >

                          <SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>

                          <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0"/>

                        </DoubleAnimationUsingKeyFrames>

                      </Storyboard>

                    </BeginStoryboard>

                  </EventTrigger>

                </Canvas.Triggers>

                <TextBlock 

                  x:Name="textBlock" Width="304" Height="51" TextWrapping="Wrap" 

                  FontFamily="Arial" FontSize="48" FontWeight="Bold" 

                  Text="Hello World!!" RenderTransformOrigin="0.5,0.5"

                >

                  <TextBlock.Foreground>

                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                      <GradientStop Color="#FFFF1900" Offset="0"/>

                      <GradientStop Color="#FF001EFF" Offset="1"/>

                    </LinearGradientBrush>

                  </TextBlock.Foreground>

                  <TextBlock.RenderTransform>

                    <TransformGroup>

                      <ScaleTransform ScaleX="1" ScaleY="1"/>

                      <SkewTransform AngleX="0" AngleY="0"/>

                      <RotateTransform Angle="0"/>

                      <TranslateTransform X="0" Y="0"/>

                    </TransformGroup>

                  </TextBlock.RenderTransform>

                </TextBlock>

                </Canvas>

　SilverlightにおいてXAMLコードがアプリケーションの中心となりますので、ここでは基礎的な定義と初歩的な<TextBlock>タグについて解説します。なお、当サンプルでは、アニメーション、イベント（Page.xaml.jsも含む）、グラデーションなどを使用しておりますが、これらについては連載の中で詳しく説明していきます。

■ SilverlightにおけるXAMLのルート要素となる<Canvas>タグ

　SilverlightにおけるXAMLは、必ずルート要素に<Canvas>タグを使用します。WPF（Windows Presentation Foundation）には、Windowsアプリケーション用の<Window>タグ、XAMLブラウザアプリケーション用の<Page>タグがありますが、Silverlightでは、常にHTMLページの一部の領域を使用するため、領域を指定する<Canvas>タグになります。

　ルート要素には名前空間の指定が必要ですので、以下の定義を必ず追加しなければなりません。

xmlns=”http://schemas.microsoft.com/client/2007”
デフォルトSilverlight名前空間
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
XAML名前空間

　この名前空間の指定以外は通常のタグと同様の指定方法になります。<Canvas>タグで指定可能なプロパティ、メソッド、イベントは表3にまとめましたが、その前にプロパティ、メソッド、イベントの指定方法について簡単に説明します。

■ <Canvas>タグで指定できるプロパティ

　プロパティの指定方法には3つあります。

1.　タグ内にHTMLのように指定（主に値を指定する際に使用）

<Canvas width=”100” />

2.　子要素として定義して指定（主にオブジェクトを指定する際に使用）

<Canvas >

                        <Canvas.Triggers>

                          <EventTrigger RoutedEvent=”Canvas.Loaded”>

                      

                      …（略）… 

                      

                          </EventTrigger>

                        </Canvas.Triggers>

                      </Canvas>

3.　ロジックにて指定

canvas.setValue("width",100);

もしくは、

canvas.width = 100;

■ <Canvas>タグで指定できるメソッド

　メソッドはロジックから使用するのみです。

var width = canvas.getValue(“width”);

■ <Canvas>タグで指定できるイベント

1.　タグ内にHTMLのように指定

<Canvas Loaded=”onLoaded” />

2.　ロジックにて追加

canvas.addEventListener(“Loaded”, “onLoaded”);

**表3　<Canvas>タグリファレンス**
	項目	タグ
	プロパティ	Background, Canvas.Left、Canvas.Top、Canvas.ZIndex、Children、Clip、Cursor、Height、IsHitTestVisible、Name、Opacity、OpacityMask、RenderTransform、RenderTransformOrigin、Resources、Triggers、Visibility、Width
	メソッド	AddEventListener、CaptureMouse、FindName、GetHost、GetParent、GetValue、ReleaseMouseCapture、RemoveEventListener、SetValue
	イベント	GetFocus、KeyDown、KeyUp、Loaded、LostFocus、MouseEnter、MouseLeave、MouseLeftButtonDown、MouseLeftButtonUp、MouseMove

■ Silverlightのテキストを表現する<TextBlock>タグ

　Silverlightで単数行テキストや複数行テキスト、マルチフォーマットテキストなどを表示するためには、軽量なオブジェクトである<TextBlock>タグを使用します。

　使用方法としては、表示したいテキストをTextプロパティに指定するか、<TextBlock>タグで囲うだけです。<TextBlock>タグも同様に、指定可能なプロパティ、メソッド、イベントを表4にまとめましたので、参考にしてください。

**表4　タグリファレンス**
	項目	タグ
	プロパティ	ActualHeight、ActualWidth、Canvas.Left、Canvas.Top、Canvas.ZIndex、Clip、Cursor、FontFamily、FontSize、FontStretch、FontStyle、FontWeight、Foreground、Height、Name、Opacity、OpacityMask、RenderTransform、RenderTransformOrigin、Resources、Text、TextDecorations、TextWrapping、Triggers、Visibility、Width
	メソッド	AddEventListener、CaptureMouse、FindName、GetHost、GetParent、GetValue、ReleaseMouseCapture、RemoveEventListener、SetFontSource、SetValue
	イベント	なし

コラム　「JavaScriptを使わなくとも、Silverlightオブジェクトの生成はできる」

Silverlightオブジェクトの生成は、基本的にJavaScriptを使用して行われますが、JavaScriptを使用せずにHTMLの<object>タグや<embed>タグを使用して行うこともできます。サンプルをこれらで指定すると、以下のようになります。

・<object>タグ

<object

                          type="application/ag-plugin" id="SilverlightControl"

                          width="100%" height="100%">

                          <param  name="onLoad"      value="Silverlight.createDelegate(scene,scene.handleLoad)"    />

                          <param  name="source"  value="Page.xaml"  />

                        </object>

・<embed>タグ

<embed

                          type="application/ag-plugin" id="SilverlightControl"

                          width="100%" height="100%">

                          onLoad="Silverlight.createDelegate(scene,scene.handleLoad)"

                          source="Page.xaml"

                        />

　次のページでは、実際に作成したSilverlightアプリケーションを企業内でどのように配布するかを紹介します。

企業におけるSilverlightの配布

前のページへ 1|2|3 次のページへ