SharePoint 2010 の Web パーツを接続する

SharePoint クイックスタート バナー

SharePoint 2010 での Web パーツの作成の概要: 2 つの Web パーツを作成、配置、接続する方法について解説します。

最終更新日: 2011年1月12日

適用対象: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

この記事の内容
SharePoint 2010 にサンプル プロジェクトのタスク リストを作成する
新しい空の SharePoint プロジェクトを作成する
Web パーツ接続インターフェイスを作成する
プロバイダー Web パーツを作成する
コンシューマー Web パーツを作成する
Web パーツを配置して Web パーツ ページに追加する
2 つの Web パーツを接続する
次の手順

この演習では、2 つの Web パーツを作成して配置します。次に、その Web パーツを Web パーツ ページに追加し、一方の Web パーツで選択を行うとその内容がもう一方の Web パーツにも表示されるよう、Web パーツ同士を接続します。このタスクを完了するには、以下の作業を実行します。

  • SharePoint 2010 にサンプル プロジェクトのタスク リストを作成する

  • 新しい空の SharePoint プロジェクトを作成する

  • Web パーツ接続インターフェイスを作成する

  • プロバイダー Web パーツを作成する

  • コンシューマー Web パーツを作成する

  • Web パーツを配置して Web パーツ ページに追加する

  • 2 つの Web パーツを接続する

SharePoint 2010 にサンプル プロジェクトのタスク リストを作成する

この演習では、この記事の後半で指定するローカル SharePoint 2010 Web サイトに Projects という名前のリストが必要です。このリストには、表 1 に示すフィールドを含める必要があります。このリストを作成するには、次の手順を実行します。

