SharePoint Online でのデータ ストレージ オプションData storage options in SharePoint Online

この記事では、Core.DataStorageModels サンプル アプリについて説明します。これは、以下のデータ ストレージ オプションと、それぞれの長所と短所を示します。This article describes the Core.DataStorageModels sample app, which shows you each of the following data storage options and the advantages and disadvantages of each:

  • アドイン Web の SharePoint リストSharePoint list on the host web
  • ホスト Web の SharePoint リストSharePoint list on the host web
  • 外部 Web サービスExternal web service
  • Azure のテーブル ストレージAzure table storage
  • Azure のキュー ストレージAzure queue storage
  • Azure SQL データベースDeploy the Microsoft Azure SQL Database

Core.DataStorageModels サンプル アプリは、C# と JavaScript で記述されたプロバイダーホスト型アドインで、ホスト Web とアドイン Web の両方に多くの SharePoint アーティファクト (リスト、アドイン パーツ、Web パーツ) を展開します。The Core.DataStorageModels sample app is a provider-hosted add-in written in C# and JavaScript that deploys a number of SharePoint artifacts (lists, add-in part, web part) to both the host web and the add-in web. アドイン Web とホスト Web の SharePoint リストと対話し、Azure SQL データベース、Azure キュー ストレージ、Azure テーブル ストレージ、および OData を実装するリモート Web サービスの呼び出しも行います。It interacts with SharePoint lists on the add-in web and host web, and also makes calls to Azure SQL Database, Azure Queue storage, and Azure Table storage, and a remote web service that implements OData. このサンプルでは、モデル ビュー コントローラー パターンを使用します。This sample uses the Model-View-Controller pattern.

次の表に示すように、Core.DataStorageModels サンプル アプリは、各データ ストレージ オプションに最も適した特定の機能にそのオプションを適用します。The Core.DataStorageModels sample app applies each data storage option to a specific function for which the option is well-suited, as described in the following table.

サンプル アプリのストレージのオプションSample app storage option 使用目的Used for
SharePoint リスト アドイン WebSharePoint list add-in web お客様の注意事項Customer notes
ホスト Web の SharePoint リストSharePoint list host web サポート事例Support cases
Northwind OData Web サービスCall the Northwind OData web service お客様Customers
Azure のテーブル ストレージAzure table storage CSR 評価CSR ratings
Azure のキュー ストレージAzure queue storage コール キューCall queue
Azure SQL の Northwind データベースSQL Azure Northwind database 注文、受注明細、製品Orders, order details, products

サンプル アプリは、顧客サービス ダッシュボードと関連インターフェイスを実装します。インターフェイスでは、最近の注文、顧客担当者アンケート評価、お客様の注意事項、サポート事例、および顧客担当者のコール キューを表示します。The app implements a customer service dashboard and related interfaces that show recent orders, customer representative survey ratings, customer notes, support cases, and a customer representative call queue. The first two scenarios let you retrieve data by using relatively simply client object model code or REST queries, but are limited by list query thresholds. The next four scenarios uses different types of remote storage.

最初の 2 つのシナリオでは、比較的単純なクライアント オブジェクト モデル コードまたは REST クエリを使用してデータを取得できますが、リスト クエリのしきい値で制限されます。次の 4 つのシナリオでは、さまざまな種類のリモート ストレージを使用します。The app implements a customer service dashboard and related interfaces that show recent orders, customer representative survey ratings, customer notes, support cases, and a customer representative call queue. The first two scenarios let you retrieve data by using relatively simply client object model code or REST queries, but are limited by list query thresholds. The next four scenarios uses different types of remote storage.

SharePoint コンポーネントを展開するよう促すデータ ストレージ モデルの開始ページFigure 1. Data storage models start page prompts you to deploy SharePoint components

アプリ サンプル UI のスクリーンショット

はじめにBefore you begin

このサンプルを使用する前に、次に示すものが準備されていることを確認してください。Before you use this sample, make sure that you have the following:

  • Azure SQL データベースを展開して Azure Storage アカウントを作成できる Microsoft Azure アカウント。A Microsoft Azure account where you can deploy a SQL Azure database and create an Azure storage account.

  • Visual Studio からサンプルを展開できる SharePoint 開発者サイトA SharePoint developer site so that you can deploy the sample from Visual Studio 2013.

さらに、Northwind データベースを Microsoft Azure に展開する必要があります。Also, you need to deploy the Northwind database to Microsoft Azure.

