iOS アプリの作成

概要

このチュートリアルでは、Azure App Service Mobile Apps (クラウドのバックエンド サービス) を iOS アプリに追加する方法について説明します。 最初の手順で、Azure 上に新しいモバイル バックエンドを作成します。 次に、Azure にデータを保存する単純な "Todo リスト" iOS サンプル アプリをダウンロードします。

このチュートリアルを完了するには、Mac と Azure アカウント が必要です。

新しい Azure モバイル アプリ バックエンドを作成する

  1. Azure portal にサインインする

  2. [リソースの作成] をクリックします。

  3. 検索ボックスで、「Web アプリ」と入力します。

  4. 結果一覧で、Marketplace から [Web アプリ] を選択します。

  5. サブスクリプションリソース グループを選択する (既存のリソース グループを選択する)、"または" 新しく作成します (アプリと同じ名前を使用します)。

  6. Web アプリの一意の名前を選択します。

  7. 既定の [発行] オプションを [コード] として選択します。

  8. [ランタイム スタック] で、ASP.NET または Node のバージョンを選択する必要があります。 .NET バックエンドを構築する場合は、ASP.NET のバージョンを選択します。 それ以外の場合で、Node ベースのアプリケーションをターゲットとする場合は、Node のいずれかのバージョンを選択します。

  9. 適切なオペレーティング システム (Linux または Windows) を選択します。

  10. このアプリをデプロイするリージョンを選択します。

  11. 適切なApp Service プランを選択し、 [レビューと作成] をクリックします。

  12. [リソース グループ] で、既存のリソース グループを選択するか、"または"、新しく作成します (アプリと同じ名前を使用)。

  13. Create をクリックしてください。 サービスが正常にデプロイされるまで数分待ってから次の手順に進んでください。 状態の更新をポータル ヘッダーの通知 (ベル) アイコンで確認します。

  14. デプロイが完了したら、 [デプロイの詳細] セクションをクリックし、[リソースの種類] として [Microsoft.Web/サイト] をクリックします。 これで、作成したばかりの App Service Web アプリに移動します。

  15. [構成] ブレードで [設定] をクリックし、 [アプリケーション設定][新しいアプリケーション設定] ボタンをクリックします。

  16. [アプリケーション設定の追加/編集] ページで、 [名前] として「MobileAppsManagement_EXTENSION_VERSION」を、[値] として「最新」を入力して [OK] をクリックします。

この新しく作成した App Service Web アプリをモバイル アプリとして使用するための設定がすべて行われました。

