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

[アーティクル]
09/24/2014

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 に示すフィールドを含める必要があります。このリストを作成するには、次の手順を実行します。

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

Web パーツに追加する SharePoint 2010 Web サイト ( https://localhost/sites/SampleWebPartSite など) を Internet Explorer で開きます。
[サイトの操作]、[その他のオプション]、[カスタムリスト] の順にクリックします。
[名前] ボックスに「Projects」と入力して、[作成] をクリックします。
[リストツール] タブで [リスト] をクリックし、[ビューの管理] グループで [ビューの変更] をクリックします。
すべての [列名] オプションをオフにしてから、[ID] オプションと [タイトル] オプションを選択します。[OK] をクリックします。
[新しいアイテムの追加] をクリックして、表 1 の先頭行 (ヘッダー行は無視する) に情報を追加します。ID フィールドが自動的に更新されます。

タイトル

サンプルコードの作成

開発者向けツールの作成

フォーラムの質問に回答

開発者向け記事の作成
表 1 の残りの行に対して手順 6. を繰り返します。

タイトル
サンプルコードの作成
開発者向けツールの作成
フォーラムの質問に回答
開発者向け記事の作成

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

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

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

Visual Studio 2010 を起動し、[ファイル] をクリックし、[新規作成] をポイントし、[プロジェクト] をクリックします。
[インストールされているテンプレート] セクションの [Visual C#] ノードをクリックし、[SharePoint]、[2010] の順にクリックします。
[空の SharePoint プロジェクト] プロジェクトテンプレート (図 1 を参照) をクリックし、プロジェクトの名前 (ConnectTwoWebParts など) と場所を入力して、[OK] をクリックします。

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

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

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

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

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

ソリューションエクスプローラーで [ConnectTwoWebParts] を右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。
[新しいアイテムの追加] ダイアログウィンドウで [Visual C#]、[コード] の順にクリックし、使用可能なテンプレートから [インターフェイス] を選択します。
[名前] ボックスに「IProject」と入力して、[追加] をクリックします。
ソリューションエクスプローラーで [IProject.cs] ファイルをダブルクリックします。
インターフェイス宣言の前にキーワード public を置いて、インターフェイスの表示をパブリックに変更します (図 2 を参照)。

図 2. IProject インターフェイス
以下のコードを IProject インターフェイスの内側に挿入します。
```
int Id { get; } 
string Name { get; }
```

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

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

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

ソリューションエクスプローラーで [ConnectTwoWebParts] を右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。
[インストールされているテンプレート] セクションの [Visual C#] ノードをクリックし、[SharePoint]、[2010] の順にクリックします。使用可能なテンプレートから [Web パーツ] を選択します。
[名前] ボックスに「ProviderWebPart」と入力して、[追加] をクリックします。

プロバイダー Web パーツがプロジェクトに追加されます。
ソリューションエクスプローラーで [ProviderWebPart.cs] をダブルクリックして、コードファイルを開きます。
ProviderWebPart クラス宣言内で、WebPart を以下のように変更することにより、ProviderWebPart クラスの継承元であるクラスを置き換えます。
```
Microsoft.SharePoint.WebPartPages.WebPart, IProject
```
ProviderWebPart クラス宣言内の左かっこ ({) のすぐ後に以下のコードを挿入します。このコードブロックは、IProject Web パーツ接続インターフェイスを実装し、ローカル変数を Web パーツに追加します。
```
DropDownList _projectPicker = null;  
int IProject.Id 
{ 
    get { return int.Parse(_projectPicker.SelectedValue); } 
} 

string IProject.Name 
{ 
    get { return _projectPicker.SelectedItem.ToString(); } 
}
```

以下のコードを 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)); 
}

以下の ConnectionProvider プロパティを CreateChildControls サブルーチンの後に挿入します。これにより、ProviderWebPart 用の接続プロバイダーインターフェイスポイントが提供されます。
```
[ConnectionProvider("Project Name and ID")] 
public IProject NameDoesNotMatter() 
{ 
    return this; 
}
```
存在する場合は、RenderContents サブルーチンを削除します。

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

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

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

ソリューションエクスプローラーで [ConnectTwoWebParts] を右クリックし、[追加] をポイントし、[新しいアイテム] をクリックします。
[インストールされているテンプレート] セクションの [Visual C#] ノードをクリックし、[SharePoint]、[2010] の順にクリックします。使用可能なテンプレートから [Web パーツ] を選択します。
[名前] ボックスに「ConsumerWebPart」と入力して、[追加] をクリックします。

コンシューマー Web パーツがプロジェクトに追加されます。
ソリューションエクスプローラーで [ConsumerWebPart.cs] をダブルクリックして、コードファイルを開きます。
ConsumerWebPart クラス宣言内の左かっこ ({) の後に以下のコードを挿入します。
```
IProject _provider = null; 
Label _lbl = null;
```

以下のコードを 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)); 
}

以下の ConnectionConsumer プロパティを CreateChildControls サブルーチンの後に挿入します。これにより、ConsumerWebPart Web パーツ用の接続コンシューマーインターフェイスポイントが提供されます。
```
[ConnectionConsumer("Project Name and ID")] 
public void ThisNameDoesNotMatter(IProject providerInterface) 
{ 
    _provider = providerInterface; 
}
```
存在する場合は、RenderContents サブルーチンを削除します。

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

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

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

ソリューションエクスプローラーで [ConnectTwoWebParts] を右クリックして、[配置] をクリックします。
Internet Explorer を開き、プロジェクト用に指定した Web サイトに移動します。
[サイトの操作] メニューをクリックして、[その他のオプション] をクリックします。
スクロールして、[Web パーツページ] をクリックします。[名前] ボックスに「SampleWebPartPage」と入力して、[作成] をクリックします。

SharePoint Foundation によって Web パーツページが作成され、編集モードで開かれます。
青いボックス内の Web パーツゾーンのいずれかをクリックします。
[カテゴリ] ボックスで [カスタム] を選択し (図 3 を参照)、[ConsumerWebPart] を選択して、[追加] をクリックします。

図 3. ConsumerWebPart を選択する
図 4 に示すように、ConsumerWebPart がページに追加されます。

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

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

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

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

Web パーツを接続するには

このタスクでは、プロバイダー Web パーツをコンシューマー Web パーツに接続します。
[接続]、[Project Name and ID の取得] の順にポイントして、[ConsumerWebPart] をクリックします。

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

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