ついに正式リリース！いまこそ知りたい!!
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!!」サンプル（冒頭のものを再掲）（画像をクリックするとサンプルが動きます。サンプルを動かすには、事前にランタイムのインストールが必要です。→ダウンロードページ）

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 フォーラム新着記事

GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
　資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する
GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
　HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】
PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
　素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】
Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
　Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日月間

＠IT

ついに正式リリース！いまこそ知りたい!!
Silverlightは次世代のJavaScriptフレームワーク？

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

■ スタートページ：Default.html

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

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

■ 描画やイベントを定義：Page.xaml

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

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

■ ＠IT関連記事

注目のテーマ

HTML5＋UX 記事ランキング

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】

ついに正式リリース！ いまこそ知りたい!! Silverlightは次世代のJavaScriptフレームワーク？

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

■ スタートページ：Default.html

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

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

■ 描画やイベントを定義：Page.xaml

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

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

■ ＠IT関連記事

注目のテーマ

HTML5＋UX 記事ランキング

転職／派遣情報を探す

年収６００万円！エンジニア向けの求人満載。転職希望者必見

エンジニアの転職なら【転職サーチ】

ついに正式リリース！いまこそ知りたい!!
Silverlightは次世代のJavaScriptフレームワーク？