(2008/09/08 変更 : コントロールの継承元を Microsoft.SharePoint.WebPartPages.WebPart に変更)

環境 :
Microsoft Office SharePoint Server (MOSS) 2007 SP1
Visual Studio 2008
Visual Studio 2008 用 Microsoft Silverlight Tools Beta 2
(※以下は、Beta 1 でも動きます)
Visual Studio Extensions for Windows Share Service 3.0 (VSeWSS) Version 1.2

VS 08 で実現する SharePoint UX 

1. はじめに (VSeWSS 1.2 リリースの真価)
2. ASP.NET AJAX を使った Web Part
3. Silverlight 2 を使った Web Part

こんにちは。

今回は、Silverlight 2 を Web パーツで使用する方法について簡単なサンプルを例に記載してみます。(ここでも、構築したサンプルプロジェクトを本ブログに添付しておきます。このサンプルでは、MOSS (または WSS) SP1 が必要となりますので注意をしてください。)

Silverlight 2 を使用した Web パーツのサンプルについては、このブログでも以前少しふれた Silverlight Blueprint (米国の Office Developer Conference でビルゲイツが発表したもの)、もしくは、ダウンロードセンターの 「PPTs and Demos for Introductory SharePoint Developer Modules」に、実際のコードサンプルやデモが含まれています。
ここでは、基本的な考え方のみを記載しますので、その後、これらに含まれているサンプルをいろいろみて頂くと、その他の応用例なども見て理解を深めていくことができるでしょう。

まず、簡単に予備知識を記載します。

環境構築と準備

Silverlight 2 は、ベータ版を使っていろいろ楽しんでおられる方にとってはもうご存じかもしれませんが、Visual Studio 2008 上で提供されるプロジェクトテンプレートなども存在しており Visual Studiio 2008 と組み合わせて簡単にコントロールを構築することなどができるようになっています。従来 (Silverlight 1) は JavaScript などがベースとなっていて、ビジネス系のアプリというと AJAX との併用というシナリオが思いつくのですが、Silverlight 2 では、XAML により WPF アプリケーションにも匹敵する処理と表現が可能となっています (厳密には、いろいろと相違がありますのでご注意を)。まだベータ版ではありますが、最近は Beta 2 がダウンロードできるようになっており、ここでもこの最新の Beta 2 を使用してみたいと思います。
ここでは Silverlight 2 そのものについては詳述しませんが、MSDN の記事はもちろん、エバンジェリストの 川西 や、高橋、大野 のブログなどをウォッチしていると最新の情報やおもしろいサンプル、ポイントなど、最新の情報をいろいろと紹介してくれていますので、是非参考にしてみてください。

さて、Silverlight を Web パーツ上で実装する際には、下記の System.Web.UI.SilverlightControls.Silverlight クラスを Web パーツ上に配置するという簡単な概念で実装できます。
このクラスですが、実は、ASP.NET AJAX の IScriptControl インタフェースを実装 (Implement) して作成されています。つまり、このコントロールを使用して Silverlight を使用する際には、前回記述した ASP.NET AJAX も内部で使用されているということになります。ですので、一見関係ないように思われるかもしれませんが、今回ご紹介する Silverlight 2 を使用したサンプルを構築するには、前回の AJAX のときと同じように web.config を変更するなどの ASP.NET AJAX の設定が前提となります。

設定は前回と同じで構いませんが、1 つだけ、System.Web.UI.SilverlightControls.Silverlight というコントロールを内部で使用しますので、前回の設定に加えて、念のため、以下の SafeControl を web.config に追加しておきましょう。(もしかしたら、要らないかも、、、ちょっと試してませんが、、、)

<SafeControl Assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.SilverlightControls" TypeName="*" Safe="True" />

マスターページ (.master) への ScriptManager の設定も、前回同様、忘れずに実施しておきましょう。(前回記載し忘れましたが、これを Web パーツの中からコードで追加することもできます。が、複数の Web パーツを張り付けた際にコンフリクトしないように工夫が必要です。)

また、Silverlight のコントロールは、object としてブラウザ上にダウンロードされます。IIS の SharePoint が稼働している Web サイトの設定で、MIME の種類として以下を追加しておきます。

拡張子 : .xap
MIME の種類 : application/x-silverlight-2-b1

また、サーバ側の Silverlight SDK の中の System.Web.Silverlight.dll (%ProgramFiles%\Microsoft SDKs\Silverlightv2.0\Libraries\Server) を SharePoint の Web サーバの仮想フォルダの bin ディレクトリ (通常は、%wwwroot%\wss\VirtualDirectories\<ポート番号>\bin) に配置します。

これで準備が整いました。

Silverlight 2 コントロールの作成

（ぜんぜん関係ありませんが、今日は Web キャストの収録も控えているので、大急ぎで記載します、、、、誤字がありましたらすみません、、、）

