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

.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メソッドが呼び出されている。

■

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

カテゴリ：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」

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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT