Xamarin.Android アプリの作成Create a Xamarin.Android App


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.


このチュートリアルでは、Xamarin Android アプリケーションにクラウドベースのバックエンド サービスを追加する方法を示します。This tutorial shows you how to add a cloud-based backend service to a Xamarin.Android app. 詳細については、「 モバイル アプリとは」を参照してください。For more information, see What are Mobile Apps.

完成したアプリケーションのスクリーンショットは次のようになります。A screenshot from the completed app is below:

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


このチュートリアルを完了するには、次の前提条件を用意しておく必要があります。To complete this tutorial, you need the following prerequisites:

  • アクティブな Azure アカウントアカウントがない場合、Azure 試用版にサインアップして、最大 10 件の無料 Mobile Apps を入手できます。An active Azure account. アカウントがない場合は、Azure 試用版にサインアップして、最大 10 件の無料 Mobile Apps を入手してください。If you don't have an account, sign up for an Azure trial and get up to 10 free Mobile Apps. 詳細については、 Azure の無料試用版サイトを参照してください。For details, see Azure Free Trial.
  • Visual Studio と Xamarin。Visual Studio with Xamarin. 手順については、「 セットアップとインストール 」をご覧ください。See Setup and install for Visual Studio and Xamarin for instructions.

Azure モバイル アプリ バックエンドの作成Create an Azure Mobile App backend

モバイル アプリ バックエンドを作成するには、次の手順に従います。Follow these steps to create a 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.

これで、モバイル クライアント アプリケーションで使用できる Azure モバイル アプリ バックエンドのプロビジョニングが完了しました。You have now provisioned an Azure Mobile App backend that can be used by your mobile client applications. 次は、簡単な "todo list" バックエンドのサーバー プロジェクトをダウンロードして、それを Azure に発行します。Next, download a server project for a simple "todo list" backend and publish it to Azure.

データベース接続を作成し、クライアントとサーバー プロジェクトを構成する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)
    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.Android アプリを実行するRun the Xamarin.Android app

  1. Xamarin.Android プロジェクトを開きます。Open the Xamarin.Android 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. このフォルダー内のファイル ToDoActivity.cs (xamarin.android/ZUMOAPPNAME/ToDoActivity.cs) を開きます。Open the file ToDoActivity.cs in this folder - xamarin.android/ZUMOAPPNAME/ToDoActivity.cs. アプリケーション名は ZUMOAPPNAME です。The application name is ZUMOAPPNAME.

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

    const string applicationURL = @"ZUMOAPPURL";


    const string applicationURL = @"https://test123.azurewebsites.net";

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

  6. アプリで、意味のあるテキスト (たとえば、「チュートリアルの完了」) を入力し、 [追加] ボタンをクリックします。In the app, type meaningful text, such as Complete the tutorial and then click the Add button.

    要求のデータは TodoItem テーブルに挿入されます。Data from the request is inserted into the TodoItem table. テーブルに格納された項目がモバイル アプリ バックエンドによって返され、データが一覧に表示されます。Items stored in the table are returned by the mobile app backend, and the data appears in the list.


    モバイル アプリ バックエンドにアクセスしてデータのクエリと挿入を行うコードを確認できます (ToDoActivity.cs C# ファイルにあります)。You can review the code that accesses your mobile app backend to query and insert data, which is found in the ToDoActivity.cs C# file.


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

プロジェクトで参照されるすべてのサポート パッケージのバージョンが同じである必要があることに注意してください。Please note that all the support packages referenced in your 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.