チュートリアル:Azure Time Series Insights シングルページ Web アプリの作成Tutorial: Create an Azure Time Series Insights single-page web app

このチュートリアルでは、Azure Time Series Insights データにアクセスする独自のシングルページ Web アプリケーション (SPA) を作成するプロセスについて説明します。This tutorial guides you through the process of creating your own single-page web application (SPA) to access Azure Time Series Insights data.

このチュートリアルで学習する内容は次のとおりです。In this tutorial, you'll learn about:

  • アプリケーションの設計The application design
  • Azure Active Directory (Azure AD) にアプリケーションを登録する方法How to register your application with Azure Active Directory (Azure AD)
  • Web アプリケーションをビルド、発行、テストする方法How to build, publish, and test your web application

注意

  • このチュートリアルのソース コードは、GitHub で提供されています。The source code for this tutorial is provided on GitHub.
  • Time Series Insights クライアントのサンプル アプリは、このチュートリアルで使用する完成したアプリを示すためにホストされています。The Time Series Insights client sample app is hosted to show the completed app used in this tutorial.

前提条件Prerequisites

  • お持ちでない場合は、無料の Azure サブスクリプションにサインアップしてください。Sign up for a free Azure subscription if you don't already have one.

  • Visual Studio の無料のコピー。A free copy of Visual Studio. 作業を開始するには、2017 または 2019 Community バージョンをダウンロードしてください。Download the 2017 or 2019 Community versions to get started.

  • Visual Studio 用の IIS Express、Web 配置、および Azure Cloud Services コア ツール コンポーネント。The IIS Express, Web Deploy, and Azure Cloud Services core tools components for Visual Studio. これらのコンポーネントは、Visual Studio のインストールを変更することで追加してください。Add the components by modifying your Visual Studio installation.

アプリケーションの設計Application design

Time Series Insights サンプル SPA は、このチュートリアルで使用される設計とコードのベースになります。The Time Series Insights sample SPA is the basis for the design and code used in this tutorial. このコードでは、Time Series Insights JavaScript クライアント ライブラリを使用します。The code uses the Time Series Insights JavaScript client library. Time Series Insights クライアント ライブラリによって、2 つの主な API カテゴリの抽象化が提供されます。The Time Series Insights client library provides an abstraction for two main API categories:

  • Time Series Insights Query API を呼び出すためのラッパー メソッド: JSON ベースの式を使用して Time Series Insights データを照会するために使用できる REST API。Wrapper methods for calling the Time Series Insights query APIs: REST APIs you can use to query for Time Series Insights data by using JSON-based expressions. メソッドは、ライブラリの TsiClient.server 名前空間の下に整理されています。The methods are organized under the TsiClient.server namespace of the library.

  • いくつかの種類のグラフ コントロールを作成してデータを設定するためのメソッド: Web ページでの Time Series Insights データの視覚化に使用できるメソッド。Methods for creating and populating several types of charting controls: Methods you can use to visualize Time Series Insights data in a webpage. メソッドは、ライブラリの TsiClient.ux 名前空間の下に整理されています。The methods are organized under the TsiClient.ux namespace of the library.

このチュートリアルでは、サンプル アプリケーションの Time Series Insights 環境からのデータも使用します。This tutorial also uses data from the sample application's Time Series Insights environment. Time Series Insights サンプル アプリケーションの構造と Time Series Insights クライアント ライブラリの使用方法の詳細については、チュートリアル「Azure Time Series Insights JavaScript クライアント ライブラリを調べる」を参照してください。For details about the structure of the Time Series Insights sample application and how it uses the Time Series Insights client library, see the tutorial Explore the Azure Time Series Insights JavaScript client library.

Azure AD へのアプリケーションの登録Register the application with Azure AD

