Silverlightをはじめてみよう

本稿のサンプルを実行するには、ブラウザにSilverlightのプラグインがインストールされていなければなりません。先に、次のサイトに移動してSilverlightがインストールされているかどうかを確認してください。

MicrosoftのSilverlightインストール確認サイト

インストールされていた場合には図のように表示される

インストールされている場合は「Thank you for installing Microsoft Silverlight 1.0 Release Candidate!」という文字が表示されますが、インストールされていない場合は「Install Now」ボタンが表示されるので、Silverlightをダウンロードしてインストールしてください。Silverlightは、Flashと同様にHTML文書内にobject要素を用いて組み込むことが可能です。MicrosoftはSilverlightアプリケーションやコンテンツの開発・デザインにVisual StudioやExpressionを推奨していますが、簡単なサンプルだけであればテキストエディタだけでも十分に体験できます。基礎的な学習はテキストエディタで進め、本格的な開発やデザインに取り組む場合に製品の購入を検討することができます。

Silverlightアプリケーションは、グラフィックスやアニメーションなどの構造を定義するXAMLと呼ばれるデータ記述言語を利用します。XAMLはXMLベースの言語なのでHTMLのようにタグを使ってデータの構造を記述できますが、エラーには厳しいので、大文字と小文字の違いやタグの閉じ忘れなどに注意が必要となります。まず、簡単なSilverlightによるグラフィックスを表示するためにXAMLファイルを記述します。通常XAMLファイルの拡張子は.XAMLになります。XAMLファイルを作成して、テキストエディタで次のように編集してください。

サンプル01 text.xaml

<TextBlock
 xmlns="http://schemas.microsoft.com/client/2007"
 FontSize="20"
>
 Kitty on your lap
</TextBlock>

サンプル01のtext.xamlがSilverlightで表示可能なデータです。テキストを表示するだけの単純なXAMLファイルです。ルートのTextBlock要素は、比較的短い行数のテキストを中心としたコンテンツを表示するための要素です。MSDN(Microsoftの開発者向けサービス)には要素が定義されています。(参照サイト)

XAMLで記述したTextBlock要素は、Silverlightに読み込まれTextBlockオブジェクトとして表示されます。生成されたオブジェクトは、一般的なオブジェクト指向システムと同じように、プロパティやメソッド、イベントなどを保有しています。これを操作するのはスクリプトの役割となります。

この場では、Silverlightを表示するまでを目的とするためスクリプトは省略します。上記のサンプルをHTMLファイルに組み込んで表示させるには、HTMLファイルのbody要素内のSilverlightを表示させたい任意の場所に、次のようなobject要素を指定します。

<object type="application/x-silverlight" width="400" height="300">
    <param name="source" value="test.xaml" />
</object>

type パラメータにはHTML文書に埋め込むデータのMIMEタイプを指定します。Silverlightを表示する場合は、常に"application/x-silverlight"を指定することになります。ベータ版のSilverlightでは"application/ag-plugin"が使われていましたが、Release Candidate以降では"application/x-silverlight"に変更されているので注意してください。param要素のname属性に指定している値"source"は、表示するXAMLデータのアドレスを指定するパラメータであることを表します。value属性に指定している値"test.xaml"が表示するXAMLファイルの名前です。

サンプル 01 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Silverlight test</title>
 </head>

 <body>
  <object type="application/x-silverlight" width="400" height="300">
   <param name="source" value="test.xaml" />
  </object>
 </body>
</html>

サンプルを表示する

サンプル01のtest.xamlファイルとtest.htmlファイルは、同じディレクトリに配置してください。上記のサンプルをブラウザで表示するには、正しくSilverlight 1.0がインストールされていなければなりません。本稿執筆時にはSilverlight 1.0 Release Candidateをインストールし、Internet Explorer 7 で動作確認しています。それ以外のバージョンでは、適切に表示できないことがあるのでご了承ください。

XAMLファイルのTextBlock要素内に書いたテキストが表示される

XAMLファイルのTextBlock要素内に書いたテキストが表示されれば成功です。Silverlight 1.0 Release Candidate では日本語フォントが入っていないため非英語圏の言語を表示することはできませんが、正式版ではサポートされる予定です。