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

Microsoft MVP
松原晋啓
2007/9/7

編集部注：具体的なSilverlightアプリケーションの開発の仕方について詳しく知りたい読者は、本稿と併せて連載「.NETを知らない人でも分かるSilverlight入門」や連載「Silverlight 2で.NET技術をカッコよく使おう」もご参照ください。また、最新版のSilverlight 3に関しては、記事「Silverlight 3、ここがすごい！」をご参照ください。

いまこそ知りたい、“Silverlight”って何？

　Silverlightは、マイクロソフトによって開発されたクロスブラウザ（※1）・クロスプラットフォーム（※2）・高度なメディアエクスペリエンスや RIA（Rich Interactive Application）を実現する、軽量なWebブラウザ・プラグインのアプリケーションです。つい先日（2007年9月5日）にバージョン1.0が正式リリースされました（「MS、Flash対抗「Silverlight」を正式リリース〜Linux版も提供〜」）。

　Windows Vistaで使われているWindows用のプレゼンテーション・サブシステム、「WPF（Windows Presentation Foundation）」のサブセットとして開発された（「Silverlight」以前の名前は「WPF/E（Windows Presentation Foundation/Everywhere）」）ため、「XAML（Extensible Application Markup Language）：ザムル」というXMLをベースとしたプレゼンテーション記述用のマークアップ言語を媒介に、開発者とデザイナーがそれぞれの使い慣れたツールを使用して完全に分業できます（※3）。

※1：Internet Explorer 6／7、Firefox 1.5以上、Safariに対応
※2：Windows OS、MacOS Xに対応。Linux向けには「Moonｌight」という名称になる。今後、Windows Mobileにも対応予定
※3：ツールに関しては開発者向け「Visual Studio 2008」（2007年中、出荷予定）やデザイナー向け「Expression Blend 2」（出荷日未定）のリリースを待つ必要がある

図1　マイクロソフトのSilverlightサイト

■ Silverlightは2種類ある

　なお、Silverlightには、JavaScriptしか扱えない「Silverlight 1.0」とDLR（Dynamics Language Runtime）やCLR（Common Language Runtime）を組み込み、JavaScriptだけでなく.NETや動的言語を扱うことを可能とした「Silverlight 1.1」が存在しますが、JavaScriptのみで考えた場合、どちらも変わりがありませんので、ここではすでに正式版がリリースされているSilverlight 1.0を対象とします。

編集部注：その後「Silverlight1.1」は「Silverlight 2」に名称を変更しました。Silverlight 2について詳しく知りたい読者は、連載「Silverlight 2で.NET技術をカッコよく使おう」をご参照ください（2008年10月16日）。

　Silverlight 1.0のアプリケーションを動かすには、Siverlightのランタイム環境（Webブラウザ・プラグイン）が必要です。しかし、それ以外はHTMLとJavaScriptしか使わないので、本稿ではSilverlight1.0をJavaScriptフレームワークとしてとらえながら、解説していこうと思います。

まずは体験！ Hello Silverlight !!

　取りあえず、そのSilverlight 1.0で動きのある「Hello World!!」を表示させるサンプルを紹介します。Silverlightアプリケーションはどういうものなのか、実際に動いているサンプルを見て体験してみてください。

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

　サンプルのソースコードはこちらからダウンロードできるようになっています。ソースコードの解説は後述します。

Silverlight 1.0の特徴

■ 軽量なランタイムと簡単なインストール

　ランタイムは主要な Webブラウザに対応し、ダウンロードサイズも1.2Mbytes以下と軽量。未インストールの場合はインストールサイトへの誘導も行うため、手軽にインストールできます。

■ WindowsとMacintoshで共通のエクスペリエンスの実現

　動作環境としてWindowsとMacintoshのどちらにも対応しているため、変更を行うことなくSilverlightの性能をフルに発揮し、高度なエクスペリエンスを共有できます（Linux向けには「Moonｌight」という名前で今後リリースする予定）。

■ ベクターベースのグラフィック