ビルドする前に、アプリケーションを Azure AD に登録する必要があります。Before you build the application, you must register it with Azure AD. 登録によって ID 構成が行われるため、アプリケーションでシングル サインオンの OAuth サポートを使用できます。Registration provides the identity configuration, so the application can use OAuth support for single sign-on. OAuth を利用するには、SPA で暗黙的な承認付与タイプが使用される必要があります。OAuth requires SPAs to use the Implicit authorization grant type. この承認はアプリケーション マニフェストで更新します。You update the authorization in the application manifest. アプリケーション マニフェストは、アプリケーションの ID 構成の JSON 表現です。An application manifest is a JSON representation of the application's identity configuration.

  1. Azure サブスクリプション アカウントを使用して、Azure portal にサインインします。Sign in to the Azure portal by using your Azure subscription account.

  2. [Azure Active Directory] > [アプリの登録] > [新しいアプリケーションの登録] を選択します。Select Azure Active Directory > App registrations > New application registration.

    Azure portal - Azure AD アプリケーション登録の開始Azure portal - Begin the Azure AD application registration

  3. [作成] ウィンドウで、必須のパラメーターを入力します。In the Create pane, fill in the required parameters.

    パラメーターParameter 説明Description
    NameName わかりやすい登録名を入力します。Enter a meaningful registration name.
    アプリケーションの種類Application type [Web アプリ/API] のままにします。Leave as Web app/API.
    サインオン URLSign-on URL アプリケーションのサインイン (ホーム) ページの URL を入力します。Enter the URL for the sign-in (home) page of the application. アプリケーションは後で Azure App Service でホストされるため、https://azurewebsites.net ドメイン内の URL を使用する必要があります。Because the application will later be hosted in Azure App Service, you must use a URL in the https://azurewebsites.net domain. この例では、名前は登録名に基づきます。In this example, the name is based on the registration name.

    [作成] をクリックして、新しいアプリケーション登録を作成します。Select Create to create the new application registration.

    Azure portal - Azure AD アプリケーション登録ウィンドウの作成オプションAzure portal - The Create option in the Azure AD application registration pane

  4. リソース アプリケーションによって、他のアプリケーションで使用できる REST API が提供されます。Resource applications provide REST APIs that other applications can use. これらの API も Azure AD に登録されます。The APIs are also registered with Azure AD. API では、"スコープ" を公開することで、クライアント アプリケーションによるきめ細かい安全なアクセスが実現します。APIs provide granular, secured access to client applications by exposing scopes. アプリケーションが Azure Time Series Insights API を呼び出すため、API とスコープを指定する必要があります。Because your application calls the Azure Time Series Insights API, you must specify the API and scope. アクセス許可は、API とスコープに実行時に付与されます。Permission is granted for the API and scope at runtime. [設定] > [必要なアクセス許可] > [追加] の順に選択します。Select Settings > Required permissions > Add.

    Azure portal - Azure AD のアクセス許可を追加するための追加オプションAzure portal - The Add option for adding Azure AD permissions

  5. [API アクセスの追加] ウィンドウで 1. の [API を選択します] を選択して、Azure Time Series Insights API を指定します。In the Add API access pane, select 1 Select an API to specify the Azure Time Series Insights API. [API を選択します] ウィンドウで検索フィールドに「azure time」と入力します。In the Select an API pane, in the search box, enter azure time. 次に、結果リストの [Azure Time Series Insights] を選択します。Then, select Azure Time Series Insights in the results list. [選択] を選択します。Choose Select.

    Azure portal - Azure AD のアクセス許可を追加するための検索オプションAzure portal - The search option for adding Azure AD permissions

  6. API のスコープを選択するには、 [API アクセスの追加] ウィンドウで、2. の [アクセス許可を選択します] を選択します。To select a scope for the API, in the Add API access pane, select 2 Select permissions. [アクセスの有効化] ウィンドウで、 [Access Azure Time Series Insights service](Azure Time Series Insights サービスへのアクセス) スコープを選択します。In the Enable Access pane, select the Access Azure Time Series Insights service scope. [選択] を選択します。Choose Select. [API アクセスの追加] ウィンドウに戻ります。You're returned to the Add API access pane. [完了] を選択します。Select Done.

    Azure portal - Azure AD のアクセス許可を追加するためのスコープの設定Azure portal - Set a scope for adding Azure AD permissions

  7. [必要なアクセス許可] ウィンドウに、Azure Time Series Insights API が表示されるようになります。In the Required permissions pane, the Azure Time Series Insights API is now shown. さらに、すべてのユーザーに関して、アプリケーションが API とスコープにアクセスするためのアクセス許可を事前承認する必要があります。You also need to provide pre-consent permission for the application to access the API and scope for all users. [アクセス許可の付与] を選択し、 [はい] を選択します。Select Grant permissions, and then select Yes.

    Azure portal - Azure AD に必要なアクセス許可を追加するためのアクセス許可の付与オプションAzure portal - The Grant permissions option for adding Azure AD required permissions

  8. 前述のとおり、アプリケーション マニフェストを更新することも必要です。As we discussed earlier, you also must update the application manifest. ウィンドウ上部の水平メニュー ("階層リンク") で、アプリケーション名を選択して、 [登録済みのアプリ] ウィンドウに戻ります。In the horizontal menu at the top of the pane (the "breadcrumb"), select the application name to return to the Registered app pane. [マニフェスト] を選択して oauth2AllowImplicitFlow プロパティを true に変更し、 [保存] を選択します。Select Manifest, change the oauth2AllowImplicitFlow property to true, and then select Save.

    Azure portal - Azure AD マニフェストの更新Azure portal - Update the Azure AD manifest

  9. 階層リンクのアプリケーション名を選択して、 [登録済みのアプリ] ウィンドウに戻ります。In the breadcrumb, select the application name to return to the Registered app pane. ホーム ページの値とアプリケーションのアプリケーション ID をコピーします。Copy the values for Home page and Application ID for your application. これらのプロパティを、このチュートリアルで後ほど使用します。You use these properties later in the tutorial.

    Azure portal - アプリケーションのホーム ページの URL とアプリケーション ID の値のコピーAzure portal - Copy the Home Page URL and Application ID values for your application

