Microsoft Silverlightが優れているのは大規模なアプリケーションや、大がかりで豪華なデザインやマルチメディアだけではありません。簡単なコンテンツにおいてはHTMLの延長線上で利用するような小回りがききます。Microsoftは開発者向けに「Visual Studio」や「Expression Studio」を利用してSilverlightアプリケーションを開発する中規模以上のシナリオを想定した情報を多く掲載していますが、より小規模で簡素にSilverlightを利用することもできるのです。

一般的なシナリオではアプリケーションの外観を宣言するXAMLファイルとプログラムコードを分離しますが、HTMLページ内のscript要素としてXAMLコードを埋め込む「インラインXAML」と呼ばれる方法も用意されています。インラインXAMLを利用する場合はマネージコードと統合できないため、必然とプログラムはJavaScriptになりますが、プログラムは用意せずに描画のみを目的としてもかまいません。テキストエディタだけで簡素にプログラムができるメリットについては第8回でも説明しました。

XAMLコードをHTML文書内に埋め込むにはJavaScriptなどと同じようにscript要素を使います。script要素のtype属性にtext/xamlを指定し、Silverlightから参照するための識別子をid属性で設定してください。

インラインXAML

<script type="text/xaml" id="識別子">
 任意のXAMLコード
</script>

HTML文書内に埋め込まれたXAMLコードを参照するにはSilverlightのobject要素に設定するsourceパラメータにXAMLの識別子を与えます。要素の識別子を表す値は#から始めます。

この方法は、外部ファイルのコードを参照しない完全にスタンドアロンなSilverlightアプリケーションを実現するものでもあります。一般的なSilverlightアプリケーションは、マネージコードやコンテンツをパッケージ化したXAPファイルをアップロードしなければなりませんが、任意のファイルをアップロードできない制限されたシステムなどでインラインXAMLが有効かもしれません。任意のHTMLコードの記述が許されているコンテンツ管理システムであれば、通常の記事と同じ方法でSilverlightコンテンツを埋め込めます。

例えば、簡単なチャートを表示させることを目的にSilverlightを利用するならば、Visual StudioやExpression Studioを利用するのは大げさかもしれません。インラインXAMLであれば、HTML記事を編集しているエディタの中で、そのままSilverlightコンテンツを記述できるので、別のツールと切り替える必要はありません。

コード01 XAMLをHTML文書に埋め込む

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->

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

  <script type="text/xaml" id="testXaml">
<?xml version="1.0"?>
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
 <Ellipse Fill="Pink" Width="200" Height="100" Canvas.Left="40" Canvas.Top="30" />
 <Rectangle Fill="Orange" Width="100" Height="160" Canvas.Left="150" Canvas.Top="50" />
 <TextBlock Text="This is text on Silverlight" Canvas.Left="10" Canvas.Top="150">
  <TextBlock.RenderTransform>
   <RotateTransform Angle="-30" />
  </TextBlock.RenderTransform>
 </TextBlock>
</Canvas>
  </script>
 </head>

 <body>
  <object type="application/x-silverlight-2" width="800" height="600">
   <param name="source" value="#testXaml"/>
  </object>
 </body>
</html>

実行結果

上のコード 01は、script要素内にXAMLを記述して楕円形、長方形、テキストを宣言し、これをobject要素から参照しています。実行結果から、SilverlightがHTML内に埋め込まれたXAMLコードを読み込んで描画していることを確認できます。

XAMLはアプリケーションのUIを宣言することが主目的ですが、副作用としてベクタ画像を表現するためのフォーマットとして応用することができます。かつて使われていたWMF形式や、W3Cが標準化しているSVGと同じように、テキストや図形の構造をデータとして持つだけなのでビットマップよりも軽量で高解像度に耐えられます。

HTML5が正式に勧告されれば(またはInternet ExplorerがSVGに対応すれば)状況が変わるかもしれませんが、すくなくとも現在のWebにおいてHTMLで表現できるのはテキストや画像を貼り付ける記事であり、Webページ上に図形を表現する統一した方法はありません。そこで、インラインXAMLをHTML内に埋め込む図形データとして利用するというシナリオが考えられます。

簡素なチャート程度であればテキストエディタやプログラムから生成できますが、曲線で構成される複雑なイメージは編集ツールの支援なしには難しいでしょう。Expression Studioに含まれているExpression DesignはXAML形式にも対応したドローソフトの一種です。選択中のオブジェクトをXAMLとしてクリップボードにコピーする機能があるため、編集中の図形をインラインXAMLとしてHTMLページに貼り付ければSilverlightで容易にプレビューできます。

Expression Designを使ってデザインしたベクタ画像

選択中のオブジェクトをXAML形式でコピー

インラインXAMLとして貼り付けて表示

一般的なWebデザイナにとってVisual Studioを使った本格的なアプリケーション開発は敷居の高いものでしょう。しかし、上記のインラインXAMLを使ったベクタ画像のプレビューのように、コンテンツの表示に特化させた使い方であれば開発ツールやプログラミングを学習する必要はなく、テキストエディタから簡単にコンテンツを編集できます。

また、Expression Studioを使えない環境下で、開発者とデザイナがSilverlightコンテンツを共有し、デザインについてコミュニケーションしなければならないような場合にもインラインXAMLのような方法は有効かもしれません。最大のメリットは、開発ツールやプログラミングの知識を持たなくても、HTMLを多少読み書きできる程度の経験があれば容易にコンテンツを編集できることでしょう。上のコード01のようにHTMLファイルにコピー&ペーストするだけでサンプルを表示できる単純な構成であることは、初心者や専門家ではない人たちにとって重要なことです。

著者プロフィール:赤坂玲音

フリーランスのテクニカルライタ兼アプリケーション開発者。主にクライアント技術、プレゼンテーション技術が専門。2005年から現在まで「Microsoft MVP Visual C++」受賞。技術解説書を中心に著書多数。近著に『Silverlight入門』(翔泳社)などがある。