Apache Cordova アプリの作成Create an Apache Cordova app

OverviewOverview

このチュートリアルでは、Azure モバイル アプリ バックエンドを使用してクラウドベースのバックエンド サービスを Apache Cordova モバイル アプリに追加する方法を説明します。This tutorial shows you how to add a cloud-based backend service to an Apache Cordova mobile app by using an Azure mobile app backend. 新しいモバイル アプリ バックエンドと、アプリのデータを Azure に格納する簡単な Todo リスト Apache Cordova アプリを作成します。You create both a new mobile app backend and a simple Todo list Apache Cordova app that stores app data in Azure.

このチュートリアルは、Azure App Service での Mobile Apps 機能の使用に関する他のすべての Apache Cordova チュートリアルを実行する前に完了しておく必要があります。Completing this tutorial is a prerequisite for all other Apache Cordova tutorials about using the Mobile Apps feature in Azure App Service.

前提条件Prerequisites

このチュートリアルを完了するには、次の前提条件を用意しておく必要があります。To complete this tutorial, you need the following prerequisites:

Visual Studio をバイパスし、Apache Cordova のコマンド ラインを直接使用することもできます。You may also bypass Visual Studio and use the Apache Cordova command line directly. コマンド ラインは、Mac コンピューターでチュートリアルを完了するときに便利です。Using the command line is useful when completing the tutorial on a Mac computer. コマンドラインを使用する Apache Cordova クライアント アプリケーションのコンパイルは、このチュートリアルでは説明しません。Compiling Apache Cordova client applications using the command line is not covered by this tutorial.

Azure モバイル アプリ バックエンドの作成Create an Azure mobile app backend

  1. Azure ポータルにサインインします。Sign in to the [Azure portal].

  2. [新規]をクリックします。Click New.

  3. 検索ボックスに、「Mobile Apps」と入力します。In the search box, type Mobile Apps.

    Mobile Apps のクイックスタートが強調表示された Azure Portal

  4. 結果リストで [Mobile Apps クイックスタート] を選択し、[作成] を選択します。In the results list, select Mobile Apps Quickstart, and then select Create.

  5. [リソース グループ] で、既存のリソース グループを選択するか、新しく作成します (アプリと同じ名前を使用)。Under Resource Group, select an existing resource group or create a new one (using the same name as your app).

  6. Create をクリックしてください。Click Create. サービスが正常にデプロイされるまで数分待ってから次の手順に進んでください。Wait a few minutes for the service to be deployed successfully before proceeding.

同様の手順を説明するビデオを見るWatch a video showing similar steps

サーバー プロジェクトの構成Configure the server project

  1. [App Services] ボタンをクリックして Mobile Apps バックエンドを選択し、[クイック スタート] を選択して目的のクライアント プラットフォーム (iOS、Android、Xamarin、Cordova) を選択します。Click the App Services button, select your Mobile Apps back end, select Quickstart, and then select your client platform (iOS, Android, Xamarin, Cordova).

    Mobile Apps のクイックスタートが強調表示された Azure Portal

  2. データベース接続が構成されていない場合は、次の手順で作成します。If a database connection is not configured, create one by doing the following:

    Azure Portal (Mobile Apps をデータベースに接続)

    a.a. 新しい SQL データベースとサーバーを作成します。Create a new SQL database and server.

    Azure Portal (Mobile Apps の新しいデータベースとサーバーを作成)

    b.b. データ接続が正常に作成されるまで待ちます。Wait until the data connection is successfully created.

    データ接続が正常に作成されたことを示す Azure Portal の通知

    c.c. データ接続の作成に成功しました。Data connection must be successful.

    Azure Portal の通知 ("データ接続が既に存在します")

  3. [2. テーブル API の作成] で、[バックエンド言語] として Node.js を選択します。Under 2. Create a table API, select Node.js for Backend language.

  4. 確認要求をそのまま受け入れ、[TodoItem テーブルを作成する] を選択します。Accept the acknowledgment, and then select Create TodoItem table.
    この操作で新しい TodoItem テーブルがデータベースに作成されます。This action creates a new to-do item table in your database.

    重要

    既存のバックエンドを Node.js に切り替えると、すべてのコンテンツが上書きされます。Switching an existing back end to Node.js overwrites all contents. .NET バックエンドを作成するには、Mobile Apps 用 .NET バックエンド サーバー SDK の操作に関するページを参照してください。To create a .NET back end instead, see Work with the .NET back-end server SDK for Mobile Apps.