データベース接続を作成し、クライアントとサーバー プロジェクトを構成する

  1. 次のプラットフォームのためのクライアント SDK クイック スタートをダウンロードします。

    iOS (Objective-C)
    iOS (Swift)
    Android (Java)
    Xamarin.iOS
    Xamarin.Android
    Xamarin.Forms
    Cordova
    Windows (C#)

    注意

    iOS プロジェクトを使用する場合は、GitHub の最新リリースから "azuresdk-iOS-*.zip" をダウンロードする必要があります。 MicrosoftAzureMobile.framework ファイルを解凍して、プロジェクトのルートに追加します。

  2. データベース接続を追加するか、または既存の接続に接続する必要があります。 まず、データ ストアを作成するか、または既存のデータ ストアを使用するかを決定します。

    • 新しいデータ ストアを作成する:データ ストアを作成する場合は、次のクイック スタートを使用します。

      クイック スタート: Azure SQL Database の単一データベースの概要

    • 既存のデータ ソース:既存のデータベース接続を使用する場合は、次の手順に従います。

      1. 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 接続文字列の形式の詳細を確認してください。

      2. モバイル アプリに接続文字列を追加します。App Service では、メニューの [構成] オプションを使用して、アプリケーションの接続文字列を管理できます。

        接続文字列を追加するには:

        1. [アプリケーションの設定] タブをクリックします。

        2. [[+] New connection string] ([+] 新しい接続文字列) をクリックします。

        3. 接続文字列の [名前][値] 、および [種類] を指定する必要があります。

        4. [名前] を「MS_TableConnectionString」と入力します。

        5. [値] は、前の手順で作成した接続文字列にしてください。

        6. SQL Azure データベースに接続文字列を追加している場合は、 [種類] の下の [SQLAzure] を選択します。

  3. Azure Mobile Apps には、.NET バックエンド用と Node.js バックエンド用の SDK があります。

    • Node.JS バックエンド

      Node.js クイックスタート アプリを使用する場合は、以下の手順に従ってください。

      1. Azure portal で、 [Easy Tables] に移動します。次の画面が表示されます。

        Node Easy Tables

      2. SQL 接続文字列が [構成] タブに既に追加されていることを確認します。次に、 [これにより、すべてのサイト コンテンツが上書きされることを確認しました] のボックスをオンにし、 [TodoItem テーブルを作成する] をクリックします。

        Node Easy Tables の構成

      3. [Easy Tables] で、 [+ 追加] をクリックします。

        Node Easy Tables の追加ボタン

      4. 匿名アクセス権で TodoItem テーブルを作成します。

        Node Easy Tables のテーブルの追加

    • .NET バックエンド

      .NET クイックスタート アプリを使用する場合は、次の手順に従います。

      1. azure-mobile-apps-quickstarts リポジトリから Azure Mobile Apps .NET サーバー プロジェクトをダウンロードします。

      2. Visual Studio でローカルに .NET サーバー プロジェクトをビルドします。

      3. Visual Studio でソリューション エクスプローラーを開き、ZUMOAPPNAMEService プロジェクトを右クリックして、 [発行] をクリックすると、Publish to App Service ウィンドウが表示されます。 Mac で作業している場合は、こちらから、アプリをデプロイする他の方法を確認してください。

        Visual Studio の発行

      4. 発行先として [App Service] を選択し、 [既存のものを選択] をクリックし、次にウィンドウ下部にある [発行] をクリックします。

      5. 最初に、Azure サブスクリプションを使用して Visual Studio にログインする必要があります。 SubscriptionResource Group を選択し、次にアプリの名前を選択します。 準備ができたら [OK] をクリックします。これにより、ローカル環境にある .NET サーバー プロジェクトが App Service バックエンドにデプロイされます。 デプロイが完了すると、ブラウザーで http://{zumoappname}.azurewebsites.net/ にリダイレクトされます。

iOS アプリを実行する

  1. Xcode を使用して、ダウンロードしたクライアント プロジェクトを開きます。

  2. Azure portal に移動し、作成したモバイル アプリに移動します。 Overview ブレードで、モバイル アプリのパブリック エンドポイントである URL を探します。 例 - アプリ名 "test123" のサイト名は https://test123.azurewebsites.net になります。

  3. Swift プロジェクトの場合は、ZUMOAPPNAME/ZUMOAPPNAME/ToDoTableViewController.swift フォルダーの ToDoTableViewController.swift ファイルを開きます。 アプリケーション名は ZUMOAPPNAME です。

  4. viewDidLoad() メソッドで、ZUMOAPPURL パラメーターを上のパブリック エンドポイントに置き換えます。

    let client = MSClient(applicationURLString: "ZUMOAPPURL")

    let client = MSClient(applicationURLString: "https://test123.azurewebsites.net")

  5. Objective-C プロジェクトの場合は、ZUMOAPPNAME/ZUMOAPPNAME フォルダーの QSTodoService.m ファイルを開きます。 アプリケーション名は ZUMOAPPNAME です。

  6. init メソッドで、ZUMOAPPURL パラメーターを上のパブリック エンドポイントに置き換えます。

    self.client = [MSClient clientWithApplicationURLString:@"ZUMOAPPURL"];

    self.client = [MSClient clientWithApplicationURLString:@"https://test123.azurewebsites.net"];

  7. [Run] をクリックしてプロジェクトをビルドし、iOS シミュレーターでアプリを起動します。

  8. アプリケーションでプラス アイコン ( + ) をクリックし、意味のあるテキスト (たとえば、「チュートリアルの完了」) を入力し、保存ボタンをクリックします。 これにより、事前にデプロイした Azure バックエンドに POST 要求が送信されます。 バックエンドは要求から取得したデータを TodoItem SQL テーブルに挿入し、新しく格納されたアイテムに関する情報をモバイル アプリに返します。 モバイル アプリでは、このデータが一覧に表示されます。

    iOS で実行されているクイック スタート アプリ