Azure Mobile Apps を使用して Xamarin.Android アプリをビルドする

このチュートリアルでは、Xamarin と Azure mobile app バックエンドを使用してクラウドベースのバックエンド サービスを Android モバイル アプリに追加する方法を説明します。 新しいモバイル アプリ バックエンドと、アプリのデータを Azure に格納する簡単な Todo list アプリの両方を作成します。

Azure App Service での Mobile Apps 機能の使用に関する他の Xamarin Android チュートリアルの前に、このチュートリアルを完了する必要があります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • Visual Studio 2022 と次のワークロード。
    • ASP.NET および Web の開発
    • Azure の開発
    • .NET によるモバイル開発
  • Azure アカウント
  • Azure CLI
    • 開始する前に、az login でサインイン して適切なサブスクリプションを選択します。
  • 次の設定を使用する Android 仮想デバイス:
    • 電話: 携帯電話の画像 - テストには Pixel 5 を使用します。
    • システム イメージ: Android 11 (Google API を使用した API 30)

サンプル アプリ をダウンロードする

  1. お使いのブラウザーで azure-mobile-apps リポジトリ を開きます。

  2. [コード] のドロップダウンを開き、[ZIP のダウンロード] を選択します。

    GitHub の [コード] メニューのスクリーンショット。

  3. ダウンロードが完了したら、 ダウンロード フォルダーを開き、azure-mobile-apps-main.zip ファイルを探します。

  4. ダウンロードしたファイルを右クリックし、[すべて展開] を選択します。

    必要に応じて、PowerShell を使用してアーカイブを展開することもできます。

    C:\Temp> Expand-Archive azure-mobile-apps-main.zip
    

サンプルは、展開されたファイル内のサンプルフォルダーにあります。 このクイック スタートのサンプルは TodoApp という名前です。 TodoApp.sln ファイルをダブルクリックして、Visual Studioでサンプルを開くことができます。

ソリューションのエクスプローラーのスクリーンショット。

  1. お使いのブラウザーで azure-mobile-apps リポジトリ を開きます。

  2. [コード] のドロップダウンを開き、[ZIP のダウンロード] を選択します。

    GitHub の [コード] メニューのスクリーンショット。

  3. ダウンロードが完了したら、[ダウンロード] フォルダーを開きます。

  4. パッケージは既に azure-mobile-apps-main フォルダーに展開されています。 必要な場合は、このフォルダーをより適切な場所に移動できます。

サンプルは、展開されたファイル内のサンプルフォルダーにあります。 このクイック スタートのサンプルは TodoApp という名前です。 TodoApp.sln ファイルをダブルクリックして、Visual Studio 2022 for Mac でサンプルを開くことができます。

ソリューションのエクスプローラーのスクリーンショット。

初めてサンプルを開くと、特定のプロジェクトが使用できないことに注意してください。 たとえば、Windows 固有のプロジェクト (WPF や UWP など) は、Visual Studio 2022 for Mac ではコンパイルできません。

使用しないプロジェクトはすべてアンロードできます。 ソリューション エクスプローラーで windows フォルダーを展開します。

無効なプロジェクトを含むソリューション エクスプローラーのスクリーンショット。

無効になっているプロジェクトごとに、プロジェクトを右クリックして、[プロジェクトのアンロード] を選びます。

バックエンドを Azure にデプロイする

注意

別のクイック スタートで既にバックエンドをデプロイしている場合は、同じバックエンドを使用することで、この手順をスキップできます。

バックエンド サービスをデプロイするには、次の手順を実行します。

  • Azure Resource Manager と Azure CLI を使用して、Azure App Service と Azure SQL Database を Azure にデプロイします。
  • Visual Studioを使用して、サービス コードを新しく作成された Azure App Service にパブリッシュします。

Azure でリソースを作成します。

  1. ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。 このディレクトリには azuredeploy.json もあります。

  2. Azure CLI を使用して、サインインし、サブスクリプションを選択していることを確認します。

  3. 新しいリソース グループを作成します。

    az group create -l westus -g quickstart
    

    このコマンドは、米国西部リージョンに quickstart リソース グループを作成します。 リソースを作成できる場所であれば、希望する任意のリージョンを選択できます。 このチュートリアルで言及されている場合には、それと同じ名前とリージョンを使用するようにしてください。

  4. グループ デプロイを使用してリソースを作成します。

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
    

    SQL 管理者パスワードとして、強力なパスワードを選択してください。 後でデータベースにアクセスするときに必要になります。

  5. デプロイが完了したら、出力変数を取得します。これらの変数は、後で必要になる重要な情報を保持しています。

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs
    

    出力例を次に示します。

    コマンド ラインの結果のスクリーンショット。

  6. 後で使用できるように、出力の各値をメモしておきます。

サービス コードをパブリッシュします。