　グラフィックはベクターベースであるため、任意のサイズへの拡大／縮小可能ですし、多彩で柔軟性の高いグラフィックを表現できます。今回用意したサンプルは画像ファイルをいっさい使っていません。

■ 統合的なメディア形式

　WMV（Windows Media Video）、SMPTE（Society of Motion Picture and Television Engineers）、VC-1、WMA（Windows Media Audio）、MP3 Audioをサポートする統合的なメディア形式により、高精細（HD）からモバイルまで幅広く対応しています。

　さらに、ブロードキャスト型オーバーレイを統合することで、品質を損なうことなく、滑らかなビデオやアニメーションを使った配信が可能になります。

■ 既存のWebテクノロジーとの容易な連携

　JavaScriptをベースとしているため、既存の技術（XHTML、Ajax、Java、PHP、Apacheなど）との連携も容易に行えます。

　また、JSON、RSS、POX、RESTなどの共通プロトコルやLINQ（Language Integrated Query）もサポートしているため、Webサービスやマッシュアップともシームレスに連携します。

編集部注：LINQについて詳しく知りたい読者は、「C#設計者が語る5年後のプログラミング」をご参照ください。

■ 検索エンジンとの連動

　インターフェイスやコンテンツがすべてXMLベースのXAMLで記述されているため、インデックス化や検索エンジンへの最適化（SEO）が容易です。

XAMLって何ざむるか？

　XAMLとは、拡張子は「.xaml」となるマイクロソフトが提供するXMLをベースとしたプレゼンテーション記述用のマークアップ言語です。XAMLは「WPF」と「Silverlight」で使用される言語ですが、WPFとSilverlight間でXAMLの互換性はありません（後述の「できること←【Silverlight】→できないこと」参照）。

■ XAMLでできること

　XAMLには従来のXML＋XSLTのWebページのように外観やボタンなどのコントロールの配置を設定できますが、ベクターグラフィックによる描画やメディア、アニメーションなどの動画像や3Dグラフィックなども記述できます。

■ XAMLの記述例

　Silverlightで「Hello World!!」を単純に表示する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" >     <TextBlock         x:Name="textBlock"         Width="304"         Height="51"         Text="Hello World!!" >     </TextBlock> </Canvas>

　トップレベルに<Canvas>タグを定義し、その中に名前空間の指定をします。同時に、Silverlightアプリケーション表示エリアのサイズを指定し、バックグラウンドの指定もここで行います。後は、HTMLやXMLと同様に<Canvas>タグ内にコンテンツの定義を行っていきます。

■ XAMLを使うメリット

　XAMLはUIの記述を容易にするというメリットがありますが、それ以外に最大のメリットとしては、UIデザインをアプリケーションロジックから完全に分離したことで、開発者とデザイナーの完全な分業が可能となったことにあります。

　従来は、例えばプロジェクトマネージャがユーザーから要件定義を行って画面の構成案をExcelやVisio などの描画ソフトで作成し、それを受け取ったデザイナーがPhotoshopやIllustratorなどのデザインソフトでUIをデザインし、その画像ファイルを開発者が参考にして開発ソフトで実際に画面をプログラミングしていました。

　ここでは、2回UIデザインの引き渡しが発生しておりますが、従来は各自で使用しているツールが異なるため、うまく引き渡すことができない状況が発生することが多々ありました。しかし、XAMLを使用することで、UIデザイン部分のみを同じファイルで引き渡すことができ、プログラミング中に修正が発生した場合にもUIデザイン部分のみを再度デザイナーに引き渡して手軽に修正を行うことができます。

■ 新たな電子文書フォーマット、XPSとは？

　また、XAMLにはサブセットとしてプラットフォームに依存しない電子文書フォーマットである 「XPS（XML Paper Specification）」が存在します。XPSはOffice 2007やWindows Vistaには統合されていますが、プラットフォームには依存しないため、単独でも使用できます。

　次のページでは、Silverlightで作成した2つ目のサンプルを見ながら、Silverlightのアーキテクチャと処理フローなどを紹介します。

1-2-3

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

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

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