「Hello! Silverlight」をもう1度
それでは、Silverlightのサンプルアプリケーションを詳しく解説していきましょう。ここで使用するサンプルは、特集記事「Silverlightは次世代のJavaScriptフレームワーク？」で紹介したHello Worldサンプルを使用します。
図4 Silverlight 1.0の「Hello Wolrd!!」サンプル （画像をクリックするとサンプルが動きます。サンプルを動かすには、事前にランタイムのインストールが必要です。→ダウンロードページ）
サンプルのソースコードはこちらからダウンロードできるようになっています。Silverlightアプリケーションのファイル構成は特集記事でも説明したとおりですので、ここではソースコードを個別に詳しく解説していきたいと思います。なお、スタートページであるDefault.htmlに関しては決まり文句ですので、割愛します。
■ Silverlightオブジェクト生成を行うDefault_html.js
まずは、Silverlightオブジェクトの作成を行っているロジックから見ていきましょう。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ここでは、Silverlightオブジェクト作成関数であるcreateObject関数やcreateObjectEx関数を使用して、Silverlightオブジェクトの作成を行っております。処理としてはそれだけですが、その際にいくつかのパラメータの設定を行う必要があります。
■ Silverlightオブジェクト生成関数用のパラメータ
createObject関数やcreateObjectEx関数には、主なものとして以下の表1のようなパラメータがありますので、参考にして設定してください。
| パラメータ | 概要 | |
|---|---|---|
| source | XAMLのURLを指定 | |
| parentElement | Silverlightオブジェクトの親要素に当たるHTML要素のIDを指定 | |
| id | SilverlightオブジェクトのユニークなIDを指定。このIDを指定することでHTMLからSilverlightオブジェクトへアクセスすることが可能 | |
| properties | Silverlightオブジェクトのための初期プロパティを設定。配列形式で複数の指定が可能（表2参照） | |
| events | 初回に実行するコントロールイベントを指定。指定可能なイベントは、“onLoad”か“onError”のみ | |
| initParams | ユーザー定義の初期パラメータを指定 | |
| context | onLoadイベントハンドラへ渡すことのできるユニークなIDを指定 |
| プロパティ | 概要 | デフォルト値 | |
|---|---|---|---|
| width | 幅を指定。HTMLタグのwidthプロパティに相当 | 0 | |
| height | 高さを指定。HTMLタグのheightプロパティに相当 | 0 | |
| background | 背景色を指定。SilverlightオブジェクトのSettings.Backgroundプロパティに相当 | null（＝白） | |
| isWindowless | ウィンドウレス・コントロールとして表示するかを指定。SilverlightオブジェクトのSettings.Windowlessプロパティに相当 | false | |
| frameRate | コントロールをレンダリングするフレーム毎秒の最大値を指定 | 24（最大値は64フレーム毎秒） | |
| inplaceInstallPrompt | SilverlightプラグインがWebブラウザにインストールされていなかった場合、インプレースインストールプロンプトを表示するかを指定（標準インストールプロンプトがソフトウェアライセンス条項の画面を必ず表示してインストールを行うのに対して、インプレースインストールプロンプトはダイレクトにインストールできる点が異なる） | false | |
| version | Silverlightオブジェクトを実行するために必要とする最小のバージョンを指定 | なし | |
| ignoreBrowserVer | 実行するWebブラウザのタイプやバージョンの確認を無視するか指定 | false（＝無視しない） | |
| enableHtmlAccess | コンテンツがHTMLのコンテンツへアクセスすることを許可するか指定。SilverlightオブジェクトのSettings.EnableHtmlAccessプロパティに相当 | true（＝許可する） |
■ Silverlghtの中心となるXAMLを記述したPage.xaml
次に解説するのは、Silverlightのコアとなる画面を生成しているXAMLコードになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
SilverlightにおいてXAMLコードがアプリケーションの中心となりますので、ここでは基礎的な定義と初歩的な<TextBlock>タグについて解説します。なお、当サンプルでは、アニメーション、イベント（Page.xaml.jsも含む）、グラデーションなどを使用しておりますが、これらについては連載の中で詳しく説明していきます。
■ SilverlightにおけるXAMLのルート要素となる<Canvas>タグ
SilverlightにおけるXAMLは、必ずルート要素に<Canvas>タグを使用します。WPF（Windows Presentation Foundation）には、Windowsアプリケーション用の<Window>タグ、XAMLブラウザアプリケーション用の<Page>タグがありますが、Silverlightでは、常にHTMLページの一部の領域を使用するため、領域を指定する<Canvas>タグになります。
ルート要素には名前空間の指定が必要ですので、以下の定義を必ず追加しなければなりません。
- xmlns=”http://schemas.microsoft.com/client/2007”
デフォルトSilverlight名前空間 - xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
XAML名前空間
この名前空間の指定以外は通常のタグと同様の指定方法になります。<Canvas>タグで指定可能なプロパティ、メソッド、イベントは表3にまとめましたが、その前にプロパティ、メソッド、イベントの指定方法について簡単に説明します。
■ <Canvas>タグで指定できるプロパティ
プロパティの指定方法には3つあります。
1. タグ内にHTMLのように指定（主に値を指定する際に使用）
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
2. 子要素として定義して指定（主にオブジェクトを指定する際に使用）
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
3. ロジックにて指定
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
もしくは、
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ <Canvas>タグで指定できるメソッド
メソッドはロジックから使用するのみです。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
■ <Canvas>タグで指定できるイベント
1. タグ内にHTMLのように指定
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
2. ロジックにて追加
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
| 項目 | タグ | |
|---|---|---|
| プロパティ | Background, Canvas.Left、Canvas.Top、Canvas.ZIndex、Children、Clip、Cursor、Height、IsHitTestVisible、Name、Opacity、OpacityMask、RenderTransform、RenderTransformOrigin、Resources、Triggers、Visibility、Width | |
| メソッド | AddEventListener、CaptureMouse、FindName、GetHost、GetParent、GetValue、ReleaseMouseCapture、RemoveEventListener、SetValue | |
| イベント | GetFocus、KeyDown、KeyUp、Loaded、LostFocus、MouseEnter、MouseLeave、MouseLeftButtonDown、MouseLeftButtonUp、MouseMove |
■ Silverlightのテキストを表現する<TextBlock>タグ
Silverlightで単数行テキストや複数行テキスト、マルチフォーマットテキストなどを表示するためには、軽量なオブジェクトである<TextBlock>タグを使用します。
使用方法としては、表示したいテキストをTextプロパティに指定するか、<TextBlock>タグで囲うだけです。<TextBlock>タグも同様に、指定可能なプロパティ、メソッド、イベントを表4にまとめましたので、参考にしてください。
| 項目 | タグ | |
|---|---|---|
| プロパティ | ActualHeight、ActualWidth、Canvas.Left、Canvas.Top、Canvas.ZIndex、Clip、Cursor、FontFamily、FontSize、FontStretch、FontStyle、FontWeight、Foreground、Height、Name、Opacity、OpacityMask、RenderTransform、RenderTransformOrigin、Resources、Text、TextDecorations、TextWrapping、Triggers、Visibility、Width | |
| メソッド | AddEventListener、CaptureMouse、FindName、GetHost、GetParent、GetValue、ReleaseMouseCapture、RemoveEventListener、SetFontSource、SetValue | |
| イベント | なし |
コラム 「JavaScriptを使わなくとも、Silverlightオブジェクトの生成はできる」
Silverlightオブジェクトの生成は、基本的にJavaScriptを使用して行われますが、JavaScriptを使用せずにHTMLの<object>タグや<embed>タグを使用して行うこともできます。サンプルをこれらで指定すると、以下のようになります。
・<object>タグ
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
・<embed>タグ
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
次のページでは、実際に作成したSilverlightアプリケーションを企業内でどのように配布するかを紹介します。
Copyright © ITmedia, Inc. All Rights Reserved.