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

注意

Visual Studio App Center は、モバイル アプリ開発の中心となるエンドツーエンドの統合サービスをサポートしています。Visual Studio App Center supports end to end and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud.

モバイル アプリケーションにクラウド サービスを統合することを検討している場合は、今すぐ App Center にサインアップしてください。If you are looking to integrate cloud services in your mobile application, sign up with App Center today.

概要Overview

このチュートリアルでは、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 Portal にサインインします。Sign in to the Azure portal.

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

  3. 検索ボックスで、「Web アプリ」と入力します。In the search box, type Web App.

  4. 結果一覧で、Marketplace から [Web アプリ] を選択します。In the results list, select Web App from the Marketplace.

  5. サブスクリプションリソース グループを選択する (既存のリソース グループを選択する)、"または" 新しく作成します (アプリと同じ名前を使用します)。Select your Subscription and Resource Group (select an existing resource group or create a new one (using the same name as your app)).

  6. Web アプリの一意の名前を選択します。Choose a unique Name of your web app.

  7. 既定の [発行] オプションを [コード] として選択します。Choose the default Publish option as Code.

  8. [ランタイム スタック] で、ASP.NET または Node のバージョンを選択する必要があります。In the Runtime stack, you need to select a version under ASP.NET or Node. .NET バックエンドを構築する場合は、ASP.NET のバージョンを選択します。If you are building a .NET backend, select a version under ASP.NET. それ以外の場合で、Node ベースのアプリケーションをターゲットとする場合は、Node のいずれかのバージョンを選択します。Otherwise if you are targeting a Node based application, select one of the version from Node.

  9. 適切なオペレーティング システム (Linux または Windows) を選択します。Select the right Operating System, either Linux or Windows.

  10. このアプリをデプロイするリージョンを選択します。Select the Region where you would like this app to be deployed.

  11. 適切なApp Service プランを選択し、 [レビューと作成] をクリックします。Select the appropriate App Service Plan and hit Review and create.

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

  13. Create をクリックしてください。Click Create. サービスが正常にデプロイされるまで数分待ってから次の手順に進んでください。Wait a few minutes for the service to be deployed successfully before proceeding. 状態の更新をポータル ヘッダーの通知 (ベル) アイコンで確認します。Watch the Notifications (bell) icon in the portal header for status updates.

  14. デプロイが完了したら、 [デプロイの詳細] セクションをクリックし、[リソースの種類] として [Microsoft.Web/サイト] をクリックします。Once the deployment is completed, click on the Deployment details section and then click on the Resource of Type Microsoft.Web/sites. これで、作成したばかりの App Service Web アプリに移動します。It will navigate you to the App Service Web App that you just created.

  15. [構成] ブレードで [設定] をクリックし、 [アプリケーション設定][新しいアプリケーション設定] ボタンをクリックします。Click on the Configuration blade under Settings and in the Application settings, click on the New application setting button.

  16. [アプリケーション設定の追加/編集] ページで、 [名前] として「MobileAppsManagement_EXTENSION_VERSION」を、[値] として「最新」を入力して [OK] をクリックします。In the Add/Edit application setting page, enter Name as MobileAppsManagement_EXTENSION_VERSION and Value as latest and hit OK.

この新しく作成した App Service Web アプリをモバイル アプリとして使用するための設定がすべて行われました。You are all set to use this newly created App Service Web app as a Mobile app.

