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 にペアリングします。

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

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

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

    Screenshot of the Code menu on GitHub.

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

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

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

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

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

Screenshot of the file explorer for the solution.

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

Note

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

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

  • 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
    

    出力例を次に示します。

    Screenshot of command line results.

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

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

Visual Studio で TodoApp.sln を開きます

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

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

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

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

    Screenshot of the target selection window.

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

    Screenshot of the specific target selection window.

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

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

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

    Screenshot of the app service selection window.

  9. [完了] を選びます。

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

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

    Screenshot showing the S Q L server configuration selection.

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

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

    Screenshot of the database selection window.

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

    Screenshot of the database settings window.

  15. [完了] を選びます。

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

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

    Screenshot showing the publish button.

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

    Screenshot showing the browser output after the service is published.

サンプル アプリの構成

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

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

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

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

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

    Screenshot of adding the Constants.cs file to the project.

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

Android アプリのビルドと実行

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

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

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

    Screenshot showing how to set the run configuration for a Xamarin Forms for Android app.

  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 キーを押して新しい項目を挿入します。
  • 項目を選択すると、[完了] フラグが設定またはクリアされます。
  • 更新アイコンを押して、サービスからデータをリロードします。

Screenshot of the running Android app.

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

Note

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

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

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

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

    Screenshot showing how to set the run configuration for a Xamarin Forms for i O S app.

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

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

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

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

Screenshot of the running i O S app showing the to do list.

トラブルシューティング

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

Screenshot of the error message when launching the i O S simulator.

この問題の回避方法:

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

次のステップ

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