Azure バックエンドを使用して Windows アプリを作成するCreate a Windows app with an Azure backend

注意

Visual Studio App Center では、モバイル アプリ開発の中心となる新しい統合サービスに投資しています。Visual Studio App Center is investing in new and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. App Center を今すぐチェックしてください。Check out App Center today.

概要Overview

このチュートリアルでは、Universal Windows Platform (UWP) アプリにクラウドベースのバックエンド サービスを追加する方法を示します。This tutorial shows you how to add a cloud-based backend service to a Universal Windows Platform (UWP) app. 詳細については、「 モバイル アプリとは」を参照してください。For more information, see What are Mobile Apps. 次に示すのは、完了したアプリの画面キャプチャです。The following are screen captures from the completed app:

Completed desktop app

UWP アプリの他のすべての Mobile Apps チュートリアルを行う前に、このチュートリアルを完了する必要があります。Completing this tutorial is a prerequisite for all other Mobile App tutorials for UWP apps.

前提条件Prerequisites

このチュートリアルを完了するには、以下が必要です。To complete this tutorial, you need the following:

  • アクティブな Azure アカウントアカウントがない場合、Azure 試用版にサインアップして、最大 10 件の無料モバイル アプリを入手できます。An active Azure account. このアプリは評価終了後も使用できます。If you don't have an account, you can sign up for an Azure trial and get up to 10 free mobile apps that you can keep using even after your trial ends. 詳細については、 Azure の無料試用版サイトを参照してください。For details, see Azure Free Trial.
  • Windows 10。Windows 10.
  • Visual Studio Community 2017。Visual Studio Community 2017.
  • UWP アプリ開発に関する知識。Familiarity with UWP app development. UWP アプリをビルドするためのセットアップ方法については、UWP のドキュメントを参照してください。Visit the UWP documentation to learn how to get set up to build UWP apps.

新しい Azure Mobile App バックエンドの作成Create a new Azure Mobile App backend

新しいモバイル アプリ バックエンドを作成するには、次の手順に従います。Follow these steps to create a new Mobile App backend.

  1. Azure Portal にサインインします。Sign in to the Azure portal.

  2. [リソースの作成] をクリックします。Click Create a resource.

  3. 検索ボックスで、「Web アプリ」と入力します。In the search box, type Web App.

  4. 結果一覧で、Marketplace から [Web アプリ] を選択します。In the results list, select Web App from the Marketplace.

  5. サブスクリプションリソース グループを選択する (既存のリソース グループを選択する)、"または" 新しく作成します (アプリと同じ名前を使用します)。Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Web アプリの一意の名前を選択します。Choose a unique Name of your web app.

  7. 既定の [発行] オプションを [コード] として選択します。Choose the default Publish option as Code.

  8. [ランタイム スタック] で、ASP.NET または Node のバージョンを選択する必要があります。In the Runtime stack, you need to select a version under ASP.NET or Node. .NET バックエンドを構築する場合は、ASP.NET のバージョンを選択します。If you are building a .NET backend, select a version under ASP.NET. それ以外の場合で、Node ベースのアプリケーションをターゲットとする場合は、Node のいずれかのバージョンを選択します。Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. 適切なオペレーティング システム (Linux または Windows) を選択します。Select the right Operating System, either Linux or Windows.

  10. このアプリをデプロイするリージョンを選択します。Select the Region where you would like this app to be deployed.

  11. 適切なApp Service プランを選択し、 [レビューと作成] をクリックします。Select the appropriate App Service Plan and hit Review and create.

  12. [リソース グループ] で、既存のリソース グループを選択するか、"または"、新しく作成します (アプリと同じ名前を使用)。Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  13. Create をクリックしてください。Click Create. サービスが正常にデプロイされるまで数分待ってから次の手順に進んでください。Wait a few minutes for the service to be deployed successfully before proceeding. 状態の更新をポータル ヘッダーの通知 (ベル) アイコンで確認します。Watch the Notifications (bell) icon in the portal header for status updates.

  14. デプロイが完了したら、 [デプロイの詳細] セクションをクリックし、[リソースの種類] として [Microsoft.Web/サイト] をクリックします。Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. これで、作成したばかりの App Service Web アプリに移動します。It will navigate you to the App Service Web App that you just created.

  15. [構成] ブレードで [設定] をクリックし、 [アプリケーション設定][新しいアプリケーション設定] ボタンをクリックします。Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. [アプリケーション設定の追加/編集] ページで、 [名前] として「MobileAppsManagement_EXTENSION_VERSION」を、[値] として「最新」を入力して [OK] をクリックします。In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