Visual Studio で TodoApp.sln を開きます

  1. 右側のウィンドウで、[ソリューション エクスプローラー]を選択します。

  2. TodoAppService.NET6 プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択します。

  3. トップ メニューで、ビルド>TodoAppService.NET6 をパブリッシュ を選択します。

  4. [パブリッシュ] ウィンドウで、[ターゲット] の [Azure] を選択してから、[次へ] を押します。

    ターゲット選択ウィンドウのスクリーンショット。

  5. [特定のターゲット] で [Azure App Service (Windows)] を選択してから、[次へ] を押します。

    特定のターゲット選択ウィンドウのスクリーンショット。

  6. 必要に応じてサインインし、適切なサブスクリプション名を選択します。

  7. [ビュー] が [リソース グループ] に設定されていることを確認します。

  8. quickstart リソース グループを展開し、前に作成した App Service を選択します。

    App Service の選択ウィンドウのスクリーンショット。

  9. [完了] を選択します。

  10. 発行プロファイルの作成プロセスが完了したら、[閉じる] を選択します。

  11. [サービスの依存関係] を見つけて、SQL Server データベースの横のトリプル ドットを選択し、[接続] を選択します。

    S Q L サーバー構成の選択を示すスクリーンショット。

  12. [Azure SQL Database] を選択してから、[次へ] を選択します。

  13. [クイック スタート] データベースを選択してから、[次へ] を選択します。

    データベース選択ウィンドウのスクリーンショット。

  14. デプロイでの出力に含まれていた SQL ユーザー名とパスワードを使用して、フォームを入力してから、[次へ] を選択します。

    データベース設定ウィンドウのスクリーンショット。

  15. [完了] を選択します。

  16. 完了したら、[閉じる] を選択します。

  17. [パブリッシュ] を選択して、前に作成した Azure App Service にアプリをパブリッシュします。

    発行ボタンを示すスクリーンショット。

  18. バックエンド サービスがパブリッシュされると、ブラウザーが開きます。 URL に /tables/todoitem?ZUMO-API-VERSION=3.0.0 を追加します。

    サービスが発行された後のブラウザー出力を示すスクリーンショット。

バックエンド サービスをデプロイするには、次の手順を実行します。

  • Azure Resource Manager と Azure CLI を使用して、Azure App Service と Azure SQL Database を Azure にデプロイします。
  • Visual Studio 2022 for Mac を使用して、サービス コードを新しく作成した Azure App Service に発行します。

Azure でリソースを作成する

  1. ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。 このディレクトリには azuredeploy.json もあります。

  2. Azure CLI を使用して、サインインし、サブスクリプションを選択していることを確認します。

  3. 新しいリソース グループを作成します。

    az group create -l westus -g quickstart
    

    このコマンドは、米国西部リージョンに quickstart リソース グループを作成します。 リソースを作成できる場所であれば、希望する任意のリージョンを選択できます。 このチュートリアルで言及されている場合には、それと同じ名前とリージョンを使用するようにしてください。

  4. グループ デプロイを使用してリソースを作成します。

    az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
    

    SQL 管理者パスワードとして、強力なパスワードを選択してください。 後でデータベースにアクセスするときに必要になります。

  5. デプロイが完了したら、出力変数を取得します。これらの変数は、後で必要になる重要な情報を保持しています。

    az deployment group show -g quickstart -n azuredeploy --query properties.outputs
    

    出力例を次に示します。

    コマンド ラインの結果のスクリーンショット。

  6. 後で使用できるように、出力の各値をメモしておきます。

サービス コードを発行する

Visual Studio 2022 for Mac で TodoApp.sln を開きます。

  1. TodoApp ソリューションを右クリックして、[NuGet パッケージの復元] を選びます。

  2. NuGet パッケージの復元が終わるまで待ちます。

  3. TodoAppService.NET6 プロジェクトを右クリックして、[発行]>[Azure に発行する...] をクリックします。

  4. 上で (quickstart リソース グループ内に) 作成したサービスを選んで、[発行] を選びます。

    ターゲット選択ウィンドウのスクリーンショット。

  5. バックエンド サービスがパブリッシュされると、ブラウザーが開きます。 URL に /tables/todoitem?ZUMO-API-VERSION=3.0.0 を追加します。

    サービスが発行された後のブラウザー出力を示すスクリーンショット。

サンプル アプリの構成