では開発を実施していきましょう。
まずは、Silverlight 2 のコントロールを (何でも構いませんので) 作成してみましょう。私ではいつもデザインセンスがないので、今回は エバンジェリストの大野 にお願いして、SL2App1 という簡単なアプリケーションを作成してもらいました。(今回の話とは関係ありませんが、大野が Expression Blend を使った 10 分足らずで XAML を作成してしまいました、、、センスのある人ならあっという間にできてしまうんですねぇ、、、)

このプロジェクトのリビルドをおこなって F5 などで実行してみてください。

つぎに、このビルドされた Silverlight 2 アプリケーション本体である SL2App1.xap を Web パーツ上から見えるように、%wwwroot%\wss\VirtualDirectories\80 に ClientBin のサブフォルダを作成し、SL2App1.xap をここに配置 (コピー) します。
なお、製品開発などでソリューションパッケージ (.wsp) からインストールをしてしまいたい場合などは、インストールしやすいように、例えば、SharePoint hive の ISAPI フォルダ (%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\12\ISAPI) にこの .xap を配置して、_vti_bin/<モジュール名>.xap を参照しても構いません。(要は、この .xap がブラウザから読み込めれば OK です !)

Web パーツの作成 

では、VSeWSS 1.2 の出番です！

1. “Silverlight 2 とも美しく Integrate された Visual Studio 2008” を使って、[Web Part] のプロジェクトを新規作成します。(ここは、日本語版が出たら、[Web パーツ] という名称になることでしょう、、、いまは英語版でご辛抱ください)
2. つぎに、参照の追加で、ASP.NET AJAX のコアのアセンブリである System.Web.Extensions (System.Web.Extensions.dll) と、System.Web.Silverlight (System.Web.Silverlight.dll) を追加します。
3. では、コードを記載します。
   まず、クラス内に、上記で述べた System.Web.UI.SilverlightControls.Silverlight のオブジェクトを定義します。(継承元は、Microsoft.SharePoint.WebPartPages.WebPart に変更しておくと良いでしょう)

   [Guid(" . . . . . . .public class WebPart1 : System.Web.UI.WebControls.WebParts.WebPartpublic class WebPart1 : Microsoft.SharePoint.WebPartPages.WebPart{System.Web.UI.SilverlightControls.Silverlight silverlightControl = null;. . . . . . .

4. デフォルトで実装されている CreateChildControls の override メソッドに以下の通り実装します。

   protected override void CreateChildControls(){silverlightControl = new System.Web.UI.SilverlightControls.Silverlight();silverlightControl.ID = "HelloMySL2Xaml";silverlightControl.Source = "/ClientBin/SL2App1.xap";silverlightControl.Width = new System.Web.UI.WebControls.Unit(800);silverlightControl.Height = new System.Web.UI.WebControls.Unit(600);// Beta 1 をお使いの方は、念のため、以下も設定しておきましょう//silverlightControl.Version = "2.0";this.Controls.Add(silverlightControl);}

5. これだけで終わりです。
   あとは、例によってプロジェクトのプロパティの [デバッグ] タグでインストール (デバッグ) 先の SharePoint サイトコレクションの URL を記載し、WebPart1.webpart、WebPart1.xml を編集して、この Web パーツの名前やグループ名などを設定して配置をおこないます。

配置した Web パーツを SharePoint 上から参照すると、以下のように、上記の Silverlight 2 コントロールが表示され、[Press Me] ボタンを押すと、ニョキッとバーが伸びるのが確認できるでしょう。

このように、Visual Studio 2008 のさまざまな仕組みを使って、SharePoint とは思えないようなユーザビリティ (<- というのは失礼な言い方ですが、、、) のさまざまなコントロールを配置して使用することができます。SharePoint がデフォルトで持っていないような独自のグラフコントロールの作成や、高度な描画アプリを SharePoint と組み合わせたい場合などには、良い選択肢でしょう。
SharePoint が持っている Office 連携、電子フォーム、コンテンツ管理、ワークフローなどの機能をそのまま活用して、ユーザビリティを製品独自のもので隠ぺいしてしまいたいようなニーズとして活用することも可能です。

こうしたニーズを考えはじめると、実際の Web パーツ開発では、SharePoint リストのデータと連携する (例 : InfoPath の Web フォームで集計されたデータを上記のようにビジュアルに見せたい、とか) などのデータバインドの処理なども必要となってくるはずです。codeplex には SharePoint 上で Photo List を表示するといった Silverlight のサンプルもありますし、上記でご紹介した ダウンロードサンプル ではこうしたデータバインドのヒントとなるサンプルも含まれています。
このダウンロードサンプルでは、SharePoint リストのデータを SharePoint が提供している Web サービス (SOAP の Web サービス) を介してデータを取得し、コレクション (変数) に入れ、Silverlight の ListBox コントロールとこのコレクションの変数を XAML を使ってバインドするという簡単なサンプルになっています (接続先のサイトの情報などは、Silverlight オブジェクトへのパラメータとして渡しています)。こうした連携方法だけではなく、Data Service などを介したデータ連携など、「アプリケーションの部品」 として構築していく中で、さまざまなシナリオを想定したその他の応用も考えられます。(こうした部品も、VSeWSS 1.2 のリリースで、今後はますます増えてくることでしょう。)