データベース接続を作成し、クライアントとサーバー プロジェクトを構成するCreate a database connection and configure the client and server project

  1. 次のプラットフォームのためのクライアント SDK クイック スタートをダウンロードします。Download the client SDK quickstarts for the following platforms:

    iOS (Objective-C)iOS (Objective-C)
    iOS (Swift)iOS (Swift)
    Android (Java)Android (Java)
    Xamarin.iOSXamarin.iOS
    Xamarin.AndroidXamarin.Android
    Xamarin.FormsXamarin.Forms
    CordovaCordova
    Windows (C#)Windows (C#)

    注意

    iOS プロジェクトを使用する場合は、GitHub の最新リリースから "azuresdk-iOS-*.zip" をダウンロードする必要があります。If you use the iOS project you need to download "azuresdk-iOS-*.zip" from latest GitHub release. MicrosoftAzureMobile.framework ファイルを解凍して、プロジェクトのルートに追加します。Unzip and add the MicrosoftAzureMobile.framework file to the project's root.

  2. データベース接続を追加するか、または既存の接続に接続する必要があります。You will have to add a database connection or connect to an existing connection. まず、データ ストアを作成するか、または既存のデータ ストアを使用するかを決定します。First, determine whether you’ll create a data store or use an existing one.

    • 新しいデータ ストアを作成する:データ ストアを作成する場合は、次のクイック スタートを使用します。Create a new data store: If you’re going to create a data store, use the following quickstart:

      クイック スタート:Azure SQL Database の単一データベースの概要Quickstart: Getting started with single databases in Azure SQL Database

    • 既存のデータ ソース:既存のデータベース接続を使用する場合は、次の手順に従います。Existing data source: Follow the instructions below if you want to use an existing database connection

      1. SQL Database の接続文字列の形式 - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}SQL Database Connection String format - Data Source=tcp:{your_SQLServer},{port};Initial Catalog={your_catalogue};User ID={your_username};Password={your_password}

        {your_SQLServer} サーバーの名前。これは、データベースの概要ページで見つけることができ、通常は "server_name.database.windows.net" の形式になっています。{your_SQLServer} Name of the server, this can be found in the overview page for your database and is usually in the form of “server_name.database.windows.net”. {ポート} 通常は 1433 です。{port} usually 1433. {your_catalogue} データベースの名前。{your_catalogue} Name of the database. {your_username} データベースにアクセスするユーザー名。{your_username} User name to access your database. {your_password} データベースにアクセスするためのパスワード。{your_password} Password to access your database.

        SQL 接続文字列の形式の詳細を確認してください。Learn more about SQL Connection String format

      2. モバイル アプリに接続文字列を追加します。App Service では、メニューの [構成] オプションを使用して、アプリケーションの接続文字列を管理できます。Add the connection string to your mobile app In App Service, you can manage connection strings for your application by using the Configuration option in the menu.

        接続文字列を追加するには:To add a connection string:

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

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

        3. 接続文字列の [名前][値] 、および [種類] を指定する必要があります。You will need to provide Name, Value and Type for your connection string.

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

        5. [値] は、前の手順で作成した接続文字列にしてください。Value should be the connecting string you formed in the step before.

        6. SQL Azure データベースに接続文字列を追加している場合は、 [種類] の下の [SQLAzure] を選択します。If you are adding a connection string to a SQL Azure database choose SQLAzure under type.

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

    • Node.JS バックエンドNode.js backend

      Node.js クイックスタート アプリを使用する場合は、以下の手順に従ってください。If you’re going to use Node.js quickstart app, follow the instructions below.

      1. Azure portal で、 [Easy Tables] に移動します。次の画面が表示されます。In the Azure portal, go to Easy Tables, you will see this screen.

        Node Easy Tables

      2. SQL 接続文字列が [構成] タブに既に追加されていることを確認します。次に、 [これにより、すべてのサイト コンテンツが上書きされることを確認しました] のボックスをオンにし、 [TodoItem テーブルを作成する] をクリックします。Make sure the SQL connection string is already added in the Configuration tab. Then check the box of I acknowledge that this will overwrite all site contents and click the Create TodoItem table button.

        Node Easy Tables の構成

      3. [Easy Tables] で、 [+ 追加] をクリックします。In Easy Tables, click the + Add button.

        Node Easy Tables の追加ボタン

      4. 匿名アクセス権で TodoItem テーブルを作成します。Create a TodoItem table with anonymous access.

        Node Easy Tables のテーブルの追加

    • .NET バックエンド.NET backend

      .NET クイックスタート アプリを使用する場合は、次の手順に従います。If you’re going to use .NET quickstart app, follow the instructions below.

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

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

      3. Visual Studio でソリューション エクスプローラーを開き、ZUMOAPPNAMEService プロジェクトを右クリックして、 [発行] をクリックすると、Publish to App Service ウィンドウが表示されます。In Visual Studio, open Solution Explorer, right-click on ZUMOAPPNAMEService project, click Publish, you will see a Publish to App Service window. Mac で作業している場合は、こちらから、アプリをデプロイする他の方法を確認してください。If you are working on Mac, check out other ways to deploy the app here.

        Visual Studio の発行

      4. 発行先として [App Service] を選択し、 [既存のものを選択] をクリックし、次にウィンドウ下部にある [発行] をクリックします。Select App Service as publish target, then click Select Existing, then click the Publish button at the bottom of the window.

      5. 最初に、Azure サブスクリプションを使用して Visual Studio にログインする必要があります。You will need to log into Visual Studio with your Azure subscription first. SubscriptionResource Group を選択し、次にアプリの名前を選択します。Select the Subscription, Resource Group, and then select the name of your app. 準備ができたら [OK] をクリックします。これにより、ローカル環境にある .NET サーバー プロジェクトが App Service バックエンドにデプロイされます。When you are ready, click OK, this will deploy the .NET server project that you have locally into the App Service backend. デプロイが完了すると、ブラウザーで http://{zumoappname}.azurewebsites.net/ にリダイレクトされます。When deployment finishes, you will be redirected to http://{zumoappname}.azurewebsites.net/ in the browser.

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

  1. クライアント プロジェクト (.sln) のソリューション ファイルに移動し、Visual Studio を使用してファイルを開きます。Navigate to the solution file in the client project (.sln) and open it using Visual Studio.

  2. 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.

  3. ZUMOAPPNAME/app/src/main/java/com/example/zumoappname フォルダーの ToDoActivity.java ファイルを開きます。Open the file ToDoActivity.java in this folder - ZUMOAPPNAME/app/src/main/java/com/example/zumoappname. アプリケーション名は ZUMOAPPNAME です。The application name is ZUMOAPPNAME.

  4. Azure portal に移動し、作成したモバイル アプリに移動します。Go to the Azure portal and navigate to the mobile app that you created. Overview ブレードで、モバイル アプリのパブリック エンドポイントである URL を探します。On the Overview blade, look for the URL which is the public endpoint for your mobile app. 例 - アプリ名 "test123" のサイト名は https://test123.azurewebsites.net になります。Example - the sitename for my app name "test123" will be https://test123.azurewebsites.net.

  5. ZUMOAPPNAME/www/js/index.js の index.js ファイル内の onDeviceReady() メソッドに移動し、ZUMOAPPURL パラメーターを上のパブリック エンドポイントに置き換えます。Go to the index.js file in ZUMOAPPNAME/www/js/index.js and in onDeviceReady() method, replace ZUMOAPPURL parameter with public endpoint above.

    client = new WindowsAzure.MobileServiceClient('ZUMOAPPURL');

    becomes

    client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');

  6. 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.

  7. デバイスまたはエミュレーターでアプリが起動したら、 [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.