クライアント アプリケーションは、バックエンドと通信できるように、バックエンドのベース URL を認識する必要があります。

  1. TodoApp.Data プロジェクトを展開します。

  2. TodoApp.Data プロジェクトを右クリックし、[追加]>[クラス] の順に選択します。

  3. 名前に「Constants.cs」と入力してから、[追加] を選択します。

    Constants.cs ファイルをプロジェクトに追加するスクリーンショット。

  4. Constants.cs.example ファイルを開き、内容をコピーします (Ctrl + A の後で Ctrl + C)。

  5. Constants.cs に切り替え、すべてのテキストを選択し (Ctrl + A)、サンプル ファイルの内容を貼り付けます (Ctrl + V)。

  6. https://APPSERVICENAME.azurewebsites.net をご自身のサービスのバックエンド URL に置き換えます。

    namespace TodoApp.Data
    {
        public static class Constants
        {
            /// <summary>
            /// The base URI for the Datasync service.
            /// </summary>
            public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
        }
    }
    

    ご自身のサービスのバックエンド URL は、[パブリッシュ] タブで取得できます。必ず https の URL を使用してください。

  7. ファイルを保存します。 (Ctrl + S)。

クライアント アプリケーションは、バックエンドと通信できるように、バックエンドのベース URL を認識する必要があります。

  1. TodoApp.Data プロジェクトを展開します。

  2. TodoApp.Data プロジェクトを右クリックして、[追加]>[新しいクラス...] を選びます。

  3. [空のクラス] を選び、名前に「Constants.cs」と入力して、[作成] を選びます。

    Constants.cs ファイルをプロジェクトに追加するスクリーンショット。

  4. Constants.cs.example ファイルを開き、内容をコピーします (⌘ + A キーの後で ⌘ + C キー)。

  5. Constants.cs に切り替え、すべてのテキストを選び (⌘ + A キー)、サンプル ファイルの内容を貼り付けます (⌘ + V キー)。

  6. https://APPSERVICENAME.azurewebsites.net をご自身のサービスのバックエンド URL に置き換えます。

    namespace TodoApp.Data
    {
        public static class Constants
        {
            /// <summary>
            /// The base URI for the Datasync service.
            /// </summary>
            public static string ServiceUri = "https://demo-datasync-quickstart.azurewebsites.net";
        }
    }
    
  7. ファイルを保存します。 (⌘ + S キー)。

アプリのビルドと実行

  1. ソリューション エクスプローラーで、xamarin-native フォルダーを展開します。

  2. TodoApp.Android プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択します。

  3. トップ バーで、任意の CPU 構成と TodoApp.Android ターゲットを選択します。

    Xamarin Android アプリの実行構成を設定する方法を示すスクリーンショット。

  4. 代わりに Android Emulator が表示される場合は、Android エミュレーターを作成していません。 詳細については、「Android Emulator のセットアップ」を参照してください。 新しい Android エミュレーターを作成する方法:

    • [ツール]>[Android]>[Android デバイス マネージャー] を選択します。
    • [+新規] を選択します。
    • 左側で、次を選択します。
      • 名前: quickstart
      • 基本デバイス: Pixel 5
      • プロセッサ: x86_64
      • OS: Android 11.0 - API 30
      • Google API: オン
    • [作成] を選択します
    • 必要に応じて、使用許諾契約書に同意します。 その後、イメージがダウンロードされます。
    • [スタート] ボタンが表示されたら、[スタート] を押します。
    • Hyper-V ハードウェア アクセラレータについて確認するメッセージが表示された場合は、続行する前に、ハードウェア アクセラレータを有効にするドキュメントを参照してください。 エミュレーターは、ハードウェア アクセラレータを有効にしない場合低速になります。

    完了したら、Android デバイス マネージャーを閉じます。

    ヒント

    続行する前に、Android エミュレーターを起動します。 これを行うには、Android デバイス マネージャーをオープンし、選択したエミュレーターの横にある [開始] を押します。

  5. F5 キーを押し、プロジェクトをビルドして実行します。

アプリが起動すると、空のリストと、エミュレーターに項目を追加するためのフローティング アクション ボタンが表示されます。 次のようにすることができます。

  • フローティング アクション ボタンを押し、テキストを入力して項目を追加します。
  • チェック ボックスをオンまたはオフにして、項目の完了をマークします。
  • 更新アイコンを押して、サービスからデータをリロードします。

実行中の Android アプリのスクリーンショット。

  1. ソリューション エクスプローラーで、xamarin-native フォルダーを展開します。

  2. TodoApp.Android プロジェクトを右クリックし、[スタートアップ プロジェクトに設定] を選択します。

  3. 上部のバーで、適切な Android エミュレーターを選択します。

    Mac で Android エミュレーターを選択する方法を示すスクリーンショット。

  4. 上部のメニューで、[デバッグ]>[デバッグの開始] を選びます。

アプリが起動すると、空のリストと、エミュレーターに項目を追加するためのテキスト ボックスが表示されます。 次のようにすることができます。

  • ボタン + を押して項目を追加します。
  • 項目を選択すると、[完了] フラグが設定またはクリアされます。
  • 更新アイコンを押して、サービスからデータをリロードします。

Mac で実行されている To Do リストを示す実行中の Android アプリのスクリーンショット。

次のステップ

アプリに認証を追加して、チュートリアルを続行します。