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

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

[松原晋啓,@IT]

「Hello! Silverlight」をもう1度

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

図4 Silverlight 1.0の「Hello Wolrd!!」サンプル 図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アプリケーションを企業内でどのように配布するかを紹介します。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。