Android アプリの作成Create an 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.

概要Overview

このチュートリアルでは、Azure モバイル アプリ バックエンドを使用してクラウド ベースのバックエンド サービスを Android モバイル アプリに追加する方法を説明します。This tutorial shows you how to add a cloud-based backend service to an Android mobile app by using an Azure mobile app backend. 新しいモバイル アプリ バックエンドと、アプリのデータを Azure に格納する簡単な Todo リスト Android アプリを作成します。You will create both a new mobile app backend and a simple Todo list Android app that stores app data in Azure.

このチュートリアルは、Azure App Service での Mobile Apps 機能の使用に関する他のすべての Android チュートリアルを実行する前に完了しておく必要があります。Completing this tutorial is a prerequisite for all other Android tutorials about using the Mobile Apps feature in Azure App Service.

前提条件Prerequisites

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

新しい Azure モバイル アプリ バックエンドを作成するCreate a new Azure 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.

Android アプリを実行するRun the Android app

  1. Android Studio[Import project (Eclipse ADT, Gradle, etc.) (プロジェクトのインポート (Eclipse ADT、Gradle など))] を使用して、プロジェクトを開きます。Open the project using Android Studio, using Import project (Eclipse ADT, Gradle, etc.). JDK エラーを回避するために、このインポート オプションを必ず選択してください。Make sure you make this import selection to avoid any JDK errors.

  2. ZUMOAPPNAME/app/src/main/java/com/example/zumoappname フォルダーの ToDoActivity.java ファイルを開きます。Open the file ToDoActivity.java in this folder - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. アプリケーション名は ZUMOAPPNAME です。The application name is ZUMOAPPNAME.

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

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

    new MobileServiceClient("ZUMOAPPURL", this).withFilter(new ProgressFilter());

    becomes

    new MobileServiceClient("https://test123.azurewebsites.net", this).withFilter(new ProgressFilter());

  5. [アプリの実行] を押してプロジェクトをビルドし、Android シミュレーターでアプリを開始します。Press the Run 'app' button to build the project and start the app in the Android simulator.

  6. アプリで、意味のあるテキスト (たとえば、「 チュートリアルの完了 」) を入力し、[追加] ボタンをクリックします。In the app, type meaningful text, such as Complete the tutorial and then click the 'Add' button. これにより、事前にデプロイした Azure バックエンドに POST 要求が送信されます。This sends a POST request to the Azure backend you deployed earlier. バックエンドは要求から取得したデータを TodoItem SQL テーブルに挿入し、新しく格納されたアイテムに関する情報をモバイル アプリに返します。The backend inserts data from the request into the TodoItem SQL table, and returns information about the newly stored items back to the mobile app. モバイル アプリでは、このデータが一覧に表示されます。The mobile app displays this data in the list. Android のクイック スタートQuickstart Android