Azure での Xamarin.Forms アプリの作成Create a Xamarin.Forms app with Azure

注意

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

このチュートリアルでは、Azure App Service の Mobile Apps 機能をバックエンドとして使用して、Xamarin.Forms モバイル アプリにクラウドベースのバックエンド サービスを追加する方法を示します。This tutorial shows you how to add a cloud-based back-end service to a Xamarin.Forms mobile app by using the Mobile Apps feature of Azure App Service as the back end. 新しい Mobile Apps バックエンドと、アプリのデータを Azure に格納する簡単な To Do リスト Xamarin.Forms アプリの両方を作成します。You create both a new Mobile Apps back end and a simple to-do list Xamarin.Forms app that stores app data in Azure.

Xamarin.Forms の他のすべての Azure Mobile Apps のチュートリアルを行う前に、このチュートリアルを完了してください。Completing this tutorial is a prerequisite for all other Mobile Apps tutorials for Xamarin.Forms.

前提条件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 more information, see Azure Free Trial.

  • Visual Studio 2017 以降または Visual Studio for Mac に含まれる Visual Studio Tools for Xamarin。Visual Studio Tools for Xamarin, in Visual Studio 2017 or later, or Visual Studio for Mac. 手順については、Xamarin のインストール ページを参照してください。See the Xamarin installation page for instructions.

  • (省略可能) iOS アプリをビルドするには、Xcode 9.0 以降がインストールされた Mac が必要です。(optional) To build an iOS app, a Mac with Xcode 9.0 or later is required. Visual Studio for Mac を使用して iOS アプリを開発するか、Visual Studio 2017 以降を使用することができます (Mac がネットワーク上で使用可能な場合)。Visual Studio for Mac can be used to develop iOS apps, or Visual Studio 2017 or later can be used (so long as the Mac is available on the network).

新しい Mobile Apps バックエンドの作成Create a new Mobile Apps back end

  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.

Xamarin.Forms ソリューションを実行するRun the Xamarin.Forms solution

ソリューションを開くには Visual Studio Tools for Xamarin が必要です。Xamarin のインストール手順を参照してください。The Visual Studio Tools for Xamarin are required to open the solution, see the Xamarin installation instructions. ツールが既にインストールされている場合は、以下の手順に従ってソリューションをダウンロードし、開きます。If the tools are already installed, follow these steps to download and open the solution:

Visual Studio (Windows と Mac)Visual Studio (Windows and Mac)

  1. 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.

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

  3. Constants.cs クラスで、ZUMOAPPURL 変数を上のパブリック エンドポイントに置き換えます。In Constants.cs class, replace ZUMOAPPURL variable with public endpoint above.

    public static string ApplicationURL = @"ZUMOAPPURL";

    becomes

    public static string ApplicationURL = @"https://test123.azurewebsites.net";

  4. Android または Windows のプロジェクトを実行するには、以下の手順に従います。また、ネットワーク接続された Mac コンピューターが使用可能な場合は、iOS プロジェクトを実行できます。Follow the instructions below to run the Android or Windows projects; and if there is a networked Mac computer available, the iOS project.

(省略可能) Android プロジェクトの実行(Optional) Run the Android project

このセクションでは、Xamarin.Android プロジェクトを実行します。In this section, you run the Xamarin.Android project. Android デバイスを使用していない場合は、このセクションを省略できます。You can skip this section if you are not working with Android devices.

Visual StudioVisual Studio

  1. Android (Droid) プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。Right-click the Android (Droid) project, and then select Set as StartUp Project.

  2. [ビルド] メニューの [構成マネージャー] を選択します。On the Build menu, select Configuration Manager.

  3. [構成マネージャー] ダイアログ ボックスで、Android プロジェクトの横の [ビルド][デプロイ] チェック ボックスをオンにし、共有コード プロジェクトの [ビルド] ボックスがオンになっていることを確認します。In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Android project, and ensure the shared code project has the Build box checked.

  4. プロジェクトをビルドし、Android エミュレーターでアプリを起動するには、F5 キーを押すか、 [開始] をクリックします。To build the project and start the app in an Android emulator, press the F5 key or click the Start button.

Visual Studio for MacVisual Studio for Mac

  1. Android プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。Right-click the Android project, and then select Set As Startup Project.

  2. プロジェクトをビルドして、アプリを Android エミュレーターで起動するには、 [実行] メニューを選択してから [デバッグの開始] を選択します。To build the project and start the app in an Android emulator, select the Run menu, then Start Debugging.

アプリで、意味のあるテキスト ("Xamarin の学習" など) を入力し、正符号 ( + ) を選択します。In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

Android の To Do アプリ

この操作で、Azure でホストされている新しい Mobile Apps バックエンドに POST 要求が送信されます。This action sends a post request to the new Mobile Apps back end that's hosted in Azure. 要求のデータは TodoItem テーブルに挿入されます。Data from the request is inserted into the TodoItem table. テーブルに格納された項目が Mobile Apps バックエンドによって返され、データが一覧に表示されます。Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

注意

Mobile Apps バックエンドにアクセスするコードは、ソリューションの共有コード プロジェクトの TodoItemManager.cs C# ファイルにあります。The code that accesses your Mobile Apps back end is in the TodoItemManager.cs C# file of the shared code project in the solution.

(省略可能) iOS プロジェクトの実行(Optional) Run the iOS project