プロジェクトのタスク リストを作成するには

  1. Web パーツに追加する SharePoint 2010 Web サイト ( http://localhost/sites/SampleWebPartSite など) を Internet Explorer で開きます。

  2. [サイトの操作]、[その他のオプション]、[カスタム リスト] の順にクリックします。

  3. [名前] ボックスに「Projects」と入力して、[作成] をクリックします。

  4. [リスト ツール] タブで [リスト] をクリックし、[ビューの管理] グループで [ビューの変更] をクリックします。

  5. すべての [列名] オプションをオフにしてから、[ID] オプションと [タイトル] オプションを選択します。[OK] をクリックします。

  6. [新しいアイテムの追加] をクリックして、表 1 の先頭行 (ヘッダー行は無視する) に情報を追加します。ID フィールドが自動的に更新されます。

    タイトル

    サンプル コードの作成

    開発者向けツールの作成

    フォーラムの質問に回答

    開発者向け記事の作成

  7. 表 1 の残りの行に対して手順 6. を繰り返します。

新しい空の SharePoint プロジェクトを作成する

このタスクでは、Microsoft Visual Studio 2010 に空の SharePoint 2010 プロジェクトを作成します。

SharePoint プロジェクトを作成するには

  1. Visual Studio 2010 を起動し、[ファイル] をクリックし、[新規作成] をポイントし、[プロジェクト] をクリックします。

  2. [インストールされているテンプレート] セクションの [Visual C#] ノードをクリックし、[SharePoint]、[2010] の順にクリックします。

  3. [空の SharePoint プロジェクト] プロジェクト テンプレート (図 1 を参照) をクリックし、プロジェクトの名前 (ConnectTwoWebParts など) と場所を入力して、[OK] をクリックします。

    図 1. 空の SharePoint プロジェクト タイプを選択する

    空の SharePoint プロジェクトの種類を選択する

  4. [デバッグに使用するローカル サイトを指定してください] リストで、使用するサイト (http://localhost/SampleWebPage など) を選択します。[ファーム ソリューションとして配置する] オプションも選択して、[完了] をクリックします。

    ConnectTwoWebParts プロジェクトが作成され、ソリューション エクスプローラーが表示されます。

Web パーツ接続インターフェイスを作成する

このタスクでは、Web パーツ プロバイダーと Web パーツ コンシューマー間で接続情報の交換を行う Web パーツ接続インターフェイス IProject を作成します。

Web パーツ接続インターフェイスを作成するには

  1. ソリューション エクスプローラーで [ConnectTwoWebParts] を右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。

  2. [新しいアイテムの追加] ダイアログ ウィンドウで [Visual C#]、[コード] の順にクリックし、使用可能なテンプレートから [インターフェイス] を選択します。

  3. [名前] ボックスに「IProject」と入力して、[追加] をクリックします。

  4. ソリューション エクスプローラーで [IProject.cs] ファイルをダブルクリックします。

  5. インターフェイス宣言の前にキーワード public を置いて、インターフェイスの表示をパブリックに変更します (図 2 を参照)。

    図 2. IProject インターフェイス

    IProject インターフェイス

  6. 以下のコードを IProject インターフェイスの内側に挿入します。

    int Id { get; } 
    string Name { get; }
    

プロバイダー Web パーツを作成する

このタスクでは、Web パーツを作成して、Web パーツ接続にプロバイダーとして含めます。

プロバイダー Web パーツを作成するには

  1. ソリューション エクスプローラーで [ConnectTwoWebParts] を右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。

  2. [インストールされているテンプレート] セクションの [Visual C#] ノードをクリックし、[SharePoint]、[2010] の順にクリックします。使用可能なテンプレートから [Web パーツ] を選択します。

  3. [名前] ボックスに「ProviderWebPart」と入力して、[追加] をクリックします。

    プロバイダー Web パーツがプロジェクトに追加されます。

  4. ソリューション エクスプローラーで [ProviderWebPart.cs] をダブルクリックして、コード ファイルを開きます。

  5. ProviderWebPart クラス宣言内で、WebPart を以下のように変更することにより、ProviderWebPart クラスの継承元であるクラスを置き換えます。

    Microsoft.SharePoint.WebPartPages.WebPart, IProject
    
  6. ProviderWebPart クラス宣言内の左かっこ ({) のすぐ後に以下のコードを挿入します。このコード ブロックは、IProject Web パーツ接続インターフェイスを実装し、ローカル変数を Web パーツに追加します。

    DropDownList _projectPicker = null;  
    int IProject.Id 
    { 
        get { return int.Parse(_projectPicker.SelectedValue); } 
    } 
    
    string IProject.Name 
    { 
        get { return _projectPicker.SelectedItem.ToString(); } 
    }
    
  7. 以下のコードを CreateChildControls サブルーチンに挿入します。

    base.CreateChildControls;
    try 
    { 
        _projectPicker = new DropDownList(); 
    
        using (SPSite spSite = new SPSite(SPContext.Current.Web.Url)) 
        using (SPWeb spWeb = spSite.OpenWeb()) 
        { 
            SPList projectsList = spWeb.Lists["Projects"]; 
    
            foreach (SPListItem project in projectsList.Items) 
            { 
                _projectPicker.Items.Add(new ListItem(project.Name, project.ID.ToString())); 
            } 
        } 
        _projectPicker.AutoPostBack = true; 
    
        this.Controls.Add(_projectPicker); 
    } 
    catch (Exception ex) 
    { 
        this.Controls.Clear(); 
        this.Controls.Add(new LiteralControl(ex.Message)); 
    }
    
  8. 以下の ConnectionProvider プロパティを CreateChildControls サブルーチンの後に挿入します。これにより、ProviderWebPart 用の接続プロバイダー インターフェイス ポイントが提供されます。

    [ConnectionProvider("Project Name and ID")] 
    public IProject NameDoesNotMatter() 
    { 
        return this; 
    }
    
  9. 存在する場合は、RenderContents サブルーチンを削除します。

コンシューマー Web パーツを作成する

このタスクでは、Web パーツを作成して、Web パーツ接続にコンシューマーとして含めます。

コンシューマー Web パーツを作成するには

  1. ソリューション エクスプローラーで [ConnectTwoWebParts] を右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。

  2. [インストールされているテンプレート] セクションの [Visual C#] ノードをクリックし、[SharePoint]、[2010] の順にクリックします。使用可能なテンプレートから [Web パーツ] を選択します。

  3. [名前] ボックスに「ConsumerWebPart」と入力して、[追加] をクリックします。

    コンシューマー Web パーツがプロジェクトに追加されます。

  4. ソリューション エクスプローラーで [ConsumerWebPart.cs] をダブルクリックして、コード ファイルを開きます。

  5. ConsumerWebPart クラス宣言内の左かっこ ({) の後に以下のコードを挿入します。

    IProject _provider = null; 
    Label _lbl = null;
    
  6. 以下のコードを CreateChildControls サブルーチンに挿入します。

    base.CreateChildControls;
    try 
    { 
        _lbl = new Label(); 
    
        if (_provider != null) 
        { 
            if (_provider.Id > 0) 
            { 
                _lbl.Text = _provider.Name + " was selected."; 
            } 
            else 
            { 
                _lbl.Text = "Nothing was selected."; 
            } 
        } 
        else 
        { 
            _lbl.Text = "No Provider Web Part Connected."; 
        } 
    
        this.Controls.Add(_lbl); 
    } 
    catch (Exception ex) 
    { 
        this.Controls.Clear(); 
        this.Controls.Add(new LiteralControl(ex.Message)); 
    }
    
  7. 以下の ConnectionConsumer プロパティを CreateChildControls サブルーチンの後に挿入します。これにより、ConsumerWebPart Web パーツ用の接続コンシューマー インターフェイス ポイントが提供されます。

    [ConnectionConsumer("Project Name and ID")] 
    public void ThisNameDoesNotMatter(IProject providerInterface) 
    { 
        _provider = providerInterface; 
    }
    
  8. 存在する場合は、RenderContents サブルーチンを削除します。

Web パーツを配置して Web パーツ ページに追加する

このタスクでは、プロバイダー Web パーツとコンシューマー Web パーツを作成して配置します。次に、Web パーツを Web パーツ ページに追加します。

Web パーツを配置して Web パーツ ページに追加するには

  1. ソリューション エクスプローラーで [ConnectTwoWebParts] を右クリックして、[配置] をクリックします。

  2. Internet Explorer を開き、プロジェクト用に指定した Web サイトに移動します。

  3. [サイトの操作] メニューをクリックして、[その他のオプション] をクリックします。

  4. スクロールして、[Web パーツ ページ] をクリックします。[名前] ボックスに「SampleWebPartPage」と入力して、[作成] をクリックします。

    SharePoint Foundation によって Web パーツ ページが作成され、編集モードで開かれます。

  5. 青いボックス内の Web パーツ ゾーンのいずれかをクリックします。

  6. [カテゴリ] ボックスで [カスタム] を選択し (図 3 を参照)、[ConsumerWebPart] を選択して、[追加] をクリックします。

    図 3. ConsumerWebPart を選択する

    ConsumerWebPart を選択する

  7. 図 4 に示すように、ConsumerWebPart がページに追加されます。

    図 4. Web パーツ ゾーンに追加された ConsumerWebPart

    Web パーツ ゾーンに追加された ConsumerWebPart

  8. これらの手順を繰り返して、ProviderWebPart を異なる Web パーツ ゾーンに追加します。図 5 に示すように、両方の Web パーツがページに表示されるようになりました。

    図 5. ページに追加された両方の Web パーツ

    ページに追加された両方の Web パーツ

2 つの Web パーツを接続する

このタスクでは、プロバイダー Web パーツをコンシューマー Web パーツに接続します。

Web パーツを接続するには

  1. このタスクでは、プロバイダー Web パーツをコンシューマー Web パーツに接続します。

  2. [接続]、[Project Name and ID の取得] の順にポイントして、[ConsumerWebPart] をクリックします。

    プロジェクトのタイトルが ConsumerWebPart Web パーツに表示されます。

  3. プロバイダー Web パーツ リストで異なる選択を行います。図 6 に示すように、タイトルの変更がコンシューマー Web パーツ ゾーンに反映されます。

    図 6. プロバイダー Web パーツでの変更がコンシューマー Web パーツに反映される

    プロバイダー Web パーツの変更の反映

次の手順