次の方法で共有


SharePoint のクライアント コード ライブラリを使用して外部データにアクセスする

ブラウザーベースのスクリプトを使用する SharePoint で、SharePoint クライアント オブジェクト モデルを使用して Business Connectivity Services (BCS) オブジェクトを処理する方法について説明します。

この記事は、SharePoint でクライアント オブジェクト モデルを使用して OData (Open Data プロトコル) ソースからデータを取得する外部リストをセットアップする方法を示します。

SharePoint クライアント オブジェクト モデルを使用して外部データにアクセスするための前提条件

以下は、SharePoint クライアント オブジェクト モデルを使用してアプリを開発するための要件です。

  • SharePoint

  • Visual Studio 2012

  • Office Developer Tools for Visual Studio 2012

  • 機能している SharePoint アドイン開発環境: 「 SharePoint の一般的な開発環境を設定する」の手順に従います。

  • パブリック OData.org プロデューサーへのアクセス

SharePoint クライアント オブジェクト モデルで外部データにアクセスする際に知っておく必要がある主な概念

SharePoint クライアント オブジェクト モデルは、サーバー側の API を模倣するクライアント側の呼び出しを使用して外部データにアクセスする手段を提供します。 仕組みと使用方法については、表 1 で示されている記事を参照してください。

表 1. クライアント オブジェクト モデルを使用するための主な概念

記事 説明
SharePoint のクライアント ライブラリ コードを使用して基本的な操作を完了する
SharePoint .NET Framework クライアント オブジェクト モデル (CSOM) で基本操作を実行するコードを作成する方法を学習します。

クライアント オブジェクト モデルを使用して外部データにアクセスする SharePoint アドインの作成

以下の手順は、クライアント オブジェクト モデルのメソッドとオブジェクトを使用して外部データ ソースからデータを取得する要求を作成するために SharePoint アドインをセットアップして Web ページを構成する方法を示しています。

SharePoint アドインの作成

  1. Visual Studio 2012 を開きます。

  2. SharePoint 用アプリ プロジェクトを作成します。

  3. アプリ名、アプリをデバッグするためのサイト URL、アプリのホスト方法 (自動ホスト、プロバイダーホスト、SharePoint ホスト) を含むアプリ設定を指定します。 ホスティング オプションの詳細については、「 SharePoint アドインを開発およびホストするためのパターンを選択する」を参照してください。

  4. [ 完了] をクリックしてアプリを作成します。

外部コンテンツ タイプを生成するには

  1. ソリューション エクスプローラーでプロジェクトのショートカット メニューを開き、[ 追加]、[ Content types for External Data source (外部データ ソース用のコンテンツ タイプ)] の順に選択します。

  2. [ Specify OData Source (OData ソースの指定)] ウィザードで、接続先の OData サービスの URL を入力します。 この例では、 http://www.odata.org/ecosystem で公開されている Northwind OData ソースを使用します。 OData サービスの URL を に設定する http://services.odata.org/Northwind/Northwind.svc/

    データ ソースの名前を指定し、[ 次へ] をクリックします。

  3. OData サービスによって露出されるエンティティのリストが表示されます。 [ Customers (顧客)] エンティティーを選択してください。 [ Create list instances for the selected data entities (except Service Operations) (選択したデータ エンティティのリスト インスタンスの作成 (サービス操作を除く))] チェックボックスがオンになっていることを確認してください。

  4. [ 完了] を選択します。

コードの例: Default.aspx ページにスクリプトと HTML を追加する

この時点で、Netflix OData ソースからのデータを表示する外部コンテンツ タイプと外部リストが存在するようになりました。

次の目的は、アプリの作成時に作成した default.aspx ページを変更することです。 ページが読み込まれた状態で実行されるクエリの結果を保持するコンテナーを追加します。 ページ読み込みイベントでスクリプトを実行すると、ページが参照されるたびにスクリプトが実行され、結果として得られるクライアント オブジェクト モデルの呼び出しが Netflix OData ソースに対して実行され、ページにレコードが追加されます。

コンテナーを Default.aspx ページに追加するには

  1. ソリューション エクスプローラーで、[ Pages (ページ)] モジュールにある Default.aspx ページを開きます。

  2. 次の div 要素をページに追加します。

  
<div id="displayDiv"></div>
  1. ページを保存します。

最後に、ページのロード時に実行される App.js ファイルにコードを追加します。

クライアント オブジェクト モデル呼び出しを行うように App.js ファイルを変更するには

  1. SharePoint プロジェクトの [Scripts (スクリプト)] モジュールで App.js ファイルを開きます。

  2. ファイルの末尾に次のコードを貼り付けます。

  $(document).ready(function () {

    // Namespace
    window.AppLevelECT = window.AppLevelECT || {};

    // Constructor
    AppLevelECT.Grid = function (hostElement, surlWeb) {
        this.hostElement = hostElement;
        if (surlWeb.length > 0 &amp;&amp; surlWeb.substring(surlWeb.length - 1, surlWeb.length) != "/")
            surlWeb += "/";
        this.surlWeb = surlWeb;
    }

    // Prototype
    AppLevelECT.Grid.prototype = {

        init: function () {

            $.ajax({
                url: this.surlWeb + "_api/lists/getbytitle('Customer')/items?$select=BdcIdentity,CustomerID,ContactName",
                headers: {
                    "accept": "application/json",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success: this.showItems
            });
        },

        showItems: function (data) {
            var items = [];

            items.push("<table>");
            items.push('<tr><td>Customer ID</td><td>Customer Name</td></tr>');

            $.each(data.d.results, function (key, val) {
                items.push('<tr id="' + val.BdcIdentity + '"><td>' +
                    val.CustomerID + '</td><td>' +
                    val.ContactName + '</td></tr>');
            });

            items.push("</table>");

            $("#displayDiv").html(items.join(''));
        }
    }

    ExecuteOrDelayUntilScriptLoaded(getCustomers, "sp.js");
});

function getCustomers() {
    var grid = new AppLevelECT.Grid($("#displayDiv"), _spPageContextInfo.webServerRelativeUrl);
    grid.init();
}

F5 キーを押して、アプリを SharePoint に展開します。 Default.aspx ページをアプリで参照すると、顧客リストがページに表示されます。

関連項目