Azure での Xamarin.Forms アプリの作成
概要
このチュートリアルでは、Azure App Service の Mobile Apps 機能をバックエンドとして使用して、Xamarin.Forms モバイル アプリにクラウドベースのバックエンド サービスを追加する方法を示します。 新しい Mobile Apps バックエンドと、アプリのデータを Azure に格納する簡単な To Do リスト Xamarin.Forms アプリの両方を作成します。
Xamarin.Forms の他のすべての Azure Mobile Apps のチュートリアルを行う前に、このチュートリアルを完了してください。
前提条件
このチュートリアルを完了するには、以下が必要です。
アクティブな Azure アカウントアカウントがない場合、Azure 試用版にサインアップして、最大 10 件の無料 Mobile Apps を入手できます。 このアプリは評価終了後も使用できます。 詳細については、Azure 無料試用版に関するページを参照してください。
Visual Studio 2017 以降または Visual Studio for Mac に含まれる Visual Studio Tools for Xamarin。 手順については、Xamarin のインストール ページを参照してください。
(省略可能) iOS アプリをビルドするには、Xcode 9.0 以降がインストールされた Mac が必要です。 Visual Studio for Mac を使用して iOS アプリを開発するか、Visual Studio 2017 以降を使用することができます (Mac がネットワーク上で使用可能な場合)。
新しい Mobile Apps バックエンドの作成
Azure portal にサインインします。
[リソースの作成] をクリックします。
検索ボックスで、「Web アプリ」と入力します。
結果一覧で、Marketplace から [Web アプリ] を選択します。
サブスクリプションとリソース グループを選択する (既存のリソース グループを選択する)、"または" 新しく作成します (アプリと同じ名前を使用します)。
Web アプリの一意の名前を選択します。
既定の [発行] オプションを [コード] として選択します。
[ランタイム スタック] で、ASP.NET または Node のバージョンを選択する必要があります。 .NET バックエンドを構築する場合は、ASP.NET のバージョンを選択します。 それ以外の場合で、Node ベースのアプリケーションをターゲットとする場合は、Node のいずれかのバージョンを選択します。
適切なオペレーティング システム (Linux または Windows) を選択します。
このアプリをデプロイするリージョンを選択します。
適切なApp Service プランを選択し、[レビューと作成] をクリックします。
[リソース グループ] で、既存のリソース グループを選択するか、"または"、新しく作成します (アプリと同じ名前を使用)。
Create をクリックしてください。 サービスが正常にデプロイされるまで数分待ってから次の手順に進んでください。 状態の更新をポータル ヘッダーの通知 (ベル) アイコンで確認します。
デプロイが完了したら、[デプロイの詳細] セクションをクリックし、[リソースの種類] として [Microsoft.Web/サイト] をクリックします。 これで、作成したばかりの App Service Web アプリに移動します。
[構成] ブレードで [設定] をクリックし、[アプリケーション設定] で [新しいアプリケーション設定] ボタンをクリックします。
[アプリケーション設定の追加/編集] ページで、[名前] として「MobileAppsManagement_EXTENSION_VERSION」を、[値] として「最新」を入力して [OK] をクリックします。
この新しく作成した App Service Web アプリをモバイル アプリとして使用するための設定がすべて行われました。
データベース接続を作成し、クライアントとサーバー プロジェクトを構成する
次のプラットフォームのためのクライアント SDK クイック スタートをダウンロードします。
iOS (Objective-C)
iOS (Swift)
Android (Java)
Xamarin.iOS
Xamarin.Android
Xamarin.Forms
Cordova
Windows (C#)Note
iOS プロジェクトを使用する場合は、 最新の GitHub リリースから "azuresdk-iOS-*.zip" をダウンロードする必要があります。
MicrosoftAzureMobile.frameworkファイルを解凍して、プロジェクトのルートに追加します。データベース接続を追加するか、または既存の接続に接続する必要があります。 まず、データ ストアを作成するか、または既存のデータ ストアを使用するかを決定します。
新しいデータ ストアを作成する: データ ストアを作成する場合は、次のクイック スタートを使用します。
既存のデータ ソース: 既存のデータベース接続を使用する場合は、次の手順に従います
SQL Database の接続文字列の形式 -
Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}{your_SQLServer} サーバーの名前。これは、データベースの概要ページで見つけることができ、通常は "server_name.database.windows.net" の形式になっています。 {ポート} 通常は 1433 です。 {your_catalogue} データベースの名前。 {your_username} データベースにアクセスするユーザー名。 {your_password} データベースにアクセスするためのパスワード。
SQL 接続文字列の形式の詳細を確認してください。
モバイル アプリに接続文字列を追加します。App Service では、メニューの [構成] オプションを使用して、アプリケーションの接続文字列を管理できます。
接続文字列を追加するには:
[アプリケーションの設定] タブをクリックします。
[[+] New connection string] ([+] 新しい接続文字列) をクリックします。
接続文字列の [名前]、[値]、および [種類] を指定する必要があります。
[名前] を「
MS_TableConnectionString」と入力します。[値] は、前の手順で作成した接続文字列にしてください。
SQL Azure データベースに接続文字列を追加している場合は、[種類] の下の [SQLAzure] を選択します。
Azure Mobile Apps には、.NET バックエンド用と Node.js バックエンド用の SDK があります。
バックエンドのNode.js
Node.js クイックスタート アプリを使用する場合は、以下の手順に従ってください。
Azure portal で、[Easy Tables] に移動します。次の画面が表示されます。
[ 構成 ] タブに SQL 接続文字列が既に追加されていることを確認します。次に、 すべてのサイト コンテンツが上書きされることを確認 するチェック ボックスをオンにし、[ TodoItem テーブルの作成 ] ボタンをクリックします。
[Easy Tables] で、[+ 追加] をクリックします。
匿名アクセス権で
TodoItemテーブルを作成します。
.NET バックエンド
.NET クイックスタート アプリを使用する場合は、次の手順に従います。
azure-mobile-apps-quickstarts リポジトリから Azure Mobile Apps .NET サーバー プロジェクトをダウンロードします。
Visual Studio でローカルに .NET サーバー プロジェクトをビルドします。
Visual Studio でソリューション エクスプローラーを開き、
ZUMOAPPNAMEServiceプロジェクトを右クリックして、[発行] をクリックすると、Publish to App Serviceウィンドウが表示されます。 Mac で作業している場合は、こちらから、アプリをデプロイする他の方法を確認してください。
発行先として [App Service] を選択し、[既存のものを選択] をクリックし、次にウィンドウ下部にある [発行] をクリックします。
最初に、Azure サブスクリプションを使用して Visual Studio にログインする必要があります。
Subscription、Resource Groupを選択し、次にアプリの名前を選択します。 準備ができたら [OK] をクリックします。これにより、ローカル環境にある .NET サーバー プロジェクトが App Service バックエンドにデプロイされます。 デプロイが完了すると、ブラウザーでhttp://{zumoappname}.azurewebsites.net/にリダイレクトされます。
Xamarin.Forms ソリューションを実行する
ソリューションを開くには Visual Studio Tools for Xamarin が必要です。Xamarin のインストール手順を参照してください。 ツールが既にインストールされている場合は、以下の手順に従ってソリューションをダウンロードし、開きます。
Visual Studio (Windows と Mac)
Azure portal に移動し、作成したモバイル アプリに移動します。
Overviewブレードで、モバイル アプリのパブリック エンドポイントである URL を探します。 例 - アプリ名 "test123" のサイト名は https://test123.azurewebsites.net になります。このフォルダー内のファイル
Constants.cs(xamarin.forms/ZUMOAPPNAME) を開きます。 アプリケーション名はZUMOAPPNAMEです。Constants.csクラスで、ZUMOAPPURL変数を上のパブリック エンドポイントに置き換えます。public static string ApplicationURL = @"ZUMOAPPURL";→
public static string ApplicationURL = @"https://test123.azurewebsites.net";Android または Windows のプロジェクトを実行するには、以下の手順に従います。また、ネットワーク接続された Mac コンピューターが使用可能な場合は、iOS プロジェクトを実行できます。
(省略可能) Android プロジェクトの実行
このセクションでは、Xamarin.Android プロジェクトを実行します。 Android デバイスを使用していない場合は、このセクションを省略できます。
Visual Studio
Android (Droid) プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。
[ビルド] メニューの [構成マネージャー] を選択します。
[構成マネージャー] ダイアログ ボックスで、Android プロジェクトの横の [ビルド] と [デプロイ] チェック ボックスをオンにし、共有コード プロジェクトの [ビルド] ボックスがオンになっていることを確認します。
プロジェクトをビルドし、Android エミュレーターでアプリを起動するには、F5 キーを押すか、 [開始] をクリックします。
Visual Studio for Mac
Android プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。
プロジェクトをビルドして、アプリを Android エミュレーターで起動するには、 [実行] メニューを選択してから [デバッグの開始] を選択します。
アプリで、意味のあるテキスト ("Xamarin の学習" など) を入力し、正符号 ( + ) を選択します。
この操作で、Azure でホストされている新しい Mobile Apps バックエンドに POST 要求が送信されます。 要求のデータは TodoItem テーブルに挿入されます。 テーブルに格納された項目が Mobile Apps バックエンドによって返され、データが一覧に表示されます。
Note
Mobile Apps バックエンドにアクセスするコードは、ソリューションの共有コード プロジェクトの TodoItemManager.cs C# ファイルにあります。
(省略可能) iOS プロジェクトの実行
このセクションでは、iOS デバイス用の Xamarin.iOS プロジェクトを実行します。 iOS デバイスを使用していない場合は、このセクションを省略できます。
Visual Studio
iOS プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。
[ビルド] メニューの [構成マネージャー] を選択します。
[構成マネージャー] ダイアログ ボックスで、iOS プロジェクトの横の [ビルド] と [デプロイ] チェック ボックスをオンにし、共有コード プロジェクトの [ビルド] ボックスがオンになっていることを確認します。
プロジェクトをビルドし、iPhone エミュレーターでアプリを起動するには、F5 キーを押します。
Visual Studio for Mac
iOS プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。
[実行] メニューで [デバッグの開始] を選択し、プロジェクトをビルドして、アプリを iPhone エミュレーターで起動します。
アプリで、意味のあるテキスト ("Xamarin の学習" など) を入力し、正符号 ( + ) を選択します。
この操作で、Azure でホストされている新しい Mobile Apps バックエンドに POST 要求が送信されます。 要求のデータは TodoItem テーブルに挿入されます。 テーブルに格納された項目が Mobile Apps バックエンドによって返され、データが一覧に表示されます。
Note
Mobile Apps バックエンドにアクセスするコードは、ソリューションの共有コード プロジェクトの TodoItemManager.cs C# ファイルにあります。
(省略可能) Windows プロジェクトの実行
このセクションでは、Windows デバイス用の Xamarin.Forms Universal Windows Platform (UWP) プロジェクトを実行します。 Windows デバイスを使用していない場合は、このセクションを省略できます。
Visual Studio
UWP プロジェクトを右クリックし、 [スタートアップ プロジェクトに設定] を選択します。
[ビルド] メニューの [構成マネージャー] を選択します。
[構成マネージャー] ダイアログ ボックスで、選択した Windows プロジェクトの横の [ビルド] と [デプロイ] チェック ボックスをオンにし、共有コード プロジェクトの [ビルド] ボックスがオンになっていることを確認します。
プロジェクトをビルドし、Windows エミュレーターでアプリを起動するには、F5 キーを押すか、 [開始] をクリックします (「ローカル コンピューター」と表示されています)。
Note
macOS で Windows プロジェクトを実行することはできません。
アプリで、意味のあるテキスト ("Xamarin の学習" など) を入力し、正符号 ( + ) を選択します。
この操作で、Azure でホストされている新しい Mobile Apps バックエンドに POST 要求が送信されます。 要求のデータは TodoItem テーブルに挿入されます。 テーブルに格納された項目が Mobile Apps バックエンドによって返され、データが一覧に表示されます。
Note
ソリューションのポータブル クラス ライブラリ プロジェクトの TodoItemManager.cs C# ファイルに、Mobile Apps バックエンドにアクセスするコードが表示されます。
トラブルシューティング
ソリューションのビルドで問題が発生した場合は、NuGet パッケージ マネージャーを実行し、最新バージョンの Xamarin.Forms に更新します。また、Android プロジェクトで Xamarin.Android サポート パッケージを更新します。 クイック スタート プロジェクトには、必ずしも最新バージョンが含まれていません。
Android プロジェクトで参照されるすべてのサポート パッケージのバージョンが同じである必要があることに注意してください。 Azure Mobile Apps の NuGet パッケージには、Android プラットフォームに関して Xamarin.Android.Support.CustomTabs の依存関係があるため、プロジェクトで新しいサポート パッケージを使用する場合は、必要なバージョンを使用してこのパッケージを直接インストールし、競合を回避する必要があります。