始めよう!Silverlight

第1回ようこそ、Silverlightの世界へ

Silverlightとは何か?

Silverlightとは一言で言ってしまえばWebブラウザのプラグインです。Webブラウザ上でよりリッチなアプリケーションや動画、音楽などのメディア体験を提供することができるRIA技術です。クロスプラットフォーム/クロスブラウザで動作し、WindowsはもちろんのことMac OS Xでも動作します。現在、RIAのためのプラグインとして幅広く利用されているものに、米アドビシステムズ社のFlash Playerがあります。そのFlashのアプリケーションを思い浮かべるのがイメージしやすいかと思います。

2種類のバージョン

現在、Silverlightには1.0と1.1Alphaの2種類のバージョンが存在します。1.0と1.1Alphaの大きな違いは開発するための言語にあります。1.0はすでに昨年の9月4日に正式にリリースされているバージョンで、JavaScriptで処理を記述します。1.1Alphaは1.0の機能に対して、CLRを組み込み、C#やVB、さらにはIronPythonなどの動的言語でも処理を記述できます。1.1Alphaはこの3月に2.0にバージョンを変えてベータ版が公開されることが発表されています。

この連載では、CLRでの開発がどうのようなものになるのかを体験していただくために、1.1Alphaでの開発も取り上げる予定です。

Silverlightの動作環境

前述したようにSilverlightはWindowsとMac OS Xの上で動作可能です。WindowsのバージョンはVistaもしくはXP SP2が対象で、ブラウザはIE6または7とFirefox1.5以上が対象になります。Macのバージョンは10.4.8以上で、ブラウザはSafari2.0.4以上とFirefox1.5以上が対象になります[1]⁠。

Linuxでの動作は対象外ですが、NovellとMicrosoftが提携してMoonlightというLinux版Silverlightを準備中とのことです。

プラグインの導入

では、さっそくSilverlightプラグインを導入します。下記のURLから対象となるプラットフォーム/バージョンを選択し、ダウンロードされたファイルを実行してSilverlightプラグインをインストールしてください。

本連載では上述したように1.1Alphaでの開発も取り上げます。しかし、1.1Alphaのプラグインは後からでもインストールできますので、今回は1.0のプラグインでも問題ありません。もちろん1.1Alphaをインストールしていただいても問題ありません。

インストール完了後、下記のURLにアクセスしてください。うまく表示されればプラグインの導入は成功です。

また、ショーケースとしてSilverlightを使用して作成された様々なサイトが登録されています。Silverlightを使ってどのようなものが作れるのか、実際に体験してみてください。

何はともあれ作ってみる

プラグインの導入も完了し動作の確認も行ったところで、いきなりですがSilverlightを表示するプログラムを作ってみましょう。多くの場合は、ここで開発環境の構築と称してSDKやVisualStudioなどのツール類の導入を行います。しかしSilverlightの場合は、プラグインが導入されていて後はコードさえあれば動作することが可能なので特別な開発環境は必要ありません。テキストエディタのみで開発が可能です。とはいっても、高度なものや複雑なものを作ろうとするとやはりテキストエディタだけでは不便なため、開発環境は必要になってきます。それら開発環境の説明と導入は今後の連載にて順次紹介していく予定です。

まず、以下のhtmlをテキストエディタで作成して、適当な名前で保存してください。

<html>
  <head>
    <title>Hello Silverlight</title>
  </head>
  <body>
    <object type="application/x-silverlight"
    width="200" height="200"> <!-- [1] -->
      <param name="background" value="#FF0000" /> <!-- [2] -->
    </object>
  </body>
</html>

保存したファイルをWebブラウザで開くと以下のように赤い四角が表示されていると思います。その赤い四角の部分がSilverlightです。右クリックするとコンテキストメニューで"Silverlight Configuration"と表示されます。

画像

[1]のobject要素のtype属性に"application/x-silverlight"と指定することで、その領域にSilverlightが表示されます。また赤色の背景色は[2]のparam要素のname属性に"background"で背景色の指定であることを設定し、value属性に"#FF0000"を指定することで赤色を設定しています。

これが最も最小のSilverlightです。これで皆さんもSilverlightの世界へ足を一歩踏み入れました。

Hello Silverlightを表示してみる

背景色が赤いだけのSilverlightを表示するだけでは少し寂しいので、次はお約束のHello Worldを表示します。以下のhtmlを先と同様にテキストエディタで作成して、適当な名前で保存してください。

<html>
  <head>
    <title>Hello Silverlight</title>
    <!-- [1] -->
    <script type="text/xaml" id="xaml">
        <?xml version="1.0"?>
        <Canvas xmlns="http://schemas.microsoft.com/client/2007">
          <TextBlock Text="Hello World" FontSize="25" />
        </Canvas>
    </script>
  </head>
  <body>
    <object type="application/x-silverlight" width="200" height="200">
      <param name="background" value="#FF0000" />
      <param name="source" value="#xaml" /> <!-- [2] -->
    </object>
  </body>
</html>

同様に保存したファイルをWebブラウザで開いてください。以下のように先ほどの赤色の四角の上部に"Hello World"と表示されたと思います。

画像

一つ目のコードから2か所コードが増えています。[1]はscriptタグを用いてその中にxamlを記述してます。xamlとはユーザーインターフェイスを記述するためのXMLをベースとしたマークアップ言語です。Silverlightではこのxamlを用いて画面デザインを定義します。この例ではTextBlockを用いて"Hello World"という文字をフォントサイズを25で表示するように指定しています。[2]ではそのxamlを読みこむようにvalue属性の値に[1]のscript要素のid属性の値である"xaml"にプレフィックスの"#"を付加して指定しています。

次回予告

今回の例のようにhtmlに直接object要素を記述したり、xamlを記述したりすることは実際の開発ではほとんど、というか全くありません。実際の開発ではSilverlightのSDKに含まれるSilverlight.jsを使用してobject要素を生成し、xamlは別途ファイルを作成して記述します。次回はSDKの導入と、Silverlight.jsを用いた開発を紹介します。

おすすめ記事

記事・ニュース一覧