Apache Cordova アプリのダウンロードと実行Download and run the Apache Cordova app

  1. Azure Portal にアクセスします。Visit the Azure portal.
  2. [App Services] をクリックし、作成したバックエンドをクリックします。Click App Services > the backend that you created.
  3. モバイル アプリの設定で、[クイックスタート] > [Cordova] の順にクリックします。In the mobile app settings, click Quickstart > Cordova. Mobile Apps のクイックスタートが強調表示された Azure PortalAzure Portal with Mobile Apps Quickstart highlighted
  4. [クライアント アプリケーションを構成][新しいアプリの作成] を選択してから、[ダウンロード] をクリックします。Under Configure your client application, select Create a New App, then click Download.
  5. ハード ドライブのディレクトリにダウンロードした ZIP ファイルを展開します。ソリューション ファイル (.sln) に移動し、Visual Studio を使ってファイルを開きます。Unpack the downloaded ZIP file to a directory on your hard drive, navigate to the solution file (.sln) and open it using Visual Studio.
  6. Visual Studio で、開始用の矢印の横にあるドロップダウン リストからソリューション プラットフォーム (Android、iOS、または Windows) を選択します。In Visual Studio, choose the solution platform (Android, iOS, or Windows) from the drop-down next to the start arrow. 緑色の矢印のドロップダウン リストをクリックして、特定のデプロイ デバイスまたはエミュレーターを選択します。Select a specific deployment device or emulator by clicking the drop-down on the green arrow. 既定の Android プラットフォームと Ripple エミュレーターを使用できます。You can use the default Android platform and Ripple emulator. 高度なチュートリアル (プッシュ通知など) では、サポートされているデバイスまたはエミュレーターを選択する必要があります。More advanced tutorials (for example, push notifications) require you to select a supported device or emulator.
  7. F5 キーを押すか、緑色の矢印をクリックして、Cordova アプリをビルドして実行します。To build and run your Cordova app, press F5 or click the green arrow. ネットワークへのアクセスを要求するエミュレーターのセキュリティ ダイアログが表示された場合は、承認します。If you see a security dialog in the emulator requesting access to the network, accept it.
  8. デバイスまたはエミュレーターでアプリが起動したら、[Enter new text (新しいテキストを入力)] に意味のあるテキスト (「"チュートリアルの完了"」など) を入力し、[追加] をクリックします。After the app is started on the device or emulator, type meaningful text in Enter new text, such as Complete the tutorial and then click the Add button.

バックエンドは要求から取得したデータを SQL Database の TodoItem テーブルに挿入し、新しく格納されたアイテムに関する情報をモバイル アプリに返します。The backend inserts data from the request into the TodoItem table in the SQL Database, and returns information about the newly stored items back to the mobile app. モバイル アプリでは、このデータが一覧に表示されます。The mobile app displays this data in the list.

他のプラットフォームを追加する際は、手順 3. ~ 5. を繰り返します。You can repeat steps 3 through 5 for other platforms.

次のステップNext Steps

これでこのクイック スタート チュートリアルは終了です。次のいずれかのチュートリアルに進んでください。Now that you completed this quick start tutorial, move on to one of the following tutorials:

Azure App Service の主要な概念を確認してください。Learn more about key concepts with Azure App Service.

SDK の使用方法を確認してください。Learn how to use the SDKs.