この新しく作成した App Service Web アプリをモバイル アプリとして使用するための設定がすべて行われました。You are all set to use this newly created App Service Web app as a Mobile app.

データベース接続を作成し、クライアントとサーバー プロジェクトを構成するCreate a database connection and configure the client and server project

  1. 次のプラットフォームのためのクライアント SDK クイック スタートをダウンロードします。Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    注意

    iOS プロジェクトを使用する場合は、GitHub の最新リリースから "azuresdk-iOS-*.zip" をダウンロードする必要があります。If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. MicrosoftAzureMobile.framework ファイルを解凍して、プロジェクトのルートに追加します。Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. データベース接続を追加するか、または既存の接続に接続する必要があります。You will have to add a database connection or connect to an existing connection. まず、データ ストアを作成するか、または既存のデータ ストアを使用するかを決定します。First, determine whether you’ll create a data store or use an existing one.

    • 新しいデータ ストアを作成する:データ ストアを作成する場合は、次のクイック スタートを使用します。Create a new data store: If you’re going to create a data store, use the following quickstart:

      クイック スタート:Azure SQL Database の単一データベースの概要Quickstart: Getting started with single databases in Azure SQL Database

    • 既存のデータ ソース:既存のデータベース接続を使用する場合は、次の手順に従います。Existing data source: Follow the instructions below if you want to use an existing database connection

      1. SQL Database の接続文字列の形式 - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} サーバーの名前。これは、データベースの概要ページで見つけることができ、通常は "server_name.database.windows.net" の形式になっています。{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {ポート} 通常は 1433 です。{port} usually 1433. {your_catalogue} データベースの名前。{your_catalogue} Name of the database. {your_username} データベースにアクセスするユーザー名。{your_username} User name to access your database. {your_password} データベースにアクセスするためのパスワード。{your_password} Password to access your database.

        SQL 接続文字列の形式の詳細を確認してください。Learn more about SQL Connection String format

      2. モバイル アプリに接続文字列を追加します。App Service では、メニューの [構成] オプションを使用して、アプリケーションの接続文字列を管理できます。Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        接続文字列を追加するには:To add a connection string:

        1. [アプリケーションの設定] タブをクリックします。Click on the Application settings tab.

        2. [[+] New connection string] ([+] 新しい接続文字列) をクリックします。Click on [+] New connection string.

        3. 接続文字列の [名前][値] 、および [種類] を指定する必要があります。You will need to provide Name, Value and Type for your connection string.

        4. [名前] を「MS_TableConnectionString」と入力します。Type Name as MS_TableConnectionString

        5. [値] は、前の手順で作成した接続文字列にしてください。Value should be the connecting string you formed in the step before.

        6. SQL Azure データベースに接続文字列を追加している場合は、 [種類] の下の [SQLAzure] を選択します。If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

  3. Azure Mobile Apps には、.NET バックエンド用と Node.js バックエンド用の SDK があります。Azure Mobile Apps has SDKs for .NET and Node.js backends.

    • Node.JS バックエンドNode.js backend

      Node.js クイックスタート アプリを使用する場合は、以下の手順に従ってください。If you’re going to use Node.js quickstart app, follow the instructions below.

      1. Azure portal で、 [Easy Tables] に移動します。次の画面が表示されます。In the Azure portal, go to Easy Tables, you will see this screen.

        Node Easy Tables

      2. SQL 接続文字列が [構成] タブに既に追加されていることを確認します。次に、 [これにより、すべてのサイト コンテンツが上書きされることを確認しました] のボックスをオンにし、 [TodoItem テーブルを作成する] をクリックします。Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Node Easy Tables の構成

      3. [Easy Tables] で、 [+ 追加] をクリックします。In Easy Tables, click the + Add button.

        Node Easy Tables の追加ボタン

      4. 匿名アクセス権で TodoItem テーブルを作成します。Create a TodoItem table with anonymous access.

        Node Easy Tables のテーブルの追加

    • .NET バックエンド.NET backend

      .NET クイックスタート アプリを使用する場合は、次の手順に従います。If you’re going to use .NET quickstart app, follow the instructions below.

      1. azure-mobile-apps-quickstarts リポジトリから Azure Mobile Apps .NET サーバー プロジェクトをダウンロードします。Download the Azure Mobile Apps .NET server project from the azure-mobile-apps-quickstarts repository.

      2. Visual Studio でローカルに .NET サーバー プロジェクトをビルドします。Build the .NET server project locally in Visual Studio.

      3. Visual Studio でソリューション エクスプローラーを開き、ZUMOAPPNAMEService プロジェクトを右クリックして、 [発行] をクリックすると、Publish to App Service ウィンドウが表示されます。In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Mac で作業している場合は、こちらから、アプリをデプロイする他の方法を確認してください。If you are working on Mac, check out other ways to deploy the app here.

        Visual Studio の発行

      4. 発行先として [App Service] を選択し、 [既存のものを選択] をクリックし、次にウィンドウ下部にある [発行] をクリックします。Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. 最初に、Azure サブスクリプションを使用して Visual Studio にログインする必要があります。You will need to log into Visual Studio with your Azure subscription first. SubscriptionResource Group を選択し、次にアプリの名前を選択します。Select the Subscription, Resource Group, and then select the name of your app. 準備ができたら [OK] をクリックします。これにより、ローカル環境にある .NET サーバー プロジェクトが App Service バックエンドにデプロイされます。When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. デプロイが完了すると、ブラウザーで http://{zumoappname}.azurewebsites.net/ にリダイレクトされます。When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

クライアント プロジェクトを実行するRun the client project

  1. UWP プロジェクトを開きます。Open the UWP project.

  2. Azure Portal にアクセスし、作成したモバイル アプリに移動します。Go to the Azure portal and navigate to the mobile app that you created. Overview ブレードで、モバイル アプリのパブリック エンドポイントである URL を探します。On the Overview blade, look for the URL which is the public endpoint for your mobile app. 例 - アプリ名 "test123" のサイト名は https://test123.azurewebsites.net になります。Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  3. このフォルダー内のファイル App.xaml.cs (windows-uwp-cs/ZUMOAPPNAME/) を開きます。Open the file App.xaml.cs in this folder - windows-uwp-cs/ZUMOAPPNAME/. アプリケーション名は ZUMOAPPNAME です。The application name is ZUMOAPPNAME.

  4. App クラスで、ZUMOAPPURL パラメーターを上のパブリック エンドポイントに置き換えます。In App class, replace ZUMOAPPURL parameter with public endpoint above.

    public static MobileServiceClient MobileService = new MobileServiceClient("ZUMOAPPURL");

    becomes

    public static MobileServiceClient MobileService = new MobileServiceClient("https://test123.azurewebsites.net");

  5. F5 キーを押して、アプリをデプロイおよび実行します。Press the F5 key to deploy and run the app.

  6. アプリで、 [Insert a TodoItem (TodoItem の挿入)] ボックスに意味のあるテキスト (たとえば、「"チュートリアルの完了"」) を入力し、 [保存] をクリックします。In the app, type meaningful text, such as Complete the tutorial, in the Insert a TodoItem text box, and then click Save.

    Windows quickstart complete desktop

    これで、Azure でホストされている新しいモバイル アプリ バックエンドに POST 要求が送信されます。This sends a POST request to the new mobile app backend that's hosted in Azure.