このセクションでは、iOS デバイス用の Xamarin.iOS プロジェクトを実行します。In this section, you run the Xamarin.iOS project for iOS devices. iOS デバイスを使用していない場合は、このセクションを省略できます。You can skip this section if you are not working with iOS devices.

Visual StudioVisual Studio

  1. iOS プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。Right-click the iOS project, and then select Set as StartUp Project.

  2. [ビルド] メニューの [構成マネージャー] を選択します。On the Build menu, select Configuration Manager.

  3. [構成マネージャー] ダイアログ ボックスで、iOS プロジェクトの横の [ビルド][デプロイ] チェック ボックスをオンにし、共有コード プロジェクトの [ビルド] ボックスがオンになっていることを確認します。In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the iOS project, and ensure the shared code project has the Build box checked.

  4. プロジェクトをビルドし、iPhone エミュレーターでアプリを起動するには、F5 キーを押します。To build the project and start the app in the iPhone emulator, select the F5 key.

Visual Studio for MacVisual Studio for Mac

  1. iOS プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。Right-click the iOS project, and then select Set As Startup Project.

  2. [実行] メニューで [デバッグの開始] を選択し、プロジェクトをビルドして、アプリを iPhone エミュレーターで起動します。On the Run menu, select Start Debugging to build the project and start the app in the iPhone emulator.

アプリで、意味のあるテキスト ("Xamarin の学習" など) を入力し、正符号 ( + ) を選択します。In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

iOS の To Do アプリ

この操作で、Azure でホストされている新しい Mobile Apps バックエンドに POST 要求が送信されます。This action sends a post request to the new Mobile Apps back end that's hosted in Azure. 要求のデータは TodoItem テーブルに挿入されます。Data from the request is inserted into the TodoItem table. テーブルに格納された項目が Mobile Apps バックエンドによって返され、データが一覧に表示されます。Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

注意

Mobile Apps バックエンドにアクセスするコードは、ソリューションの共有コード プロジェクトの TodoItemManager.cs C# ファイルにあります。You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the shared code project in the solution.

(省略可能) Windows プロジェクトの実行(Optional) Run the Windows project

このセクションでは、Windows デバイス用の Xamarin.Forms Universal Windows Platform (UWP) プロジェクトを実行します。In this section, you run the Xamarin.Forms Universal Windows Platform (UWP) project for Windows devices. Windows デバイスを使用していない場合は、このセクションを省略できます。You can skip this section if you are not working with Windows devices.

Visual StudioVisual Studio

  1. UWP プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。Right-click any the UWP project, and then select Set as StartUp Project.

  2. [ビルド] メニューの [構成マネージャー] を選択します。On the Build menu, select Configuration Manager.

  3. [構成マネージャー] ダイアログ ボックスで、選択した Windows プロジェクトの横の [ビルド][デプロイ] チェック ボックスをオンにし、共有コード プロジェクトの [ビルド] ボックスがオンになっていることを確認します。In the Configuration Manager dialog box, select the Build and Deploy check boxes next to the Windows project that you chose, and ensure the shared code project has the Build box checked.

  4. プロジェクトをビルドし、Windows エミュレーターでアプリを起動するには、F5 キーを押すか、 [開始] をクリックします (「ローカル コンピューター」と表示されています)。To build the project and start the app in a Windows emulator, press the F5 key or click the Start button (which should read Local Machine).

注意

macOS で Windows プロジェクトを実行することはできません。The Windows project cannot be run on macOS.

アプリで、意味のあるテキスト ("Xamarin の学習" など) を入力し、正符号 ( + ) を選択します。In the app, type meaningful text, such as Learn Xamarin, and then select the plus sign (+).

この操作で、Azure でホストされている新しい Mobile Apps バックエンドに POST 要求が送信されます。This action sends a post request to the new Mobile Apps back end that's hosted in Azure. 要求のデータは TodoItem テーブルに挿入されます。Data from the request is inserted into the TodoItem table. テーブルに格納された項目が Mobile Apps バックエンドによって返され、データが一覧に表示されます。Items that are stored in the table are returned by the Mobile Apps back end, and the data is displayed in the list.

UWP の To Do アプリ

注意

ソリューションのポータブル クラス ライブラリ プロジェクトの TodoItemManager.cs C# ファイルに、Mobile Apps バックエンドにアクセスするコードが表示されます。You'll find the code that accesses your Mobile Apps back end in the TodoItemManager.cs C# file of the portable class library project of your solution.

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

ソリューションのビルドで問題が発生した場合は、NuGet パッケージ マネージャーを実行し、最新バージョンの Xamarin.Forms に更新します。また、Android プロジェクトで Xamarin.Android サポート パッケージを更新します。If you have problems building the solution, run the NuGet package manager and update to the latest version of Xamarin.Forms, and in the Android project, update the Xamarin.Android support packages. クイック スタート プロジェクトには、必ずしも最新バージョンが含まれていません。Quickstart projects might not always include the latest versions.

Android プロジェクトで参照されるすべてのサポート パッケージのバージョンが同じである必要があることに注意してください。Please note that all the support packages referenced in your Android project must have the same version. Azure Mobile Apps の NuGet パッケージには、Android プラットフォームに関して Xamarin.Android.Support.CustomTabs の依存関係があるため、プロジェクトで新しいサポート パッケージを使用する場合は、必要なバージョンを使用してこのパッケージを直接インストールし、競合を回避する必要があります。The Azure Mobile Apps NuGet package has Xamarin.Android.Support.CustomTabs dependency for Android platform, so if your project uses newer support packages you need to install this package with required version directly to avoid conflicts.