LINQ を使用して SharePoint 2010 データで Silverlight グラフを作成する

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

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

SharePoint 2010 での Web 開発の概要: LINQ を使用して Microsoft SharePoint 2010 リストデータを取得し、そのデータをグラフとして表示する Microsoft Silverlight アプリケーションを作成します。

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

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

この記事の内容
Silverlight アプリケーションプロジェクトを作成する
リストデータにアクセスし、Silverlight グラフコントロールに表示するコードを追加する
ソリューションを配置してテストする
次の手順

この演習では、Silverlight グラフコントロールを使用して、SharePoint リストデータをグラフとして表示する Microsoft Silverlight 3 アプリケーションを作成します。このタスクを完了するには、以下の作業を実行します。

Silverlight アプリケーションプロジェクトを作成する
リストデータにアクセスし、Silverlight グラフコントロールに表示するコードを追加する
ソリューションを配置してテストする

この演習では、読者が「SharePoint 2010 データにアクセスする Silverlight アプリケーションを作成する」を完了しているものと想定しています。このトピックでは、SharePoint リストデータを取得して Web サイト上の DataGrid コントロールに表示する Microsoft Silverlight 3 アプリケーションの作成方法について説明しています。

Silverlight アプリケーションプロジェクトを作成する

このタスクでは、Silverlight アプリケーションプロジェクトを Microsoft Visual Studio 2010 に作成します。

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

Visual Studio 2010 を起動し、[ファイル] をクリックし、[新規作成] をポイントし、[プロジェクト] をクリックします。
[インストールされているテンプレート] セクションで [その他のプロジェクトの種類] ノードに移動し、[Visual Studio ソリューション]、[空のソリューション] の順にクリックします。
画面の上部で、[.NET Framework 3.5] を選択し、[名前] ボックスに「Begin」と入力して、[OK] をクリックします。
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[インストールされているテンプレート] セクションで [Visual C#] ノードを展開し、[Silverlight]、[Silverlight アプリケーション] の順にクリックします。
画面の上部で [.NET Framework 3.5] を選択し、[名前] ボックスに「SilverlightEmployeeContributionsGraph」と入力して、[OK] をクリックします。
[新しい Silverlight アプリケーション] ダイアログ画面で [OK] をクリックします。
次に、SharePoint Silverlight クライアントオブジェクトモデルへの参照を追加します。ソリューションエクスプローラーで [SilverlightEmployeeContributionsGraph] ノードを右クリックして、[参照の追加] をクリックします。
次のフォルダーに移動します。 C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin
[Microsoft.SharePoint.ClientSilverlight.dll] と [Microsoft.SharePoint.Client.Silverlight.Runtime.dll] を選択して、[OK] をクリックします。
次に、Silverlight チャートコントロールアセンブリへの参照を追加します。このアセンブリは [参照の追加] ダイアログ画面の [.NET] タブに System.Windows.Controls.DataVisualization.Toolkit という名前で表示されます。

注意

このアセンブリが [参照の追加] ダイアログ画面に表示されない場合は、Microsoft Silverlight Toolkit (英語) をインストールしてください。

リストデータにアクセスし、Silverlight グラフコントロールに表示するコードを追加する

このタスクでは、LINQ と Silverlight チャートコントロールを使用して SharePoint リストデータにアクセスし、そのデータをグラフに表示できるようにするコードを追加します。

コードをプロジェクトに追加するには

ソリューションエクスプローラーで [App.xaml] ファイルを右クリックして、[コードの表示] をクリックします。以下の using ステートメントをファイルの先頭に追加します。
```
using Microsoft.SharePoint.Client;
using System.Threading;
```
以下のコードを Application_Startup メソッドの先頭に追加します。
```
ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);
```

MainPage.xaml ファイルの XAML ビューで、以下の XML 名前空間を UserControl 要素に追加します。

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

以下の Silverlight チャートコントロールを grid 要素の内側に追加します。

<chartingToolkit:Chart x:Name="chart" Width="350" Height="250" Title="Team Contributions">
    <chartingToolkit:Chart.Series>
        <chartingToolkit:ColumnSeries ItemsSource="{Binding}" 
            DependentValuePath="Contributions" 
            IndependentValuePath="Name"
            AnimationSequence="FirstToLast"   
            Title="Contributions" IsSelectionEnabled="True" />
    </chartingToolkit:Chart.Series>
</chartingToolkit:Chart>

MainPage.xaml.cs を開き、以下の using ステートメントをファイルの先頭に追加します。
```
using Microsoft.SharePoint.Client;
```

以下のクラスを MainPage クラスの前に追加します。

public class EmployeeContributions
{
    public string Name { get; set; }
    public string TeamName { get; set; }
    public decimal Contributions { get; set; }
}

public class TeamContributions
{
    public string Name { get; set; }
    public decimal Contributions { get; set; }
}

以下の変数を MainPage クラスに追加します。
```
private ListItemCollection _employees;
```

initializeComponent の呼び出しの後に、以下のコードを MainPage メソッドに追加します。

ClientContext context = new ClientContext(ApplicationContext.Current.Url);
context.Load(context.Web);
List employees = context.Web.Lists.GetByTitle("Employees");
context.Load(employees);

CamlQuery query = new CamlQuery();
string camlQueryXml = null;

query.ViewXml = camlQueryXml;
_employees = employees.GetItems(query);
context.Load(_employees);
context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);

