ついに正式リリース! いまこそ知りたい!!

Silverlightは次世代のJavaScriptフレームワーク?


Microsoft MVP
松原晋啓
2007/9/7


Silverlightのソースコードを見てみよう

 ここでは、冒頭のサンプルのソースコードを解説します。

スタートページ:Default.html

 最初は、Silverlightアプリケーションを表示させるページを作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="Default_html.js"></script>
    <script type="text/javascript" src="Page.xaml.js"></script>
</head>
<body>
    <div id="SilverlightControlHost">
    <script type="text/javascript">
        createSilverlight();
    </script>
    </div>
</body>
</html>

 ここでは通常のHTMLを定義し、使用するJavaScriptファイル(Silverlight.js、Default_html.js、Page.xaml.js)のインクルードを行っています。そして、<body>タグ内にSilverlightアプリケーションを表示させる領域を<div>タグで指定し、その中でSilverlightアプリケーションオブジェクトを生成する関数を呼び出しています(呼び出しロジックは決まり文句なので、コピー&ペーストで使い回しが可能です)。

Silverlightオブジェクトの作成を記述:Default_html.js

 次に、先ほどのHTMLページで定義した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)
        }
    });
}

if (!window.Silverlight) window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
    return function() {
        return method.apply(instance, arguments);
    }
}

 ここのロジックもほぼコピー&ペーストで使用できます。注意すべき点は、「Silverlight.createObjectEx 関数」の引数の指定のみです。ここで指定している内容は以下のとおりです。

  • source:XAMLファイル名を指定
  • parentElement:親要素を指定(ここでの親要素は<div>タグなので、<div>タグに定義したIDを指定)
  • id:ここで生成するSilverlightアプリケーションオブジェクトのIDを定義
  • properties:Silverlightアプリケーションのサイズや背景色などを指定(ここでは、横幅・縦幅・バージョンを指定)。なお、バージョンの指定は必須
  • events:Silverlightアプリケーションオブジェクト生成時に発生させるイベントを定義(イベントを発生させない場合は不要)

Silverlightアプリケーションのコアモジュール:Silverlight.js

 このファイルはSilverlight 1.0 SDKになります。ダウンロードサイトよりダウンロードして使用してください。

描画やイベントを定義: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>

 ここでは、前述の「XAMLって何ざむるか?」でのXAMLファイルのサンプルと同様にテキストブロックを使用して「Hello World!!」を描画しています。ただし、ここではフォントサイズやフォントファミリーの指定、グラディエントを使用した文字色の設定を行っております。

 加えて、ストーリーボードを使って 「Hello World!!」を左上から回転しながら2秒で右真ん中へ移動し、さらに2秒で逆回転しながら左下に動き、0.5秒で左上に戻るという単純なアニメーションを追加しております。

アプリケーションにおけるイベントハンドラPage.xaml.js

 当サンプルはイベントハンドリングを行っていない単純なサンプルなので、当ファイルを編集する必要はありません。もし、イベントハンドリングを追加する場合は、対象のオブジェクトにJavaScriptのようにイベントアクション(MouseLeftButtonDownなど)を使用して対象のイベント関数を指定します。例えば、下記のようにソースコードを指定します。

<TextBlock x:Name="textBlock" Width="304" Height="51"
    Text="Hello World!!" MouseLeftButtonDown=”click_event”>
</TextBlock>

 これでSilverlightアプリケーションの作成が完了しました。実際に、Default.htmlを実行すると、以下のようになります。

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

Siverlightは.NET未開発者にこそオススメ

 ここまで見て分かるとおり、Silverlight 1.0のアプリケーションはXAMLを除けばHTMLとJavaScriptしか使用してませんし、HTMLで標準的に組み込む形で使用できるため、標準技術との親和性が非常に高いことが分かったと思います。

 一般的には、Silverlightは.NETや動的言語がメインと考えられておりますが、JavaScriptやAjaxのみで作成されている場合にも活用でき、その可能性を広げる技術であることがうかがえます。

 また、テキストベースであるため、テキストエディタでも作成できますので、手軽にアプリケーションに組み込むこともできます。ぜひとも、Silverlight 1.0 SDKをダウンロードし、JavaScriptアプリケーションにおけるユーザーエクスペリエンスの向上に役立ててみてください。

 今回作成した「Hello World!!」 のサンプルはこちらからダウンロードできます。