Web アプリケーションのビルドと発行Build and publish the web application

  1. アプリケーションのプロジェクト ファイルを格納するディレクトリを作成します。Create a directory to store your application project files. 次に、以下の各 URL にアクセスします。Then, go to each of the following URLs. ページの右上隅にある [Raw] リンクを右クリックしてから、 [名前を付けて保存] を選択してプロジェクト ディレクトリにファイルを保存します。Right-click the Raw link in the upper-right corner of the page, and then select Save as to save the files in your project directory.

    注意

    ブラウザーによっては、ファイルを保存する前にファイル拡張子を .html または .css に変更する必要がある場合があります。Depending on the browser, you might need to change the file extensions to .html or .css before you save the file.

  2. Visual Studio に必要なコンポーネントがインストールされていることを確認します。Verify that the required components are installed in Visual Studio. Visual Studio 用の IIS Express、Web 配置、および Azure Cloud Services コア ツール コンポーネントをインストールする必要があります。The IIS Express, Web Deploy, and Azure Cloud Services core tools components for Visual Studio must be installed.

    Visual Studio - インストールされているコンポーネントの変更Visual Studio - Modify the installed components

    注意

    Visual Studio のエクスペリエンスは、バージョンと構成設定によっては、示されている例とは若干異なる可能性があります。Your Visual Studio experience might vary slightly from the depicted examples depending on your version and configuration settings.

  3. Visual Studio を開いて、サインインします。Open Visual Studio and sign in. Web アプリケーション用のプロジェクトを作成するには、 [ファイル] メニューで [開く] > [Web サイト] の順に選択します。To create a project for the web application, on the File menu, select Open > Web Site.

    Visual Studio ‐ 新しいソリューションの作成Visual Studio - Create a new solution

  4. [Web サイトを開く] ウィンドウで、HTML ファイルと CSS ファイルを格納した作業ディレクトリを選択してから、 [開く] を選択します。In the Open Web Site pane, select the working directory where you stored the HTML and CSS files, and then select Open.

    Visual Studio - [ファイル] メニュー。[開く] と [Web サイト] オプションが選択された状態Visual Studio - The File menu, with the Open and Web Site options

  5. Visual Studio の [表示] メニューで、 [ソリューション エクスプローラー] を選択します。In the Visual Studio View menu, select Solution Explorer. 新しいソリューションが開きます。Your new solution opens. これには Web サイト プロジェクト (地球アイコン) が含まれていて、ここに HTML ファイルと CSS ファイルが含まれています。It contains a website project (globe icon), which contains the HTML and CSS files.

    Visual Studio - ソリューション エクスプローラー内の新しいソリューションVisual Studio - The new solution in Solution Explorer

  6. アプリを発行する前に、index.html の構成設定を変更する必要があります。Before you publish your app, you must alter the configuration settings in index.html.

    1. コメント "PROD RESOURCE LINKS" の下の 3 行をコメント解除して、依存関係を DEVELOPMENT から PRODUCTION に切り替えます。Uncomment the three lines under the comment "PROD RESOURCE LINKS" to switch the dependencies from DEVELOPMENT to PRODUCTION. コメント "DEV RESOURCE LINKS" の下の 3 行をコメント アウトします。Comment out the three lines under the comment "DEV RESOURCE LINKS".

      <html><head>
          <title>Time Series Insights Sample App</title>
          <meta charset="utf-8">
          <meta http-equiv="cache-control" content="no-cache" />
          <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script>
          
          <!--bluebird for Promise polyfill to support IE in sample client-->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>    
          
          <!-- PROD RESOURCE LINKS -->
          <!-- <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
          <script src="https://unpkg.com/tsiclient@1.1.4/tsiclient.js"></script>
          <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@1.1.4/tsiclient.css"> -->
      
          <!-- DEV RESOURCE LINKS -->
          <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
          <script src="../../dist/tsiclient.js"></script>
          <link rel="stylesheet" type="text/css" href="../../dist/tsiclient.css">
      </head>
      

      依存関係は次の例のようにコメントする必要があります。Your dependencies should be commented like the following example:

      <!-- PROD RESOURCE LINKS -->
      <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
      <script src="https://unpkg.com/tsiclient@1.1.4/tsiclient.js"></script>
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@1.1.4/tsiclient.css">
      
      <!-- DEV RESOURCE LINKS -->
      <!-- <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
      <script src="../../dist/tsiclient.js"></script>
      <link rel="stylesheet" type="text/css" href="../../dist/tsiclient.css"> -->
      
    2. Azure AD アプリの登録 ID を使用するようにアプリを構成するには、clientIDpostLogoutRedirectUri の値を変更して、「Azure AD へのアプリケーションの登録」の手順 9 でコピーした [アプリケーション ID][ホーム ページ] の値を使用します。To configure the app to use your Azure AD app registration ID, change the clientID and postLogoutRedirectUri values to use the values for Application ID and Home Page that you copied in step 9 in Register the application with Azure AD.

      // START: AUTHENTICATION RELATED CODE USING ADAL.JS
          // Set up ADAL
          var authContext = new AuthenticationContext({
              clientId: '000000-000000-000000-000000',
              postLogoutRedirectUri: 'https://tsiapp.azurewebsites.net/',
              cacheLocation: 'localStorage'
          });
      

      例:For example:

      clientId: '8884d4ca-b9e7-403a-bd8a-366d0ce0d460',
      postLogoutRedirectUri: 'https://tsispaapp.azurewebsites.net',
      
    3. 変更が完了したら、index.html を保存します。When you're finished making modifications, save index.html.

  7. Web アプリケーションを Azure アプリ サービスとして Azure サブスクリプションに発行します。Publish the web application in your Azure subscription as an Azure App Service.

    注意

    次の手順で示すスクリーンショットのいくつかのオプションには、Azure サブスクリプションからのデータが自動的に設定されます。Several options in the screenshots that are shown in the following steps are automatically populated with data from your Azure subscription. 完全に読み込むには、ウィンドウごとに数秒かかる場合があります。It might take a few seconds for each pane to load completely.

    1. ソリューション エクスプローラーで、Web サイト プロジェクト ノードを右クリックして、 [Web アプリの発行] を選択します。In Solution Explorer, right-click the website project node, and then select Publish Web App.

      Visual Studio - ソリューション エクスプローラーの [Web アプリの発行] オプションの選択Visual Studio - Select the Solution Explorer Publish Web App option

    2. [開始] を選択して、アプリの発行を開始します。Select Start to begin publishing your app.

      Visual Studio - 発行プロファイル ウィンドウVisual Studio - The Publish profile pane

    3. アプリケーションの発行に使用するサブスクリプションを選択します。Select the subscription that you want to use to publish the application. [TsiSpaApp] プロジェクトを選択します。Select the TsiSpaApp project. [OK] をクリックします。Then, select OK.

      Visual Studio - 発行プロファイルのアプリ サービス ウィンドウVisual Studio - The Publish profile App Service pane

    4. [発行] を選択して Web アプリケーションをデプロイします。Select Publish to deploy the web application.

      Visual Studio - 発行オプションと発行ログの出力Visual Studio - The Publish option and the publish log output

    5. Visual Studio の [出力] ウィンドウに成功した発行のログが表示されます。A successful publish log appears in the Visual Studio Output pane. 配置が完了すると、Visual Studio によってブラウザー タブで Web アプリケーションが開かれ、サインインを求められます。When deployment is finished, Visual Studio opens the web application in a browser tab and prompts for sign-in. サインインが成功すると、Time Series Insights コントロールにデータが表示されます。After successful sign-in, the Time Series Insights controls are populated with data.

