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

[アーティクル]
01/19/2024

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

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

前提条件

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

Visual Studio 2022 と次のワークロード。
- ASP.NET および Web の開発
- Azure の開発
- .NET によるモバイル開発
Azure アカウント。
Azure CLI。
- 開始する前に、az login でサインインして適切なサブスクリプションを選択します。
(オプション) Azure Developer CLI。
使用可能な Mac。
- XCode をインストールします。
- 必須コンポーネントを追加できるように、インストール後に Xcode を開きます。
- 開いたら、[XCode Preferences...]\(XCode の設定...\)>[コンポーネント] を選択し、iOS シミュレーターをインストールします。
- ガイドに従って Mac にペアリングします。

iOS バージョンをコンパイルするには Mac が必要です。

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

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

必要に応じて、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 をサポートするように構成されています。すげての手順 (プロビジョニングとデプロイ) を完了するには、次の操作を実行します。

Azure Developer CLI をインストールします。
ターミナルを開いて、ディレクトリを TodoApp.sln ファイルのあるフォルダーに変更します。このディレクトリには azure.yaml もあります。
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 でリソースを作成します。

ターミナルを開いて、ディレクトリを 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 を追加します。

サンプルアプリの構成

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

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

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

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

ソリューションエクスプローラーで、xamarin-native フォルダーを展開します。
TodoApp.iOS プロジェクトを右クリックし、[スタートアッププロジェクトに設定] を選択します。
トップバーで、iPhone シミュレーター 設定と TodoApp.iOS ターゲットを選択します。
適切な iPhoneシミュレータを選択します (iOS 15.5 を実行している iPhone SE を選択しました)。
F5 キーを押し、プロジェクトをビルドして実行します。

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

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

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 クライアント (低速で無料) が含まれます。
シミュレーターの代わりに、物理デバイスを使用してテストします。無料のプロビジョニングプロファイルを入手して、認証チュートリアルを完了できます。

次のステップ

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

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

前提条件

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