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

[アーティクル]
11/14/2022

このチュートリアルでは、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)

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

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

お使いのブラウザーで azure-mobile-apps リポジトリを開きます。
[コード] のドロップダウンを開き、[ZIP のダウンロード] を選択します。
ダウンロードが完了したら、 ダウンロード フォルダーを開き、azure-mobile-apps-main.zip ファイルを探します。
ダウンロードしたファイルを右クリックし、[すべて展開] を選択します。

必要に応じて、PowerShell を使用してアーカイブを展開することもできます。
```
C:\Temp> Expand-Archive azure-mobile-apps-main.zip
```

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

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

お使いのブラウザーで azure-mobile-apps リポジトリを開きます。
[コード] のドロップダウンを開き、[ZIP のダウンロード] を選択します。
ダウンロードが完了したら、[ダウンロード] フォルダーを開きます。
パッケージは既に 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 でリソースを作成します。

ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。このディレクトリには azuredeploy.json もあります。
Azure CLI を使用して、サインインし、サブスクリプションを選択していることを確認します。
新しいリソースグループを作成します。
```
az group create -l westus -g quickstart
```
このコマンドは、米国西部リージョンに quickstart リソースグループを作成します。リソースを作成できる場所であれば、希望する任意のリージョンを選択できます。このチュートリアルで言及されている場合には、それと同じ名前とリージョンを使用するようにしてください。
グループデプロイを使用してリソースを作成します。
```
az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
```
SQL 管理者パスワードとして、強力なパスワードを選択してください。後でデータベースにアクセスするときに必要になります。
デプロイが完了したら、出力変数を取得します。これらの変数は、後で必要になる重要な情報を保持しています。
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
出力例を次に示します。
後で使用できるように、出力の各値をメモしておきます。

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

Visual Studio で TodoApp.sln を開きます

右側のウィンドウで、[ソリューションエクスプローラー]を選択します。
TodoAppService.NET6 プロジェクトを右クリックし、[スタートアッププロジェクトに設定] を選択します。
トップメニューで、ビルド>TodoAppService.NET6 をパブリッシュ を選択します。
[パブリッシュ] ウィンドウで、[ターゲット] の [Azure] を選択してから、[次へ] を押します。
[特定のターゲット] で [Azure App Service (Windows)] を選択してから、[次へ] を押します。
必要に応じてサインインし、適切なサブスクリプション名を選択します。
[ビュー] が [リソースグループ] に設定されていることを確認します。
quickstart リソースグループを展開し、前に作成した App Service を選択します。
[完了] を選択します。
発行プロファイルの作成プロセスが完了したら、[閉じる] を選択します。
[サービスの依存関係] を見つけて、SQL Server データベースの横のトリプルドットを選択し、[接続] を選択します。
[Azure SQL Database] を選択してから、[次へ] を選択します。
[クイックスタート] データベースを選択してから、[次へ] を選択します。
デプロイでの出力に含まれていた SQL ユーザー名とパスワードを使用して、フォームを入力してから、[次へ] を選択します。
[完了] を選択します。
完了したら、[閉じる] を選択します。
[パブリッシュ] を選択して、前に作成した Azure App Service にアプリをパブリッシュします。
バックエンドサービスがパブリッシュされると、ブラウザーが開きます。 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 でリソースを作成する

ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。このディレクトリには azuredeploy.json もあります。
Azure CLI を使用して、サインインし、サブスクリプションを選択していることを確認します。
新しいリソースグループを作成します。
```
az group create -l westus -g quickstart
```
このコマンドは、米国西部リージョンに quickstart リソースグループを作成します。リソースを作成できる場所であれば、希望する任意のリージョンを選択できます。このチュートリアルで言及されている場合には、それと同じ名前とリージョンを使用するようにしてください。
グループデプロイを使用してリソースを作成します。
```
az deployment group create -g quickstart --template-file azuredeploy.json --parameters sqlPassword=MyPassword1234
```
SQL 管理者パスワードとして、強力なパスワードを選択してください。後でデータベースにアクセスするときに必要になります。
デプロイが完了したら、出力変数を取得します。これらの変数は、後で必要になる重要な情報を保持しています。
```
az deployment group show -g quickstart -n azuredeploy --query properties.outputs
```
出力例を次に示します。
後で使用できるように、出力の各値をメモしておきます。

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

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

TodoApp ソリューションを右クリックして、[NuGet パッケージの復元] を選びます。
NuGet パッケージの復元が終わるまで待ちます。
TodoAppService.NET6 プロジェクトを右クリックして、[発行]>[Azure に発行する...] をクリックします。
上で (quickstart リソースグループ内に) 作成したサービスを選んで、[発行] を選びます。
バックエンドサービスがパブリッシュされると、ブラウザーが開きます。 URL に /tables/todoitem?ZUMO-API-VERSION=3.0.0 を追加します。

サンプルアプリの構成

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

TodoApp.Data プロジェクトを展開します。
TodoApp.Data プロジェクトを右クリックし、[追加]>[クラス] の順に選択します。
名前に「Constants.cs」と入力してから、[追加] を選択します。
Constants.cs.example ファイルを開き、内容をコピーします (Ctrl + A の後で Ctrl + C)。
Constants.cs に切り替え、すべてのテキストを選択し (Ctrl + A)、サンプルファイルの内容を貼り付けます (Ctrl + V)。
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 を使用してください。
ファイルを保存します。 (Ctrl + S)。

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

TodoApp.Data プロジェクトを展開します。
TodoApp.Data プロジェクトを右クリックして、[追加]>[新しいクラス...] を選びます。
[空のクラス] を選び、名前に「Constants.cs」と入力して、[作成] を選びます。
Constants.cs.example ファイルを開き、内容をコピーします (⌘ + A キーの後で ⌘ + C キー)。
Constants.cs に切り替え、すべてのテキストを選び (⌘ + A キー)、サンプルファイルの内容を貼り付けます (⌘ + V キー)。

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";
    }
}

ファイルを保存します。 (⌘ + S キー)。

アプリのビルドと実行

ソリューションエクスプローラーで、xamarin-native フォルダーを展開します。
TodoApp.Android プロジェクトを右クリックし、[スタートアッププロジェクトに設定] を選択します。
トップバーで、任意の CPU 構成と TodoApp.Android ターゲットを選択します。
代わりに 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 デバイスマネージャーをオープンし、選択したエミュレーターの横にある [開始] を押します。
F5 キーを押し、プロジェクトをビルドして実行します。

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

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

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

ソリューションエクスプローラーで、xamarin-native フォルダーを展開します。
TodoApp.Android プロジェクトを右クリックし、[スタートアッププロジェクトに設定] を選択します。
上部のバーで、適切な Android エミュレーターを選択します。
上部のメニューで、[デバッグ]>[デバッグの開始] を選びます。

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

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

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

次のステップ

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

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

前提条件

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