.NET TIPS

[Silverlight 2]JavaScriptコードからSilverlightのオブジェクトを利用するには?[C#、VB]

デジタルアドバンテージ 一色 政彦
2009/07/16

 SilverlightアプリケーションをHTMLページの一部として埋め込んでいる場合、そのHTMLページとやりとりを行いたい場面が出てくることがある。例えば、HTMLページ上でボタンが押されたときに、Silverlightアプリケーション上の一部の表示を変えるような場合だ。

 この場合、「TIPS:[Silverlight 2]HTML要素クリック時にSilverlightのメソッドを実行するには?」で示したように、JavaScriptのClickイベントなどにSilverlightアプリケーション内のメソッドを結び付けることもできる。しかし、JavaScriptコード側で、Silverlightアプリケーション内の任意のメソッドを呼び出したいケースでは、それらのメソッドなどをまとめたSilverlightアプリケーションのオブジェクト(以降、Silverlightオブジェクト)を利用する方が便利だ。

 次のSilverlightアプリケーションでは、HTMLページ上のボタンをクリックすると、Silverlightアプリケーション内のオブジェクトが持つメソッドを呼び出し、Silverlightアプリケーション上のTextBlockコントロールにメッセージを表示する。

JavaScriptコードからSilverlightオブジェクトを利用してメッセージ表示を行うサンプル

●JavaScriptコード側:Silverlightオブジェクトの取得

 このサンプルの動作を実現するには、まずSilverlightプラグインからSilverlightオブジェクトを取得する必要がある。

 この作業を行うのに適したタイミングは、SilverlightプラグインがWebブラウザにロードされた直後だろう。このタイミングであれば、ロード後は常にSilverlightオブジェクトにアクセスできるという利便性が生まれるからだ。

 次のコードは、Silverlightプラグイン・ロード時にSilverlightオブジェクトを取得するJavaScriptコードである。コードに記述されているonSilverlightLoaded関数は、SilverlightプラグインのLoadedイベント・ハンドラだ。Loadedイベントに関しては、「TIPS:[Silverlight 2]Silverlightプラグイン・ロード時にJavaScriptコードを実行するには?」で説明しているので、本稿での説明は割愛する。

<script language="javascript">

  var slObject = null;  // Silverlightオブジェクト

  // Silverlightプラグイン・ロード時に呼び出される
  function onSilverlightLoaded(sender, args) {

    // SilverlightHostオブジェクトを取得
    var slPlugin = sender.getHost();

    // Silverlightオブジェクトを取得
    slObject = slPlugin.Content.MyScriptableObject;

  }
</script>
Silverlightプラグイン・ロード時にSilverlightオブジェクトを取得するJavaScriptコード

 onSilverlightLoaded関数のsenderパラメータは、Loadedイベントを発生させたSilverlightオブジェクトである。このオブジェクトのgetHost関数(パラメータなし)を呼び出せば、Silverlightコントロールのオブジェクト、つまりSilverlightHostクラス(System.Windows.Interop名前空間)のオブジェクトを取得できるので、そこからSilverlightコントロールの情報を取得/設定したり、オブジェクトを操作したりできる。

 今回は、SilverlightHostオブジェクトのContentプロパティを呼び出している。Contentプロパティでは、Silverlightアプリケーションのコンテンツ領域に関するAPIが含まれるContentクラス(System.Windows.Interop名前空間)のオブジェクトが取得できる。このContentオブジェクトから、(本稿で必要となる)「自作のSilverlightオブジェクト」も公開できる。「MyScriptableObject」とは、本稿のサンプルで自作したSilverlightオブジェクトである。

●Silverlightアプリケーション側:Silverlightオブジェクトとなるクラスの実装

 次にSilverlightアプリケーション側に、Silverlightオブジェクトとなる「MyScriptableObject」クラスを実装しよう(※もちろんクラス名は任意のものが使用できる)。

 MyScriptableObjectクラスは、Silverlightアプリケーション内で次のように実装されている。

using SilverlightApplication1;
using System.Windows.Browser;

public class MyScriptableObject
{

  [ScriptableMember()]
  public void SetMessage(string msg)
  {
 
    // Silverlightアプリケーションのメイン・ページを取得
    Page PageObject = App.Current.RootVisual as Page;
   
    // メイン・ページに含まれるTextBlockコントロールに
    // メッセージを設定する
    PageObject.textBlockMessage.Text = msg;
  }
}
Imports SilverlightApplication1
Imports System.Windows.Browser

Public Class MyScriptableObject

  <ScriptableMember()> _
  Sub SetMessage(ByVal msg)

    ' Silverlightアプリケーションのメイン・ページを取得
    Dim PageObject As Page = App.Current.RootVisual

    ' メイン・ページに含まれるTextBlockコントロールに
    ' メッセージを設定する
    PageObject.textBlockMessage.Text = msg

  End Sub

End Class
Silverlightアプリケーション内のMyScriptableObjectクラスの実装内容(上:C#、下:VB)

 MyScriptableObjectクラスの中には、SetMessageメソッドが定義されている。SetMessageメソッドには、ScriptableMember属性(System.Windows.Browser名前空間)が付与されているが、これを付与することにより、そのメソッド/プロパティ/イベントがJavaScriptコードから呼び出せるようになる。つまり、先ほどのJavaScriptコードで「MyScriptableObject」から取得したSilverlightオブジェクトから、このSetMessageメソッドが呼び出せるようになるというわけだ。

 本TIPSの本質ではないが、一応、SetMessageメソッドの中身も説明しておこう。

 最初に、Pageオブジェクトを取得している。これは、Silverlightアプリケーションのメイン・ページ(=RootVisual)である。

 Silverlightアプリケーションを示すApplicationクラス(System.Windows名前空間)には、現在のApplicationオブジェクトを取得するための静的プロパティCurrentがある。上記コードの「App」は、そのApplicationクラスを継承したクラス(SilverlightApplication1名前空間)である。

 そして、AppクラスのCurrentプロパティからApplicationオブジェクトを取得し、そのRootVisualプロパティからメイン・ページが取得できる。この例ではPageクラス(SilverlightApplication1名前空間)のオブジェクトを取得している。

 なお、SilverlightApplication1名前空間のAppクラスとPageクラスは、Visual Studioの「Silverlight アプリケーション」プロジェクト・テンプレートで自動生成されるクラス(ファイル)である。

 続いて、取得したPageオブジェクト(=XAMLページ)上に配置されているTextBlockコントロールのTextプロパティに引数として渡されたメッセージ・テキストを設定している。

 以上でMyScriptableObjectクラスの実装はOKだ。

●Silverlightアプリケーション側:Silverlightオブジェクトの登録

 仕上げとして、このMyScriptableObjectクラスをJavaScriptコード内で利用できるオブジェクトとして登録する。

 この登録は、Silverlightアプリケーションが起動した直後が好ましいだろう。つまり、Silverlightアプリケーションのクラス(本稿の場合はAppクラス)のStartupイベント・ハンドラ内が好ましい。Startupイベント・ハンドラは、Visual Studioのプロジェクト・テンプレートでAppクラスを自動生成していれば、そのAppクラス内のApplication_Startupメソッドとして初めから実装されているはずだ。

 そこで、そのApplication_Startupメソッドに次のようなコードを追記する。

private void Application_Startup(object sender, StartupEventArgs e)
{
  ……省略……

  // Silverlightオブジェクトを作成
  MyScriptableObject myObj = new MyScriptableObject();

  // SilverlightオブジェクトをJavaScriptオブジェクトとして登録
  HtmlPage.RegisterScriptableObject("MyScriptableObject", myObj);
}
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
  ……省略……

  ' Silverlightオブジェクトを作成
  Dim myObj As New MyScriptableObject()

  ' SilverlightオブジェクトをJavaScriptオブジェクトとして登録
  HtmlPage.RegisterScriptableObject("MyScriptableObject", myObj)
End Sub
SilverlightオブジェクトをJavaScriptオブジェクトとして登録するコード(上:C#、下:VB)

 このコードでは、まず、MyScriptableObjectクラスのインスタンスを生成している。これが「独自のSilverlightオブジェクト」に該当する。

 そしてHtmlPageクラス(System.Windows.Browser名前空間)の静的メソッドRegisterScriptableObjectを呼び出している。このRegisterScriptableObjectメソッドは、SilverlightオブジェクトをJavaScriptオブジェクトとして登録するためのものだ。第1パラメータにSilverlightオブジェクトの名前を、第2パラメータに先ほどインスタンス化した実際のSilverlightオブジェクトを渡す。この例では、「MyScriptableObject」という名前にしているので、前述のJavaScriptコードのContentオブジェクトからMyScriptableObjectというプロパティ名でアクセスできるようになるわけだ。

 以上で、JavaScriptコードで「MyScriptableObject」というSilverlightオブジェクトの呼び出しが行えるようになった。

●JavaScriptコード側:Silverlightオブジェクトのメソッドの呼び出し

 あとは、実際にJavaScriptコードでSilverlightオブジェクトが持つメソッドを呼び出せばよい。

 本稿のサンプルでは、ボタンがクリックされたときに、SilverlightオブジェクトのSetMessageメソッドを呼び出す。このコードは次のようになる。

<input type="button"
  value="Silverlightアプリケーションのメソッドを実行"
  onclick=
  "slObject.SetMessage('Silverlightメソッドが呼び出されました。')"
/>
Silverlightオブジェクトのメソッドを呼び出すHTML/JavaScriptコード

 このHTMLコードはボタンを表示するものだが、onclick属性により、クリックされたときに実行するJavaScriptコードが設定されている。ここで先ほど実装したSetMessageメソッドが呼び出されている。

 以上で完成だ。プログラムを実行すると、冒頭のサンプルのように動作する。End of Article

カテゴリ:Silverlight 2 処理対象:ブラウザ
使用ライブラリ:SilverlightHostクラス(System.Windows.Interop名前空間)
使用ライブラリ:Contentクラス(System.Windows.Interop名前空間)
使用ライブラリ:ScriptableMemberAttributeクラス(System.Windows.Browser名前空間)
使用ライブラリ:Applicationクラス(System.Windows名前空間)
関連TIPS:[Silverlight 2]HTML要素クリック時にSilverlightのメソッドを実行するには?
関連TIPS:[Silverlight 2]Silverlightプラグイン・ロード時にJavaScriptコードを実行するには?

この記事と関連性の高い別の.NET TIPS
[Silverlight 2]HTML要素クリック時にSilverlightのメソッドを実行するには?
[Silverlight 2]Silverlightコントロールの実際のサイズを取得するには?
[Silverlight 2]Silverlightプラグイン・ロード時にJavaScriptコードを実行するには?
[Silverlight 2]文字列として作成したJavaScriptコードを実行するには?
[Silverlight 2]マウス・オーバー時にSilverlightコントロールを大きく表示するには?
[Silverlight 2]HTMLページ内のJavaScriptコードを実行するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」

@IT Special

- PR -

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH