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

  • [アーティクル]

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

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

前提条件

このチュートリアルは Mac または Windows で実行できます。 このチュートリアルを完了するには、次のものが必要です。

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

アプリの iOS エディションをコンパイルする場合は、使用可能な Mac が必要です。

  • XCode をインストールします。
  • 必須コンポーネントを追加できるように、インストール後に Xcode を開きます。
  • 開いたら、[XCode Preferences...](XCode の設定...)>[コンポーネント] を選択し、iOS シミュレーターをインストールします。
  • Windows でチュートリアルを実行する場合、ガイドに従い Mac にペアリングします。
  • Visual Studio 2022 for Mac
  • Azure アカウント。
  • Azure CLI。
    • 開始する前に、az login でサインイン して適切なサブスクリプションを選択します。
  • (省略可能)Azure Developer CLI。
  • 次の設定を使用する Android 仮想デバイス:
    • 電話: 携帯電話の画像 - テストには Pixel 5 を使用します。
    • システム イメージ: Android 11 (Google API を使用した API 30)
  • XCode をインストールします。
    • 必須コンポーネントを追加できるように、インストール後に Xcode を開きます。
    • 開いたら、[XCode Preferences...](XCode の設定...)>[コンポーネント] を選択し、iOS シミュレーターをインストールします。

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

  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 App Serviceと Azure SQL Database を Azure にプロビジョニングします。
  • Visual Studio を使用して、新しく作成されたAzure App Serviceにサービス コードをデプロイします。

Azure Developer CLIを使用してすべての手順を完了する

TodoApp サンプルは、Azure Developer CLIをサポートするように構成されています。 すべての手順 (プロビジョニングとデプロイ) を完了するには:

  1. Azure Developer CLIをインストールします。
  2. ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。 このディレクトリには azure.yaml もあります。
  3. azd up を実行します。

Azure にまだサインインしていない場合は、ブラウザーが起動してサインインするように求められます。 その後、サブスクリプションと Azure リージョンを使用するように求められます。 その後、Azure Developer CLIは必要なリソースをプロビジョニングし、任意の Azure リージョンとサブスクリプションにサービス コードをデプロイします。 最後に、Azure Developer CLIによって適切なConstants.csファイルが書き込まれます。

コマンドを azd env get-values 実行すると、データベースに直接アクセスする必要がある SQL 認証情報を確認できます。

Azure Developer CLIで手順を完了した場合は、次の手順に進みます。 Azure Developer CLIを使用しない場合は、手動の手順に進みます。

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 App Serviceと Azure SQL Database を Azure にプロビジョニングします。
  • Visual Studio 2022 for Mac を使用して、新しく作成したAzure App Serviceにサービス コードをデプロイします。

Azure Developer CLIを使用してすべての手順を完了する

TodoApp サンプルは、Azure Developer CLIをサポートするように構成されています。 すべての手順 (プロビジョニングとデプロイ) を完了するには:

  1. Azure Developer CLIをインストールします。
  2. ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。 このディレクトリには azure.yaml もあります。
  3. azd up を実行します。

Azure にまだサインインしていない場合は、ブラウザーが起動してサインインするように求められます。 その後、サブスクリプションと Azure リージョンを使用するように求められます。 その後、Azure Developer CLIは必要なリソースをプロビジョニングし、任意の Azure リージョンとサブスクリプションにサービス コードをデプロイします。 最後に、Azure Developer CLIによって適切なConstants.csファイルが書き込まれます。

データベースに azd env get-values 直接アクセスする必要がある場合は、 コマンドを実行して SQL 認証情報を確認できます。

Azure Developer CLIで手順を完了した場合は、次の手順に進みます。 Azure Developer CLIを使用しない場合は、手動の手順に進みます。

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 を認識する必要があります。

サービスのプロビジョニングとデプロイに使用 azd up した場合は、ファイルが Constants.cs 自動的に作成され、この手順は省略できます。

  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 を認識する必要があります。

サービスのプロビジョニングとデプロイに使用 azd up した場合は、ファイルが Constants.cs 自動的に作成され、この手順は省略できます。

  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 キー)。

Android アプリのビルドと実行

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

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

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

    Xamarin Forms for 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 デバイス マネージャーをオープンし、選択したエミュレーターの横にある [開始] を押します。

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

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

  • ボックスにテキストを入力し、Enter キーを押して新しい項目を挿入します。
  • 項目を選択すると、[完了] フラグが設定またはクリアされます。
  • 更新アイコンを押して、サービスからデータをリロードします。

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

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

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

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

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

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

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

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

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

iOS アプリをビルドして実行するには

注意

ガイドに従って Mac にペアリングする必要があります。 ペアリングされた Mac を使用せずに iOS アプリケーションをコンパイルまたは実行すると、エラーが発生します。

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

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

  3. トップ バーで、iPhone シミュレーター構成と TodoApp.Forms.iOS ターゲットを選択します。

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

  4. iPhone シミュレーターを選択します

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

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

  • ボックスにテキストを入力し、Enter キーを押して新しい項目を挿入します。
  • 項目を選択すると、[完了] フラグが設定またはクリアされます。
  • 更新アイコンを押して、サービスからデータをリロードします。

To Do リストを示す実行中の i O S アプリのスクリーンショット。

トラブルシューティング

Visual Studio 2022 に付属するリモート シミュレーターは、XCode 13.3 と互換性がありません。 次のエラー メッセージが表示されます。

i O S シミュレーターを起動するときのエラー メッセージのスクリーンショット。

この問題の回避方法:

  • リモート シミュレーターを無効にします ([ツール] / [オプション] / [iOS の設定] / [リモート Simulator から Windows へ] をクリア)。 クリアすると、シミュレーターは Windows 上ではなく Mac 上で実行されます。 その後、Windows 上でデバッガーなどを使用しながら Mac 上でシミュレーターを直接操作できます。
  • 上記のようにリモート シミュレーターを無効にして、シミュレーターが Mac 上で実行されるようにします。 次に、リモート デスクトップ アプリを使用して、Windows から Mac デスクトップに接続します。 リモート デスクトップ オプションには、Devolutions Remote Desktop Manager (高速で無料バージョンが利用可能) と VNC クライアント (低速で無料) が含まれます。
  • シミュレーターの代わりに、物理デバイスを使用してテストします。 無料のプロビジョニング プロファイルを入手して、認証チュートリアルを完了できます。

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

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

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

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

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

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

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

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

トラブルシューティング

Visual Studio 2022 for Mac の一部のバージョンは、XCode の一部のバージョンでは動作しません。 シミュレーターでアプリを実行しているときに HE0042 エラーが発生した場合は、Visual Studio 2022 for Mac のバージョンを更新する必要がある可能性があります。 最新のプレビュー バージョンを使用し、使用可能なすべての更新プログラムが適用されていることを確認します。 アプリはシミュレーターにデプロイされます。 デバッガーを使用して実行しても問題が引き続き発生する場合は、代わりにシミュレーターからアプリを起動します。

次のステップ

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