ついに正式リリース! いまこそ知りたい!!
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を定義し、使用するJavaScriptファイル(Silverlight.js、Default_html.js、Page.xaml.js)のインクルードを行っています。そして、<body>タグ内にSilverlightアプリケーションを表示させる領域を<div>タグで指定し、その中でSilverlightアプリケーションオブジェクトを生成する関数を呼び出しています(呼び出しロジックは決まり文句なので、コピー&ペーストで使い回しが可能です)。
■ Silverlightオブジェクトの作成を記述:Default_html.js
次に、先ほどのHTMLページで定義したSilverlightアプリケーションオブジェクト生成関数内のロジックを記述します。
function createSilverlight() |
ここのロジックもほぼコピー&ペーストで使用できます。注意すべき点は、「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 |
ここでは、前述の「XAMLって何ざむるか?」でのXAMLファイルのサンプルと同様にテキストブロックを使用して「Hello World!!」を描画しています。ただし、ここではフォントサイズやフォントファミリーの指定、グラディエントを使用した文字色の設定を行っております。
加えて、ストーリーボードを使って 「Hello World!!」を左上から回転しながら2秒で右真ん中へ移動し、さらに2秒で逆回転しながら左下に動き、0.5秒で左上に戻るという単純なアニメーションを追加しております。
■ アプリケーションにおけるイベントハンドラPage.xaml.js
当サンプルはイベントハンドリングを行っていない単純なサンプルなので、当ファイルを編集する必要はありません。もし、イベントハンドリングを追加する場合は、対象のオブジェクトにJavaScriptのようにイベントアクション(MouseLeftButtonDownなど)を使用して対象のイベント関数を指定します。例えば、下記のようにソースコードを指定します。
<TextBlock x:Name="textBlock" Width="304" Height="51" |
これで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 |
INDEX | ||
ついに正式リリース! いまこそ知りたい!! Silverlightは次世代のJavaScriptフレームワーク? |
||
Page1 いまこそ知りたい、“Silverlight”って何? まずは体験! Hello Silverlight !! Silverlight 1.0の特徴 XAMLって何ざむるか? |
||
Page2 そもそも、RIAって何だっけ? できること←【Silverlight】→できないこと Silverlightのアーキテクチャと処理フロー |
||
Page3 Silverlightのソースコードを見てみよう Siverlightは.NET未開発者にこそオススメ |
リッチクライアント&帳票 全記事一覧へ |
- 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データの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|