トラブルシューティングTroubleshoot

エラー コード/状態Error code/condition 説明Description
"AADSTS50011: アプリケーションの応答アドレスが登録されていません。 "AADSTS50011: No reply address is registered for the application. Azure AD 登録に [応答 URL] プロパティがありません。The Azure AD registration is missing the Reply URL property. Azure AD アプリケーション登録の [設定] > [応答 URL] に移動します。Go to Settings > Reply URLs for your Azure AD application registration. Azure AD へのアプリケーションの登録」の手順 3 で指定されたサインオン URL が存在することを確認します。Verify that the Sign-on URL specified in step 3 in Register the application with Azure AD is present.
"AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application: '<Application ID GUID>'. (要求で指定されている応答 URL が、アプリケーションに関して構成されている応答 URL と一致しません: "<アプリケーション ID GUID>") "AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application: '<Application ID GUID>'. Web アプリケーションのビルドと発行」の手順 6 で指定された postLogoutRedirectUri が、Azure AD アプリケーション登録の [設定] > [応答 URL] で指定されている値に一致する必要があります。The postLogoutRedirectUri specified in step 6 in Build and publish the web application must match the value specified under Settings > Reply URLs in your Azure AD application registration. また、 [宛先 URL] の値も、「Web アプリケーションのビルドと発行」の手順 5 で指定した https を使用するように変更してください。Be sure to also change the value for Destination URL to use https per step 5 in Build and publish the web application.
Web アプリケーションによって読み込みが行われますが、背景が白く、スタイルが適用されていないテキストのみのサインイン ページが表示されます。The web application loads, but it has an unstyled, text-only sign-in page, with a white background. Web アプリケーションのビルドと発行」の手順 4 で説明されているパスが正しいことを確認します。Verify that the paths discussed in step 4 in Build and publish the web application are correct. Web アプリケーションが .css ファイルを検出できない場合、スタイルがページに正しく適用されません。If the web application can't find the .css files, the page won't be styled correctly.