Northwind データベースを展開するにはTo deploy the Northwind database

  1. Azure Portal にサインインし、[SQL データベース] > [サーバー] の順にクリックします。Sign in to the Azure portal and choose SQL Databases > Servers.

  2. [SQL データベース サーバーを作成する] をクリックします。Choose Create a SQL Database Server.

  3. [サーバーの作成] フォームで、[ログイン名][ログイン パスワード]、および [リージョン] の値を入力します。In the Create Server form, enter values for Login Name, Login Password, and Region, as shown in Figure 2.

    SQL データベース サーバーの設定を示します

  4. チェック ボックスをクリックして終了し、サーバーを作成します。Select the check box to finish and create the server.

  5. これでデータベースが作成されたので、作成済みサーバーの名前をクリックします。Now that you've created the database, choose the server name that you created, as shown in Figure 3.

    SQL データベースのリストを示します

  6. [構成] をクリックし、右下隅にある矢印をクリックして構成を完了し、[保存] をクリックします。Choose CONFIGURE, and then choose the arrow in the lower right corner to complete the configuration, and choose SAVE.

  7. ローカルの開発用コンピューターで SQL Server Management Studio を開き、「NorthWind」という名前の新しいデータベースを作成します。Open SQL Server Management Studio on your local development computer and create a new database named NorthWind.

  8. オブジェクト エクスプローラー で、Northwind データベースをクリックしてから、[新しいクエリ] をクリックします。In the Object Explorer, select the Northwind database, and then choose New Query.

  9. お好みのテキスト エディターで、Core.DataStorageModels サンプルに付属の northwind.sql SQL スクリプトを開きます。In a text editor of your choice, open the northwind.sql SQL script that is provided with the Core.DataStorageModels sample.

  10. northwind.sql ファイルにあるテキストをコピーし、SQL Server Management Studio の [SQL クエリ] ウィンドウにペーストします。続いて、[実行] をクリックします。Copy the text in the northwind.sql file and paste it into the SQL Query window in the SQL Server Management Studio, and then choose Execute.

  11. オブジェクト エクスプローラー で、Northwind データベースのショートカット メニューを開き (右クリック)、[タスク] を選択してから、[SQL Azure へのデータベースの配置] を選択します。In the Object Explorer, open the shortcut menu for (right-click) the Northwind database, select Tasks, and then select Deploy Database to SQL Azure.

  12. [概要] の画面で、[次へ] をクリックします。On the Introduction screen, choose Next.

  13. [接続] をクリックしてから、先ほど作成した Azure SQL データベース サーバーの サーバー名 を入力します。Choose Connect ... and enter the Server name for the SQL Azure Database Server you just created.

  14. [認証] リストで、[SQL Server 認証] を選択します。In the Authentication dropdown, select SQL Server Authentication.

  15. Azure SQL データベース サーバーの作成時に使用したユーザー名とパスワードを入力してから、[接続] をクリックします。Enter the user name and password you used when you created the SQL Azure Database server, then choose Connect.

  16. [次へ] をクリックしてから、[終了する] をクリックし、データベースが作成されるまで待機します。Choose Next, and then choose Finish, and wait until the database is created. After it is created, choose Close to close the wizard. データベースが作成された後、[閉じる] をクリックし、ウィザードを閉じます。 Choose Next, and then choose Finish, and wait until the database is created. After it is created, choose Close to close the wizard.

  17. Azure Portal に戻り、Northwind データベースが正常に作成されたことを確認します。Return to the Azure portal to verify that the Northwind database was created successfully. sql データベース画面のリストにこれが表示されているはずです。You should see it listed on the sql databases screen.

    Northwind を含む、すべての SQL データベースのリストを示します

  18. Northwind データベースをクリックしてから、[SQL データベースの接続文字列を表示する] をクリックします。Select the Northwind database, and then select View SQL Database connection strings.

  19. 接続文字列をコピーして、テキスト ファイルに貼り付け、ローカルに保存します。Copy the connection string and paste it into a text file and save it locally. You will need this connection string later. Close the Connection Strings dialog box. この接続文字列は、あとで必要になります。You will need this connection string later. [接続文字列] ダイアログ ボックスを閉じます。Close the Connection Strings dialog box.

  20. [この IP アドレスに Windows Azure ファイアウォール規則を設定する] というリンクをクリックし、ファイアウォール規則に IP アドレスを追加して、データベースにアクセスできるようにします。Choose the Set up Windows Azure firewall rules for this IP address link and add your IP address to the firewall rules to allow you to access the database.

  21. Visual Studio で Core.DataStorageModels.sln プロジェクトを開きます。Open the Core.DataStorageModels.sln project in Visual Studio 2013.

  22. Visual Studio のソリューション エクスプローラー で Web.config ファイルを検索します。In the Visual Studio Solution Explorer, locate the Web.config file.

  23. Web.config ファイル内で add name="NorthWindEntities" 要素を見つけ、既存の connectionString 値を、手順 19 でローカルに保存した接続文字列情報に置き換えます。 In the Web.config file, locate the add element and replace the existing connectionString value with the connection string information that you saved locally in step 19.

      <add name="NorthWindEntities" 
      connectionString="metadata=res://*/Northwind.csdl|res://*/Northwind.ssdl|res://*/Northwind.msl;provider=System.Data.SqlClient;provider connection string=&amp;quot;data source=<Your Server Here>.database.windows.net;initial catalog=NorthWind;user id=<Your Username Here>@<Your Server Here>;password=<Your Password Here>;MultipleActiveResultSets=True;App=EntityFramework&amp;quot;"
      providerName="System.Data.EntityClient" />
    


  24. Web.config ファイルを保存します。Save the Web.config file.

アドイン Web の SharePoint リスト (メモのシナリオ)SharePoint list on the app web (Notes scenario)

メモ (Notes) のシナリオは、アドイン Web で SharePoint リストを使用し、SharePoint アドイン Web でリストがどのように機能するかを示します。The Notes scenario, which uses a SharePoint list on an add-in web, shows how lists perform in a SharePoint Add-in web. メモ リストは、タイトルと説明フィールドを使ってアドイン Web で作成されます。The Notes list is created in the add-in web with a title and description field. SharePoint REST API は、メモ リストに対してクエリを実行し、顧客 ID に基づいてすべてのメモを返します。The SharePoint REST API queries the Notes list and returns all the notes based on a customer ID.

アドイン Web でリストを使用する方法には、他のストレージ ソリューションに勝る 1 つの大きな利点があります。つまり、単純な SharePoint REST API 呼び出しを使ってデータをクエリできることです。Using lists in the app web has one important advantage over other storage solutions: you can use simple SharePoint REST API calls to query data. However, there are some disadvantages:

ただし、以下に挙げる短所もあります。However, there are some disadvantages:

  • リストのメタデータを更新するには、アドインを更新して再展開する必要がある。To update list metadata, you must update and redeploy the app.
  • データ構造を更新するには、データの保存と更新用のアプリケーション ロジックを書き直す必要がある。To update the data structure, you must rewrite application logic for storing and updating data.
  • リストに格納された情報は、その他のアドインと簡単に共有できない。Information stored in the list cannot be shared easily with other add-ins.
  • SharePoint でデータを検索できない。You cannot search for data in SharePoint.
  • リスト内に格納できるデータの量とクエリの結果セットのサイズに制限がある。The amount of data that you can store in lists and the size of query result sets are limited.

