連載：Silverlight 3実践プログラミング LocalConnection APIと動的なスタイリング シグマコンサルティング　菅原 英治 2010/02/09

Page1 Page2

　みなさん、こんにちは。本連載では、Silverlight 3の新機能について、その場で実行可能なサンプルと、そのコードを示しながら解説しています。前回は、ネットワーク監視APIとブラウザ外実行について解説しました。連載第4回目となる今回は、次の2点について解説します。

【本稿で解説するSilverlight 3の新機能】

（1）LocalConnection API
（2）動的なスタイリング

　LocalConnection APIは、1台のコンピュータ上で実行されているSilverlightアプリケーション（以下、アプリ）同士のやり取りを、メッセージ通信で実現するものです。「1台のコンピュータ上」というのがポイントで、複数のコンピュータ間での通信を実現するものではないので注意が必要です。

　動的なスタイリングは、Silverlightアプリのコントロールの見た目を定義するスタイル（＝HTMLに対するCSSのようなもの）を、プログラムで動的に設定できるようになった、というものです。Silverlight 2では、スタイルは、一度しか設定できず、動的に変更することができませんでした。

　本稿では、この2つの機能を利用したサンプルをご紹介します。

　本連載の対象読者としては、.NETでの開発経験があり、かつSilverlight 2アプリの開発についてある程度の知識がある方を前提に考えています。また、本稿では、次の開発環境を前提としています。

【本稿で前提とする開発環境】

• Visual Studio 2008 SP1 ＋ Silverlight 3 Tools

　それではさっそく始めましょう！ まずはサンプル・アプリを実際に動かしてみましょう。

【コラム】DeepZoomPix

DeepZoomPixというサイトをご存じですか。このサイトでは、共有した写真をインタラクティブに閲覧することができます（執筆現時点でもまだ参照可能になっていますが、2009年12月31日までの技術デモの公開となっています）。 　特に右端にある［LAYOUT］機能が秀逸で、タイル状や、ライン状、らせん状に並べ替えるなどのレイアウトが用意されています。レイアウトを変更したときも、その並べ替える動きがとても滑らかです。ぜひお試しください。 DeepZoomPix

■サンプルを動かしてみよう

●今回のサンプルについて

　今回のサンプルでは、LocalConnection APIを利用して、HTMLベースのページにメニューバーとサイドバー機能を実現します。MSDNページを参照すると、LocalConnection APIについて、下記のような記載があります。

• MSDN:Silverlight ベースのローカル アプリケーション間の通信より
  「たとえば、HTML ベースの Web サイトに Silverlight ベースのナビゲーション システムを提供するとします。この場合、Silverlight を使用してメニュー バーとサイドバーを作成し、ローカル メッセージングを使用して、その状態を同期化することができます。」

　HTMLベースのページでも、LocalConnection APIを利用することで、1ページ上にある複数のSilverlightアプリを連携させ、リッチな機能を追加できるというわけですね。

●サンプルを動かしてみよう

それではまず、サンプルを動かしてみましょう（※サンプルを動作させるためには、「Silverlightプラグインのインストール」が必要です）。

単純なHTMLです。

LocalConnection APIと動的なスタイリングを利用したサンプル

上部のメニューバーから1つのボタンをクリックすると、左部にサイドバーが表示されます。

横方向にメニューバーがある。その1つのボタンをクリックすると、そのメニューに対するサイドバーが表示される。   サイドバーの1つのボタンをクリックすると、メッセージボックスが表示される。

　上のサンプルでは、まずは横方向に3つのボタンを持ったメニューバーが表示されます。メニューバー上のボタンをクリックすると、クリックしたボタンが赤色になり、縦方向のサイドバーが表示されます。

　その際、サイドバーのボタン名に注目していただくと、メニューバーでクリックしたメニューの名前となっていることが分かるでしょう。また、サイドバーのボタンをクリックすると、ポップアップでメッセージが表示されます。

　サンプルはうまく動いたでしょうか。さて、このサンプルでは、2つのポイントがあります。

　第1に、メニューバー、サイドバーが、それぞれ別のSilverlightアプリとして構成されている点です。メニューバーとサイドバーの間に、「単純なHTMLです。」というHTMLコードが存在することで、それをお分かりいただけるでしょう。

　このようにLocalConnection APIを利用することで、別々のSilverlightアプリを連携させることが可能です。このサンプルにおいては、メニューバーがメッセージの送信側、サイドバーが受信側となり、通信しています。

　第2に、メニューバー上のボタンです。クリックすると、赤色になりました。ここに動的なスタイリングを利用しています。クリックされたボタンに対し、その背景を赤色にするスタイルを動的に設定しているわけです。

　以上のポイントを踏まえ、コードの解説をしていきます。

INDEX
	連載：Silverlight 3実践プログラミング
	LocalConnection APIと動的なスタイリング
	1．サンプルを動かしてみよう
	2．サンプル・アプリのソース・コード解説

「Silverlight 3実践プログラミング」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）