@IT関連記事

.NETを知らない人でも分かるSilverlight入門
「マイクロソフトの技術は.NETを知らないと学習できないのでは?」という読者にこそ読んでもらいたい、リッチクライアント技術Silverlightの入門連載。 もちろん、知っている人も大歓迎!
Silverlight 2で.NET技術をカッコよく使おう
連載「.NETを知らない人でも分かるSilverlight入門」の続編のSilverlight 2入門連載です。Silverlightで.NET技術をよりカッコよく簡単に使えるRIAを作ってみましょう
Silverlightコントロールの「デザイン力」
Expression Blendで体験しよう 
Microsoft Expression Blend 2.5を使ったSilverlightコントロールのデザイン方法を学習しながら、その「デザイン力」を実感してみよう
リッチクライアント & 帳票」フ ォーラム 2008/7/24
Silverlight 2 RC(リリース候補版)が公開
連載:ScottGu氏のブログより(3)
 正式版を目前に控え、Silverlight 2のRC版が公開された。Beta2用アプリケーションの更新を目的とした開発者向けのみのリリースだ
Insider.NET」フォーラム 2008/9/29
直感で操作! 「Silverlight 2で業務アプリ」を考える
ジョイ・オブ・プログラミング:Silverlight 2
 Silverlight 2なら、直観的に操作できる使い勝手のよいビジネス・アプリを作れるのではないか? その可能性を考察する
Insider.NET」フォーラム 2008/9/2
Silverlightと株価ビジュアライゼーション
連載:Flash観測所(2) マイクロソフト発の新動画再生技術のSilverlightと、複雑な株価データを効果的に見せるFlashアプリサービスを紹介する
リッチクライアント & 帳票」フ ォーラム 2007/5/9
ブラウザの限界を超える「今」のリッチコンテンツ
Webオーサリングツールを使ってみよう(番外編) これまで2回にわたって紹介したWebオーサリングツールを離れてリッチコンテンツを取り巻く「今」の状況に注目しよう
リッチクライアント & 帳票」フ ォーラム 2007/5/22
デスクトップを制するのはApolloかWPF/Eか
WCR Watch(17) MicrosoftのWPFとAdobeのApolloが登場し、2007年のRIA市場で注目されるスタンドアロン型のリッチクライアントアプリに注目してみよう
リッチクライアント & 帳票」フォーラム 2007/1/12
“WPF/E”開発を体験してみよう!
Insider's Eye
 “WPF/E”実行エンジンが持つ機能と仕組みを概説し、Visual StudioやExpressionでのコンテンツ制作を実演する。さらにプログラミング・コードの流れを追ってみる
Insider.NET」フォーラム 2006/12/21
“WPF/E”vs. Adobe Flash、ガチンコ対決!
Insider's Eye
 Webサイトの表現力を飛躍的にリッチにする“WPF/E”。あのFlashに対立する技術だ。そのCTP版が試せるようになったので、まずはその力量をチェックしよう
Insider.NET」フォーラム 2006/12/14
WindowsアプリのUIはWPF+Blendでこう変わる
特集:Expression Blendで始めるWPFアプリ(後編)
 WPFの特徴は派手な3Dやアニメだけでない。Windowsフォームを全面的に刷新する次世代Windowsフレームワークだ
Insider.NET」フォーラム 2007/4/24
Vista時代のWindowsアプリ・デザイン・ツール
特集:Expression Blendで始めるWPFアプリ(前半)
 Vistaに搭載されているWPFにより、Windowsアプリケーションが大きく変わる。その設計ツールがExpression Blendだ
Insider.NET」フォーラム 2007/3/30

1-2-3

 INDEX
ついに正式リリース! いまこそ知りたい!!
Silverlightは次世代のJavaScriptフレームワーク? 
  Page1
いまこそ知りたい、“Silverlight”って何?
まずは体験! Hello Silverlight !!
Silverlight 1.0の特徴
XAMLって何ざむるか?
  Page2
そもそも、RIAって何だっけ?
できること←【Silverlight】→できないこと
Silverlightのアーキテクチャと処理フロー
Page3
Silverlightのソースコードを見てみよう
Siverlightは.NET未開発者にこそオススメ

リッチクライアント&帳票 全記事一覧へ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間