MainPage メソッドの後に以下のコードを追加します。

private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
{
    // This is not called on the UI thread.
    Dispatcher.BeginInvoke(BindData);
}

private void BindData()
{
    List<EmployeeContributions> employees = new List<EmployeeContributions>();

        // Get the list item values into a strongly-typed class.
        foreach (ListItem li in _employees)
        {
            employees.Add(new EmployeeContributions
            {
                Name = li["Title"].ToString(),
                TeamName = li["Team"].ToString(),
                Contributions = Convert.ToDecimal(li["Contribution_x0020__x0028_in_x00"])
            });
        }

        // Use LINQ to organize employees by team name and then total team contributions.
         List<TeamContributions> teams = employees
             .GroupBy(e => e.TeamName)
             .Select(t => new TeamContributions
             {
                 Name = t.Key,
                 Contributions = t.Sum(e => e.Contributions)
             }).ToList();
         // This must be on a UI thread.
         chart.DataContext = teams; 
}

追加したコードの中では、SharePoint Silverlight クライアントオブジェクトモデルが SharePoint リストからデータを取得しています。従業員貢献度アイテムがリストに追加されると、LINQ によって従業員がチームにまとめられ、従業員貢献度が合計されます。その後、チーム貢献度がグラフのデータソースとして設定されます。

ソリューションを配置してテストする

このタスクでは、Silverlight Web パーツを Web サイト上のページに追加することにより、ソリューションを配置してテストします。

ソリューションをテストするには

ソリューションを SharePoint に配置するには、Silverlight プロジェクトによって作成された .xap ファイルを C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin フォルダーに配置する必要があります。

[SilverlightEmployeeContributionsGraph] ノードを右クリックし、[プロパティ] 、[ビルド] の順にクリックします。
[出力パス] を C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin に変更します。
[SilverlightEmployeeContributionsGraph] ノードを右クリックし、[ビルド] をクリックして、ソリューションをビルドします。.xap ファイルが目的のディレクトリにコピーされ、Silverlight Web パーツを SharePoint Web サイトに追加できるようになりました。
Internet Explorer を開き、指定した Web サイトに移動します。
次に、「SharePoint 2010 データにアクセスする Silverlight アプリケーションを作成する」で追加した Silverlight Web パーツを更新して、このトピックで作成した Silverlight チャートコントロールを指すようにします。Silverlight Web パーツの右上隅にあるドロップダウンリストをクリックして、[Web パーツの編集] をクリックします。
画面右端の [構成] をクリックし、Silverlight Web パーツのダイアログ画面で「/_layouts/ClientBin/SilverlightEmployeeContributionsGraph.xap」と入力します。
[OK] をクリックして、Silverlight Web パーツのサイドバー下部にある [OK] をクリックします。

結果は図 1 のようになります。

図 1. Silverlight グラフ Web パーツ

次の方法で共有

LINQ を使用して SharePoint 2010 データで Silverlight グラフを作成する

Silverlight アプリケーションプロジェクトを作成する

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

リストデータにアクセスし、Silverlight グラフコントロールに表示するコードを追加する

コードをプロジェクトに追加するには

ソリューションを配置してテストする

ソリューションをテストするには

次の手順

その他のリソース

次の方法で共有

LINQ を使用して SharePoint 2010 データで Silverlight グラフを作成する

Silverlight アプリケーション プロジェクトを作成する

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

リスト データにアクセスし、Silverlight グラフ コントロールに表示するコードを追加する

コードをプロジェクトに追加するには

ソリューションを配置してテストする

ソリューションをテストするには

次の手順

その他のリソース

Silverlight アプリケーションプロジェクトを作成する

リストデータにアクセスし、Silverlight グラフコントロールに表示するコードを追加する