顧客ダッシュボードのメモ セクションの基礎となるコードでは、REST クエリを使用して、アドイン Web に展開されるリストからデータを取得します。The code that underlies the Notes section of the customer dashboard uses REST queries to retrieve data from a list that is deployed to the app web. This list contains fields for titles, authors, customer IDs, and descriptions. You can use the app's interface to add and retrieve notes for a specified customer, as shown in Figure 5. このリストには、タイトル、作成者、顧客 ID、および説明用のフィールドが含まれています。This list contains fields for titles, authors, customer IDs, and descriptions. 次の図に示すように、アドインのインターフェイスを使用して、特定の顧客に関するメモを追加および取得できます。You can use the add-in's interface to add and retrieve notes for a specified customer, as shown in the following figure.

メモ アドインのユーザー インターフェイスFigure 5. User interface for the Notes app

メモ データ ストレージ モデル用 UI を示すスクリーンショット

[アプリ Web にメモ リストを表示する] リンクでは、リスト データを示すそのまま使用できるビューが表示されます。The View Notes List in App Web link provides an "out of the box" view of the list data.

このアドインでは、モデル ビュー コントローラー パターンを使用します。This add-in uses the Model-View-Controller pattern. Views/CustomerDashboard/Notes.cshtml ファイルにあるメモ シナリオ用のコードを表示できます。You can see the code for the Notes scenario in the Views/CustomerDashboard/Notes.cshtml file. 単純な REST 呼び出しを使用して、データを追加および取得します。It uses simple REST calls to add and retrieve data.

次のコードでは、特定の顧客に関するメモ リストからメモを取得します。The following code retrieves notes from the Notes list for a specified customer.

function getNotesAndShow() {
    var executor = new SP.RequestExecutor(appWebUrl);
    executor.executeAsync(
       {
           url: appWebUrl + "/_api/web/lists/getByTitle('Notes')/items/" +
                "?$select=FTCAM_Description,Modified,Title,Author/ID,Author/Title" +
                "&amp;$expand=Author/ID,Author/Title" +
                "&amp;$filter=(Title eq '" + customerID + "')",
           type: "GET",
           dataType: 'json',
           headers: { "accept": "application/json;odata=verbose" },
           success: function (data) {
               var value = JSON.parse(data.body);
               showNotes(value.d.results);
           },
           error: function (error) { console.log(JSON.stringify(error)) }
       }

    );
}


次のコードでは、所定の顧客に関するメモをメモ リストに追加します。The following code adds a note for a given customer to the notes list.

function addNoteToList(note, customerID) {
    var executor = new SP.RequestExecutor(appWebUrl);
    var bodyProps = {
        '__metadata': { 'type': 'SP.Data.NotesListItem' },
        'Title': customerID,
        'FTCAM_Description': note
    };
    executor.executeAsync({
        url: appWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle('Notes')/items?@target='" + appWebUrl + "'",
        contentType: "application/json;odata=verbose",
        method: "POST",
        headers: {
            "accept": "application/json;odata=verbose",
            "content-type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        body: JSON.stringify(bodyProps),
        success: getNotesAndShow,
        error: addNoteFailed
    });
}


リストに 5000 アイテムを追加することがあります。この場合、5000 アイテム以上からなる結果セットがリスト クエリで生成される場合にリスト クエリしきい値に達し、失敗することが表示されます。You can add 5,000 items to the list to show that list queries that generate a result set of 5,000 or more items reach the list query threshold and fail. また、サイト コレクションの容量制限を超えるほど大量のデータをアドイン Web のリストに追加することもあります (これは、どの程度の記憶領域をサイト コレクションに割り当てたかに依存します)。You can also add so much data to your list on the add-in web that you exceed the storage limit for your site collection (which depends on how much storage space you've allocated to it).

これらのシナリオは、この手法で特に重要な 2 つの制限事項、つまりリスト クエリ サイズ制限と記憶領域の制限を示しています。These scenarios show two of the most important limitations of this approach: list query size limits and storage space limits. ビジネス ニーズに従い、大規模なデータ セットとクエリ結果セットを扱う必要がある場合には、この手法は不適切です。If your business needs require you to work with large data sets and query result sets, this approach won't work.

リスト クエリのしきい値List query threshold

リスト クエリのしきい値の制限を超えるデータを読み込むには: To load enough data to exceed the list query threshold limit:

  1. 左側のメニューで、[サンプルのホームページ] をクリックします。In the left menu, choose Sample Home Page.

  2. [リスト クエリのしきい値] セクションで、[アドイン Web のメモ リストにリスト項目を追加する] をクリックします。In the List Query Thresholds section, choose Add list items to the Notes list in the App Web.

  3. ボタンの上に表示される指示に従って、この操作を 10 回実行します。Per the instructions that appear above the button, perform this operation 10 times.

    メモ リストを更新すると、追加したリスト アイテム (メモ) の数とまだ追加されていないリスト アイテムの数を示すメッセージがページの上部に表示されます。When the Notes list is updated, a message appears at the top of the page that indicates how many list items (Notes) you added and how many are left to add.

    注意

    この操作の実行は、ボタンを選択するたびに約 1 分かかります。The operation takes about one minute to run each time you choose the button. この操作を 10 回実行した場合の最終結果が、次の図に示されています。The end result of running the operation 10 times is shown in Figure 6.

  4. リストに 5001 アイテムを追加してから、左側のメニューにある [メモ] をクリックします。After you've added 5,001 items to the list, choose Notes in the left menu. When the page loads, you will see the error message shown in Figure 6, which comes from the SharePoint REST API. ページの読み込み中、次の図に示すように、SharePoint REST API からエラー メッセージが表示されます。After you've added 5,001 items to the list, choose Notes in the left menu. When the page loads, you will see the error message shown in Figure 6, which comes from the SharePoint REST API.

    操作によってリスト ビューのしきい値を超えたことを示すエラー メッセージが表示されたスクリーンショット。

  5. [アプリ Web にメモのリストを表示する] をクリックして、リストをページごとに表示していくと、500 行あることがわかります。Choose View Notes List in App Web and page through the list to see that it includes 500 rows. Note that although SharePoint list views can accommodate browsing of this many entries, the REST API fails due to the list query throttling threshold. SharePoint リスト ビューはこの数のエントリの表示に対応できますが、REST API はリスト クエリ調整しきい値が原因で失敗します。Choose View Notes List in App Web and page through the list to see that it includes 500 rows. Note that although SharePoint list views can accommodate browsing of this many entries, the REST API fails due to the list query throttling threshold.

データ ストレージの制限Data storage limit

データ ストレージの制限を超えるデータを読み込むには: To load enough data to exceed the data storage limit:

  1. 左側のメニューで、[サンプルのホームページ] をクリックします。In the left menu, choose Sample Home Page.

  2. [データのしきい値] セクションで、[1GB のデータがあるアプリ Web のメモ リストに記入する] をクリックします。In the Data Threshold section, choose Fill the App Web Notes list with 1GB of data.

  3. [1GB のデータがあるアプリ Web のメモ リストに記入する] ボタンの上に表示される指示に従って、この操作を 11 回実行します。Per the instructions that appear above the Fill the App Web Notes list with 1GB of data button, perform this operation 11 times.

    メモ リストを更新すると、追加したリスト アイテム (メモ) の数とまだ追加されていないリスト アイテムの数を示すメッセージがページの上部に表示されます。When the Notes list is updated, a message appears at the top of the page that indicates how many list items (Notes) you added and how many are left to add.

    注意

    この操作の実行は、ボタンを選択するたびに約 1 分かかります。The operation takes about one minute to run each time you choose the button. この操作を 11 回実行した場合の最終結果が、次の図に示されています。The end result of running the operation 11 times is shown in Figure 7.

  4. 次の図に示すとおり、操作を 11 回実行すると、ボタンをクリックしたときにエラー メッセージが表示されます。After you perform the operation 11 times, an error message will occur when you choose the button, as shown in Figure 7.

    データ ストレージ制限を超えたときに生じるエラー メッセージを示すスクリーンショット

  5. データ ストレージ制限を超えた後、Web ブラウザーの [戻る] ボタンをクリックして、左側のメニューにある [メモ] リンクをクリックします。After you exceed the data storage limit, choose the back button in the web browser, and then choose the Notes link in the left menu.

  6. [アプリ Web にメモ リストを表示する] をクリックします。Choose View Notes List in App Web.

    ページが読み込まれると、サイトの記憶領域が不足していることを示すエラー メッセージがページの上部に表示されます。When the page loads, an error message appears at the top of the page that indicates that the site is out of storage space.

ホスト Web の SharePoint リスト (サポート事例のシナリオ)SharePoint list on the host web (Support Cases scenario)

サポート事例のシナリオでは、ホスト Web の SharePoint リストに保存されているデータが表示されます。The Support Cases scenario displays data that is stored in a SharePoint list in the host web. このシナリオでは、2 つの異なるパターンを使ってデータにアクセスし、対話します。This scenario uses two different patterns to access and interact with the data. 最初のパターンには、SharePoint 検索サービスおよびコンテンツごとの検索 Web パーツ (カスタム表示テンプレートを適用) が含まれています。The first pattern includes the SharePoint Search Service and the Content-by-Search web part with a custom display template applied. 2 番目のパターンには、モデル ビュー コントローラーのビューを表示するアプリ パーツ (クライアント Web パーツ) が含まれています。これは SP.RequestExecutor クラスを使用して、SharePoint REST API を呼び出します。The second pattern includes an app part (client web part) that displays a Model-View-Controller view, which uses the SP.RequestExecutor class to call the SharePoint REST API.

このアプローチの使用には、次のようないくつかの長所があります。There are several advantages to using this approach:

  • 単純な REST クエリまたはクライアント オブジェクト モデル コードを使用して簡単にデータをクエリできる。You can query data easily using simple REST queries or client object model code.
  • SharePoint でデータを検索できる。You can search for data in SharePoint.
  • アドインを更新して再展開することなく、リスト メタデータの更新と、リストのビューの新規作成を行うことができる。You can update the list metadata and create new views for a list without updating and redeploying the app. These changes won't affect the behavior of your app. これらの変更がアドインの動作に影響を与えることはない。These changes won't affect the behavior of your add-in.
  • アドインをアンインストールしてもホスト Web のリストは削除されない。ただし、アドインで AppUninstalled イベントを使ってリストやデータを削除する場合を除きます。Lists on the host web are not deleted when you uninstall your app, unless the app uses the AppUninstalled event to remove the list and/or delete the data.

これらの長所の見返りとして、以下の短所があります。Offsetting these advantages are the following disadvantages:

  • ホスト Web では、リストに格納できるデータの量と、クエリ結果のサイズの両方に制限がある。大きなデータ セットの格納またはクエリを必要としているビジネス ニーズに、このアプローチはお勧めできません。The host web limits both the amount of data you can store in lists and the size of the query results. If your business needs require storing and/or querying large data sets, this is not a recommended approach.
  • 複雑なクエリの場合、リストの動作はデータベースに劣る。For complex queries, lists do not perform as well as databases.
  • データのバックアップと復元に関し、リストの動作はデータベースに劣る。For backing up and restoring data, lists do not perform as well as databases.

このシナリオのデータは、ホスト Web に展開された SharePoint リストに格納されます。データは以下によって取得され、表示されます。The data for this scenario is stored in a SharePoint list deployed to the host web. Data is retrieved and displayed by means of the following:

このビューにあるコードは REST クエリを使用してリストから情報を取得します。一方、コンテンツ検索 Web パーツは SharePoint 検索サービスを使用してデータを取得します。The code in this view uses REST queries to retrieve information from the list, while the Content Search web part uses the SharePoint Search Service to retrieve the data. 2 つのアプローチは、このオプションの大きな長所を示しています。つまり、検索サービスと REST/CSOM API の両方を使用して、ホスト Web 上のリストから情報を取得できます。The code in this view uses REST queries to retrieve information from the list, while the content search web part uses the SharePoint search service to retrieve the data. The two approaches demonstrate the significant advantage of this option: you can use both the search service and the REST/CSOM APIs to retrieve information from a list on the host web.

サポート事例リストから顧客を選択すると、その顧客のサポート事例データが Web パーツおよびアプリ パーツの両方に表示されます。When you select a customer from the support cases list, you see the support case data for that customer displayed in both the web part and the app part. SharePoint 検索サービスがデータのインデックスを作成するには最大 24 時間かかることがあるため、Web パーツはすぐにコンテンツを返さない可能性があります。The web part might not return content right away, because it can take up to 24 hours for the SharePoint Search Service to index the data. また、[ホスト Web にサポート事例を表示する リンクをクリックして、リスト データの従来型ビューを表示することもできます。You can also choose the View Support Cases List in Host Web link to see a conventional view of the list data.

サポート事例のシナリオのユーザー インターフェイスUser interface for the Support Cases scenario

サポート事例のシナリオと対話するための UI を示すスクリーンショット


このアドインで展開されるコンテンツ検索 Web パーツは、カスタム表示テンプレートを使用します。The Content Search web part deployed by this add-in uses a custom display template. 次の図は、Web プロジェクトの Assets ディレクトリの中で Web パーツおよび関連テンプレートを検出できる場所を示しています。The content search web part deployed by this app uses a custom display template. Figure 9 shows where in the Assets directory of the web project you can find the web part and the associated template.

Web プロジェクトの Assets ディレクトリの内容Figure 9. Contents of the Assets directory of the web project

Assets ディレクトリのスクリーンショット


Views/SupportCaseAppPart/Index.cshtml ファイルにある次の JavaScript コードでは、クロスドメイン ライブラリを使用して、ホスト Web 上の JavaScript リストに対する REST クエリを呼び出します。The following JavaScript code that you'll find in the Views/SupportCaseAppPart\Index.cshtml file uses the cross-domain library to invoke a REST query on the SharePoint list on the host web.

function execCrossDomainRequest() {
var executor = new SP.RequestExecutor(appWebUrl);

executor.executeAsync(
   {
        url: appWebUrl + "/_api/SP.AppContextSite(@@target)" +
                "/web/lists/getbytitle('Support Cases')/items" +
              "?$filter=(FTCAM_CustomerID eq '" + customerID + "')" +
            "&amp;$top=30" +
                    "&amp;$select=Id,Title,FTCAM_Status,FTCAM_CSR" +
                    "&amp;@@target='" + hostWebUrl + "'",
method: "GET",
              headers: { "Accept": "application/json; odata=verbose" },
              success: successHandler,
              error: errorHandler
   }
);
}


リストに 5000 アイテムを追加することがあります。この場合、5000 アイテム以上からなる結果セットがリスト クエリで生成される場合にリスト クエリしきい値に達し、失敗することが表示されます。You can add 5,000 items to the list to show that list queries that generate a result set of 5,000 or more items reach the list query threshold and fail. このシナリオは、この手法で特に重要な制限事項のうちの 1 つであるリスト クエリ サイズ制限を示していますThis scenario shows one of the most important limitations of this approach: list query size limits. ビジネス ニーズに従い、大規模なデータとクエリ結果セットを扱う必要がある場合には、この手法は不適切です。If your business needs require you to work with large data and query result sets, this approach won't work. 詳細については、この記事で既に説明したリスト クエリのしきい値を参照してください。For more information, see List query threshold earlier in this article.

Northwind OData Web サービス (顧客のダッシュボードのシナリオ)Northwind OData web service (Customer Dashboard scenario)

顧客のダッシュボードのシナリオでは、JQuery AJAX を使用して NorthWind OData サービスを呼び出し、顧客情報を返します。The Customer Dashboard scenario uses JQuery AJAX to invoke the NorthWind OData service to return customer information. The app stores its data in a web service, then uses OData to retrieve it. このアドインは、データを Web サービスに格納した後、OData を使ってそれを取得します。The add-in stores its data in a web service, and then uses OData to retrieve it.

このアプローチを使用する長所は次のとおりです。The following are the advantages to using this approach:

  • 1 つの Web サービスで複数のアドインをサポートできる。A given web service can support multiple add-ins.
  • アドインを更新して再展開することなく、Web サービスを更新できる。You can update your web service without having to update and redeploy your app.
  • SharePoint と Web サービスのインストールが相互に影響しない。Your SharePoint and web service installations do not affect one another.
  • Microsoft Azure などのホスティング サービスにより、Web サービスを拡大/縮小できる。Hosting services such as Microsoft Azure enable you to scale your web services.
  • SharePoint サイトとは別に Web サービスの情報をバックアップおよび復元できる。You can back up and restore information on your web services separately from your SharePoint site.
  • アドインをアンインストールしてもデータが失われない。ただし、アドインで AppUninstalled イベントを使ってデータを削除する場合を除きます。You don't lose data when uninstalling your app, unless the app uses the AppUninstalled event to delete the data.

顧客のダッシュボードのシナリオでは、データの取得のために OData 標準を実装する Web サービスにデータを保存します。The Customer Dashboard scenario stores its data in a web service that implements the OData standard to retrieve data. 顧客のダッシュボードのインターフェイスでは、ドロップダウン メニューから顧客を選択すると、顧客情報が [顧客情報] ウィンドウに表示されます。The customer dashboard scenario stores its data in a web service that implements the OData standard to retrieve data. In the customer dashboard interface, you select a customer from a drop-down menu, and customer information displays in the Customer Info pane.

この UI ページは、モデル ビュー コントローラーのビューです。This UI page is a Model-View-Controller view. 表示は、Views/CustomerDashboard/Home.cshtml ファイルで定義されます。The display is defined in the Views/CustomerDashboard/Home.cshtml file. 基礎となるコードは、Scripts/CustomerDashboard.js ファイルにあります。The underlying code is in the Scripts/CustomerDashboard.js file. JavaScript コードは AJAX を使用して Northwind Web サービスのクエリを実行します。The JavaScript code uses AJAX to query the Northwind web service. これは OData サービスであるため、Web サービス クエリは、Web サービス エンドポイントを示す URL に接続されたクエリ文字列引数で構成されます。Because this is an OData service, the web service query consists of query string arguments attached to a URL that points to a web service endpoint. サービスは、JSON 形式で顧客情報を返します。The service returns customer information in JSON format.

[顧客のダッシュボード] リンクをクリックすると、次のコードが実行されます。The following code runs when you choose the Customer Dashboard link. It retrieves all the customer names and IDs in order to populate the drop-down menu. すべての顧客名と ID を取得し、それを使ってドロップダウン メニューを表示します。The following code runs when you choose the Customer Dashboard link. It retrieves all the customer names and IDs in order to populate the drop-down menu.

var getCustomerIDsUrl = "https://odatasampleservices.azurewebsites.net/V3/Northwind/Northwind.svc/Customers?$format=json&amp;$select=CustomerID";
    $.get(getCustomerIDsUrl).done(getCustomerIDsDone)
        .error(function (jqXHR, textStatus, errorThrown) {
            $('#topErrorMessage').text('Can\'t get customers. An error occurred: ' + jqXHR.statusText);
        });


ドロップダウン メニューから顧客名を選択したときに、次のコードが実行されます。The following code runs when you select a customer name from the drop-down menu. このコードは OData $filter 引数を使って顧客 ID および他のクエリ文字列引数を指定し、この顧客に関する情報を取得します。The following code runs when you select a customer name from the drop-down menu. It uses the OData $filter argument to specify the customer ID and other query string arguments to retrieve information related to this customer.

var url = "https://odatasampleservices.azurewebsites.net/V3/Northwind/Northwind.svc/Customers?$format=json" +  "&amp;$select=CustomerID,CompanyName,ContactName,ContactTitle,Address,City,Country,Phone,Fax" + "&amp;$filter=CustomerID eq '" + customerID + "'";

$.get(url).done(getCustomersDone)
   .error(function (jqXHR, textStatus, errorThrown) {
          alert('Can\'t get customer ' + customerID + '. An error occurred: ' + 
                 jqXHR.statusText);
});


Azure テーブル ストレージ (顧客サービス アンケートのシナリオ)Azure table storage (Customer Service Survey scenario)

顧客サービス アンケートのシナリオでは、顧客サービス担当者が顧客アンケートに基づいて自分たちの評価を表示したり、Azure テーブル ストレージと Microsoft.WindowsAzure.Storage.Table.CloudTable API を使ってデータを格納/操作したりできます。The Customer Service Survey scenario allows a customer service representative to see their rating based on customer surveys and uses Azure table storage and the Microsoft.WindowsAzure.Storage.Table.CloudTable API to store and interact with the data.

このアプローチを使用する長所は次のとおりです。The following are the advantages to using this approach:

  • Azure テーブル ストレージでは、複数のアドインがサポートされる。Azure Table storage supports more than one add-in.
  • アドインを更新して再展開することなく、Azure テーブル ストレージを更新できる。You can update Azure storage queues without having to update and redeploy your app.
  • SharePoint インストール環境と Azure テーブル ストレージが相互のパフォーマンスに影響を与えることはない。Your SharePoint installation and Azure storage queues have no effect on each other's performance.
  • Azure テーブル ストレージを簡単に拡張できる。Azure Table storage scales easily.
  • Azure テーブル ストレージを、SharePoint サイトから個別にバックアップおよび復元できる。You can back up and restore your Azure storage queues separately from your SharePoint site.
  • アドインをアンインストールしてもデータが失われない。ただしアドインで AppUninstalled イベントを使ってデータを削除する場合を除きます。You don't lose data when you uninstall your app, unless the app uses the AppUninstalled event to delete the data.

アドインのインターフェイスでは、中央のページに現在のユーザーのアンケート評価が表示される。The add-in's interface displays the current user's survey rating in the center page. その Azure テーブル ストレージが空である場合、アドインはいくつかの情報をテーブルに追加した後でそれを表示します。If that Azure Table storage is empty, the add-in adds some information to the table before it displays it.

CSRInfoController.cs に含まれる次のコードは、ユーザーの nameId を取得する Home メソッドを定義します。The following code from the CSRInfoController.cs defines the Home method that retrieves the user's nameId.

[SharePointContextFilter]
public ActionResult Home()
{
    var context = 
        SharePointContextProvider.Current.GetSharePointContext(HttpContext);
    var sharePointService = new SharePointService(context);
    var currentUser = sharePointService.GetCurrentUser();
    ViewBag.UserName = currentUser.Title;

    var surveyRatingsService = new SurveyRatingsService();
    ViewBag.Score = surveyRatingsService.GetUserScore(currentUser.UserId.NameId);

    return View();
}


SurveyRatingService.cs ファイルに含まれる次のコードは、Azure Storage のアカウントへの接続を設定する SurveyRatingsService コンストラクターを定義します。The following code from the SurveyRatingService.cs file defines the SurveyRatingsService constructor, which sets up the connection to the Azure storage account.

public SurveyRatingsService(string storageConnectionStringConfigName = 
        "StorageConnectionString")
{
    var connectionString = Util.GetConfigSetting("StorageConnectionString");
    var storageAccount = CloudStorageAccount.Parse(connectionString);

    this.tableClient = storageAccount.CreateCloudTableClient();
    this.surveyRatingsTable = this.tableClient.GetTableReference("SurveyRatings");
    this.surveyRatingsTable.CreateIfNotExists();
}


同じファイル内の次のコードは、Azure テーブル ストレージからユーザーのアンケート スコアを取得する GetUserScore メソッドを定義します。The following code from the same file defines the GetUserScore method, which retrieves the user's survey score from the Azure storage table.

public float GetUserScore(string userName)
{
    var query = new TableQuery<Models.Customer>()
    .Select(new List<string> { "Score" })
    .Where(TableQuery.GenerateFilterCondition("Name", 
    QueryComparisons.Equal, userName));

    var items = surveyRatingsTable
         .ExecuteQuery(query)
             .ToArray();

    if (items.Length == 0)           
    return AddSurveyRatings(userName);

    return (float)items.Average(c => c.Score);
}


現在のユーザーに関するアンケート データがテーブルに含まれていない場合、AddSurveyRating メソッドはユーザーに対してランダムにスコアを割り当てます。If the table doesn't contain any survey data related to the current user, the AddSurveyRating method randomly assigns a score for the user.

private float AddSurveyRatings(string userName)
{
    float sum = 0;
    int count = 4;
    var random = new Random();

    for (int i = 0; i < count; i++)
    {
    var score = random.Next(80, 100);
    var customer = new Models.Customer(Guid.NewGuid(), userName, score);

    var insertOperation = TableOperation.Insert(customer);
    surveyRatingsTable.Execute(insertOperation);

    sum += score;
    }
    return sum / count;
}

Azure のキュー ストレージ (顧客コール キューのシナリオ)Azure queue storage (Customer Call Queue scenario)

顧客コール キューのシナリオでは、サポート キュー内の呼び出し元の一覧を表示し、呼び出しの応答をシミュレートします。The Customer Call Queue scenario lists callers in the support queue and simulates taking calls. The scenario uses Azure storage queues to store data and the Microsoft.WindowsAzure.Storage.Queue.CloudQueue API with Model-View-Controller. このシナリオでは、Azure キュー ストレージを使用してデータを保存し、モデル ビュー コントローラーで Microsoft.WindowsAzure.Storage.Queue.CloudQueue API を使用します。The Customer Call Queue scenario lists callers in the support queue and simulates taking calls. The scenario uses Azure storage queues to store data and the Microsoft.WindowsAzure.Storage.Queue.CloudQueue API with Model-View-Controller.

このアプローチを使用する長所は次のとおりです。The following are the advantages to using this approach:

  • Azure キュー ストレージでは、複数のアドインがサポートされる。Azure Queue storage supports more than one add-in.
  • アドインを更新して再展開することなく、Azure キュー ストレージを更新できる。You can update Azure storage queues without having to update and redeploy your app.
  • SharePoint インストール環境と Azure キュー ストレージが相互のパフォーマンスに影響を与えることはない。Your SharePoint installation and Azure storage queues have no effect on each other's performance.
  • Azure キュー ストレージを簡単に拡張できる。Azure Queue storage scales easily.
  • Azure キュー ストレージを、SharePoint サイトから個別にバックアップおよび復元できる。You can back up and restore your Azure storage queues separately from your SharePoint site.
  • アドインをアンインストールしてもデータが失われない。ただしアドインで AppUninstalled イベントを使ってデータを削除する場合を除きます。You don't lose data when you uninstall your app, unless the app uses the AppUninstalled event to delete the data.

アドインのインターフェイスで [呼び出しのキュー] リンクをクリックすると、サポート コール キューが中央のウィンドウに表示されます。The add-in's interface displays a support call queue in the center pane when you choose the Call Queue link. [呼び出しをシミュレートする] をクリックすると、電話がかかってきた状態 (コールのキューへの追加) をシミュレートできます。また、特定のコールに関連付けられている [呼び出しを取る] アクションをクリックすると、最も古いコールに応答する動作 (コールをキューから除去) をシミュレートできます。The app's interface displays a support call queue in the center pane when you choose the Call Queue link. You can simulate receiving calls (adding a call to the queue) by choosing Simulate Calls, and you can simulate taking the oldest call (removing a call from the queue) by choosing the Take Call action associated with a given call.

このページは、Views/CallQueue/Home.cshtml ファイルで定義されるモデル ビュー コントローラーのビューです。This page is a Model-View-Controller view that is defined in the Views/CallQueue/Home.cshtml file. Controllers/CallQueueController.cs ファイルは、CallQueueController クラスを定義します。このクラスには、キューのすべてのコールを取得したり、キューにコールを追加したり (呼び出しをシミュレートする)、コールをキューからを除去したりする (コールに応答する) ためのメソッドが含まれています。This page is a Model-View-Controller view that is defined in the Views\CallQueue\Home.cshmtl file. The Controllers\CallQueueController.cs file defines the CallQueueController class, which contains methods for retrieving all calls in the queue, adding a call to the queue (simulating a call), and removing a call from the queue (taking a call). Each of these methods calls methods defined in the Services\CallQueueService.cs file, which uses the Azure storage queue API to retrieve the underlying information in the storage queue. これらのメソッドはそれぞれ、Services/CallQueueService.cs ファイルで定義されるメソッドを呼び出します。このファイルは、Azure のキュー ストレージ API を使用して、ストレージ キューにある基礎となる情報を取得します。Each of these methods calls methods defined in the Services/CallQueueService.cs file, which uses the Azure Queue storage API to retrieve the underlying information in the storage queue.

public class CallQueueController : Controller
{
    public CallQueueService CallQueueService { get; private set; }

    public CallQueueController()
    {
        CallQueueService = new CallQueueService();
    }

    // GET: CallQueue
    public ActionResult Home(UInt16 displayCount = 10)
    {
        var calls = CallQueueService.PeekCalls(displayCount);
        ViewBag.DisplayCount = displayCount;
        ViewBag.TotalCallCount = CallQueueService.GetCallCount();
        return View(calls);
    }

    [HttpPost]
    public ActionResult SimulateCalls(string spHostUrl)
    {
        int count = CallQueueService.SimulateCalls();
        TempData["Message"] = string.Format("Successfully simulated {0} calls and added them to the call queue.", count);
        return RedirectToAction("Index", new { SPHostUrl = spHostUrl });
    }

    [HttpPost]
    public ActionResult TakeCall(string spHostUrl)
    {
        CallQueueService.DequeueCall();
        TempData["Message"] = "Call taken successfully and removed from the call queue!";
        return RedirectToAction("Index", new { SPHostUrl = spHostUrl });
    }
}


The CallQueueService.cs ファイルは、Azure のキュー ストレージへの接続を確立する CallQueueService クラスを定義します。The CallQueueService.cs file defines the CallQueueService class, which establishes the connection to Azure Queue storage. そのクラスには、コールをキューに追加する、キューを除去する、およびキューからコールを取得するためのメソッドも含まれます。The CallQueueService.cs file defines the CallQueueService class, which establishes the connection to the Azure storage queue. That class also contains the methods for adding, removing (dequeuing), and retrieving the calls from the queue.

public class CallQueueService
{
    private CloudQueueClient queueClient;

    private CloudQueue queue;

    public CallQueueService(string storageConnectionStringConfigName = "StorageConnectionString")
    {
        var connectionString = CloudConfigurationManager.GetSetting(storageConnectionStringConfigName);
        var storageAccount = CloudStorageAccount.Parse(connectionString);

        this.queueClient = storageAccount.CreateCloudQueueClient();
        this.queue = queueClient.GetQueueReference("calls");
        this.queue.CreateIfNotExists();
        }

        public int? GetCallCount()
        {
        queue.FetchAttributes();
        return queue.ApproximateMessageCount;
    }

    public IEnumerable<Call> PeekCalls(UInt16 count)
    {
        var messages = queue.PeekMessages(count);

        var serializer = new JavaScriptSerializer();
        foreach (var message in messages)
        {
        Call call = null;
        try
        {
        call = serializer.Deserialize<Call>(message.AsString);
        }
        catch { }

        if (call != null) yield return call;
        }
    }

    public void AddCall(Call call)
    {
        var serializer = new JavaScriptSerializer();
        var content = serializer.Serialize(call);
        var message = new CloudQueueMessage(content);
        queue.AddMessage(message);
    }

    public void DequeueCall()
    {
        var message = queue.GetMessage();
        queue.DeleteMessage(message);
    }

    public int SimulateCalls()
    {
        Random random = new Random();
        int count = random.Next(1, 6);
        for (int i = 0; i < count; i++)
        {
        int phoneNumber = random.Next();
        var call = new Call
        {
        ReceivedDate = DateTime.Now,
        PhoneNumber = phoneNumber.ToString("+1-000-000-0000")
        };
        AddCall(call);

        return count;
    }
}

Azure SQL データベース (最近の注文のシナリオ)Azure SQL Database (Recent Orders scenario)

最近の注文のシナリオでは、指定された顧客のすべての注文を返すために Northwind Azure SQL データベースに対する直接呼び出しを使用します。The Recent Orders scenario uses a direct call to the Northwind SQL Azure database to return all the orders for a given customer.

このアプローチを使用する長所は次のとおりです。The following are the advantages to using this approach:

  • 1 つのデータベースで複数のアドインをサポートできる。A database can support more than one app.
  • アドインを更新して展開することなく、データベース スキーマを更新できる。ただし、スキーマの変更がアドイン内のクエリに影響を与えない場合に限ります。You can update your database schema without having to update and redeploy your app, as long as the schema changes don't affect the queries in your app.
  • リレーショナル データベースは、多対多のリレーションシップをサポートするため、より複雑な業務のシナリオに対応できる。A relational database can support many-to-many relationships and thus support more complex business scenarios.
  • データベース設計ツールを使用してデータベースの設計を最適化できる。You can use database design tools to optimize the design of your database.
  • クエリ内で計算や結合などの複雑な操作を実行する必要がある場合、リレーショナル データベースは他のオプションよりパフォーマンスが良い。Relational databases provide better performance than the other options when you need to execute complex operations in your queries, such as calculations and joins.
  • Azure SQL データベースではデータのインポートとエクスポートを簡単に行えるため、データの管理と移動が簡単になる。A SQL Azure database allows you to import and export data easily, so it's easier to manage and move your data.
  • アドインをアンインストールしてもデータがまったく失われない。ただし、アドインで AppUninstalled イベントを使ってデータを削除する場合を除きます。You don't lose any data when you uninstall your app, unless the app uses the AppUninstalled event to delete the data.

最近の注文のインターフェイスは、顧客のダッシュボードのインターフェイスと同様に作動します。The recent orders interface works much like the customer dashboard interface. 左側の列で [最近の注文] リンクをクリックしてから、中央のウィンドウの上部にあるドロップダウン メニューから [顧客] をクリックします。The recent orders interface works much like the customer dashboard interface. You choose on the Recent Orders link in the left column, and then choose a customer from the drop-down menu at the top of the center pane. A list of orders from that customer will appear in the center pane. 対象の顧客からの注文のリストが中央のウィンドウに表示されます。A list of orders from that customer appears in the center pane.

このページは、Views/CustomerDashboard/Orders.cshtml ファイルで定義されるモデル ビュー コントローラーのビューです。This page is a Model-View-Controller view defined in the Views/CustomerDashboard/Orders.cshtml file. Controllers/CustomerDashboardController.cs ファイルにあるコードは、Entity Framework を使用して、Azure SQL データベースにある [注文] テーブルのクエリを実行します。Code in the Controllers/CustomerDashboardController.cs file uses the Entity Framework to query the Orders table in your Azure SQL Database. ユーザーがドロップダウン メニューから顧客を選択したときに渡される URL 内のクエリ文字列パラメーターを使用して、顧客 ID が渡されます。The customer ID is passed by using a query string parameter in the URL that is passed when the user selects a customer from the drop-down menu. クエリは、顧客従業員、および運送会社 テーブルの結合を作成します。The query creates a join on the Customer, Employee, and Shipper tables. その後、クエリ結果は、結果を表示するモデルビューコントローラーのビューに渡されます。The query result is then passed to the Model-View-Controller view that displays the results.

次の CustomerDashboardController.cs ファイルのコードは、データベースのクエリを実行し、ビューにデータを返します。The following code from the CustomerDashboardController.cs file performs the database query and returns the data to the view.

public ActionResult Orders(string customerId)
{            
    Order[] orders;
    using (var db = new NorthWindEntities())
    {
            orders = db.Orders
                  .Include(o => o.Customer)
                  .Include(o => o.Employee)
                  .Include(o => o.Shipper)
                  .Where(c => c.CustomerID == customerId)
                  .ToArray();
    }

    ViewBag.SharePointContext = 
        SharePointContextProvider.Current.GetSharePointContext(HttpContext);

    return View(orders);
}

関連項目See also