リソースのクリーンアップClean up resources

このチュートリアルで作成された Azure サービスがいくつか実行されています。This tutorial creates several running Azure services. このチュートリアル シリーズを完了する予定がない場合は、不要なコストが発生しないようにすべてのリソースを削除することをお勧めします。If you don't plan to finish this tutorial series, we recommend that you delete all resources to avoid incurring unnecessary costs.

Azure portal の左側のメニューで、次の手順を実行します。In the Azure portal left menu:

  1. [リソース グループ] を選択し、Time Series Insights 環境に作成したリソース グループを選択します。Select Resource groups, and then select the resource group you created for the Time Series Insights environment. ページの上部で [リソース グループの削除] を選択し、リソース グループの名前を入力してから [削除] を選択します。At the top of the page, select Delete resource group, enter the name of the resource group, and then select Delete.
  2. [リソース グループ] を選択し、デバイス シミュレーション ソリューション アクセラレータによって作成されたリソース グループを選択します。Select Resource groups, and then select the resource group that was created by the device simulation solution accelerator. ページの上部で [リソース グループの削除] を選択し、リソース グループの名前を入力してから [削除] を選択します。At the top of the page, select Delete resource group, enter the name of the resource group, and then select Delete.

次の手順Next steps

このチュートリアルで学習した内容は次のとおりです。In this tutorial, you learned about:

  • アプリケーションの設計The application design
  • Azure AD にアプリケーションを登録する方法How to register your application with Azure AD
  • Web アプリケーションをビルド、発行、テストする方法How to build, publish, and test your web application

このチュートリアルでは、Azure AD との統合を行い、サインインしているユーザーの ID を使用してアクセス トークンを取得します。This tutorial integrates with Azure AD and uses the identity of the user who is signed in to acquire an access token. サービスまたはデーモン アプリケーションの ID を使用して Time Series Insights API にアクセスする方法については、次の記事を参照してください。To learn how to access the Time Series Insights API by using the identity of a service or daemon application, see this article: