SharePoint アドイン製品一覧
SharePoint 2010 開発のステップ・バイ・ステップ
Windows Azure 入門
Windows Azure How-To 集
WCF / WF 入門
(2008/09/11: 赤字の箇所を訂正)
環境 :Microsoft Office SharePoint Server (MOSS) 2007 SP1Visual Studio 2008Visual Studio Extensions for Windows Share Service 3.0 (VSeWSS) Version 1.2AJAX Contorol Toolkit 3.0.20229 (.NET Framework 3.5 対応版)
VS 08 で実現する SharePoint UX
こんにちは。
では、VSeWSS 1.2 を使った Visual Studio 2008 によるユーザエクスペリエンスの最初として、ASP.NET AJAX を使用した開発について実際のサンプルをみながらご説明していきます。
今回は、エバンジェリスト 小高 のマネをして、価格.com のサービスに接続して処理をおこなってみます。テキストボックスにキーワードを入れると、AutoComplete を使用して「価格.com」に接続して商品情報の候補一覧を表示し、選択をおこなうと「価格.com」に接続して商品の写真を表示するというサンプルを SharePoint の Web パーツとして構築してみましょう。(本ブログに、今回構築したプロジェクトを添付しておきます。)
このシナリオでは、ASP.NET AJAX の UpdatePanel、AJAX Control Toolkit (コミュニティが提供する AJAX の部品)、Json の Web サービスとの連携など一連のテクノロジーを使用していますので、 テクノロジーのベースを理解するには良いサンプルではないかと思います。
実装するコンポーネントの流れとしては、ブラウザ上の AutoComplete のコンポーネント (JavaScript, AJAX Contorol Toolkit の1 部品) から Json を使用して同一マシンの Web サービスに接続し、この Web サービスの中で「価格.com 」のサービスを呼び出して商品候補の一覧を取得して AutoComplete に表示し、そしてこの AutoComplete Extender によりテキストボックスの内容が変更されたら、UpdatePanel の非同期ポストバックによりイメージ (img) の更新をおこなうという流れになります。
ASP.NET AJAX というと、耳慣れない方は、Microsoft のテクノロジーに隠ぺいされた "複雑な" 世界を想像される方も居られるかもしれませんが、その構造は非常にきれい、かつオープンにできています。そして、この "構造" さえ理解しておけば、SharePoint に限らず、さまざまな場面で設定や応用をおこなうことができます。このあたりは、かなり昔になりますが、@IT「ASP.NET AJAXを使いこなす」 に "中の仕組み" を中心に記載しましたので、もし ASP.NET AJAX というものそのものに不慣れな方は、この記事を先に参照していただくと良いかもしれません。(なお、基本的構造は Visua Studio 2008 に同胞された ASP.NET AJAX 3.5 でも同じですが、同記事は Visual Studio 2005 時代のものですので注意してください。)例えば、こうした "構造" を理解しておくと、下記にご紹介する方法以外に、JavaScript のライブラリだけを使用して同様の処理が構築できることにも気づくことでしょう。あるいは、AutoComplete Extender のような既成のコンポーネントではなく、自作のまったく独自なコンポーネントも同じように組み込めることがわかるはずです。
.NET Framework 3.5 では、この ASP.NET AJAX が ASP.NET の中のコンポーネントとして含まれています。開発環境では、Visual Studio 2008 のインストールによって .NET Framework 3.5 も同時にインストールされますが、SharePoint の本番環境でこの新しい ASP.NET AJAX 3.5 を使用するには、.NET Framework 3.5 をのランタイムをインストールしてください。(3.0 以降の追加のアセンブリ、クラス、などが追加されます)
では、早速、上記のアプリを構築してみます。
環境準備
まず準備として、SharePoint のサーバ上で、この ASP.NET AJAX や AJAX Contorol Toolkit (コミュニティが作成した部品群です。ここ からダウンロードできます) が使用できるように設定をおこなっておきます。
Web サービスの作成
それでは次に、AutoComplete Extender から呼び出されて 「価格.com」 からデータを取得する Json の Web サービスを作成します。
Web パーツの作成
以上で完了しました。
テキストボックスに「マイクロソフト」などのキーワードを入力すると、価格.com のサービスに接続して、「マイクロソフト」のキーワードで人気のある上位 5 位までの商品が AutoComplete で表示されます。そしてこの AutoComplete の項目を選択すると、選択した項目の写真が表示されるようになります。そしてこれらはすべて、ページをポストバックすることなく、ページの一部を部分更新するなどで表示されます。
今回の例はまだ非実用的な事例かもしれませんが (キーワードを入れて AutoComplete で選択?ちょっと変な動きですね、、、)、足りない部品については @IT「ASP.NET AJAXを使いこなす」 でご紹介しているような方法で、独自の ASP.NET AJAX の部品と連携させて応用するとより実用的な形で構築することができます。
製品レベル開発のような高度なユーザインタフェースが求められるケースでは、SharePoint が持つ「コンテンツ管理」、「ワークフロー」、「電子フォーム」などのメリットをそのまま活用し、必要な場面ではこうした形で利用者が意識せずに社内のビジネスの流れと外部の up to date な情報などを連携させてユーザビリティの優れたビジネス部品を製品の一部として提供していくなど (例: 経費申請処理において価格情報をアウトソース先の外部の情報と連携させる、など)、さまざまな形で応用していくことができるでしょう。
【関連情報】MSDN : Walkthrough: Creating a Basic ASP.NET AJAX-enabled Web Parthttp://msdn.microsoft.com/en-us/library/bb861877.aspx
※1 【ご参考】 SOAP ベースの Web サービスを SharePoint に登録する場合SOAP の Web サービスを SharePoint 上に配置する際は、ざっくり記述すると、以下の手順を取ります。 .asmx ファイルをいったん _layouts フォルダなどへ配置する disco.exe コマンドにより、上記の .asmx を参照して .disco ファイル、.wsdl ファイルを生成する 作成された .disco, .wsdl の拡張子を .aspx に変更し、ファイル内にスタティックに記述されているアドレスなどの情報を 関数で取得するように変更する _vti_bin ディレクトリに .asmx と上記の .aspx (もともと .disco、.wsdl であったもの) を配置する spdisco.aspx ファイルにエントリを登録する 結構面倒ですね、、、カスタムな Web サービスの配置方法の手順詳細については、http://msdn2.microsoft.com/en-us/library/ms464040.aspx に記載されていますのでご参照ください。
※1 【ご参考】 SOAP ベースの Web サービスを SharePoint に登録する場合SOAP の Web サービスを SharePoint 上に配置する際は、ざっくり記述すると、以下の手順を取ります。
結構面倒ですね、、、カスタムな Web サービスの配置方法の手順詳細については、http://msdn2.microsoft.com/en-us/library/ms464040.aspx に記載されていますのでご参照ください。
PingBack from http://www.basketballs-sports.info/basketball-chat/?p=1626