Apache Cordova アプリを作成する

2019-06-25

概要

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

このチュートリアルを完了することは、Azure App Service での Mobile Apps 機能の使用に関する他のすべての Apache Cordova チュートリアルの前提条件です。

前提条件

このチュートリアルを完了するには、次の前提条件を用意しておく必要があります。

Visual Studio Community 2017 以降を搭載した PC。
Visual Studio Tools for Apache Cordova。
アクティブな Azure アカウント。

Visual Studio をバイパスし、Apache Cordova コマンドラインを直接使用することもできます。コマンドラインの使用は、Mac コンピューターでチュートリアルを完了するときに便利です。コマンドラインを使用した Apache Cordova クライアントアプリケーションのコンパイルについては、このチュートリアルでは説明しません。

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

Azure portal にサインインします。
[リソースの作成] をクリックします。
検索ボックスに、「Web App 」と入力します。
結果一覧で、Marketplace から Web アプリ を選択します。
サブスクリプション を選択し、リソースグループをします (既存のリソースグループ 選択するか、(アプリと同じ名前を使用して) 新しいリソースグループを作成)。
Web アプリの一意の名を選択します。
既定の 発行オプション を選択し、にコードとして設定します。
ランタイムスタックで、ASP.NET または Nodeでバージョンを選択する必要があります。 .NET バックエンドを構築する場合は、ASP.NET でバージョンを選択します。それ以外の場合は、Node ベースのアプリケーションを対象としている場合は、Node からいずれかのバージョンを選択します。
正しいオペレーティングシステム （Linux または Windows）を選択します。
このアプリをデプロイする リージョン を選択します。
適切な App Service プランの を選択し、[確認] をクリックしてを作成します。
リソースグループで、既存のリソースグループ を選択するか、(アプリと同じ名前を使用して) 新しいリソースグループを作成。
Create をクリックしてください。続行する前に、サービスが正常にデプロイされるまで数分待ちます。状態の更新については、ポータルヘッダーの通知 (ベル) アイコンをご覧ください。
デプロイが完了したら、展開の詳細 セクションをクリックし、[リソースの種類] Microsoft.Web/sitesをクリックします。先ほど作成した App Service Web アプリに移動します。
[設定] の下にある [構成] ブレードをクリックし、[アプリケーション設定]の [新しいアプリケーション設定] ボタンをクリックします。
[アプリケーションの追加/編集] 設定 ページで、名前の を MobileAppsManagement_EXTENSION_VERSION、値を最新の として入力、[OK] をクリックします。

この新しく作成された App Service Web アプリをモバイルアプリとして使用するように設定されています。

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

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

iOS (Objective-C)
iOS (Swift)
Android (Java)
Xamarin.iOS
Xamarin.Android
Xamarin.Forms
コルドバ
 Windows (C#)

注

iOS プロジェクトを使用する場合は、最新の GitHub リリースから "azuresdk-iOS-*.zip"ダウンロードする必要があります。 MicrosoftAzureMobile.framework ファイルを解凍し、プロジェクトのルートに追加します。
データベース接続を追加するか、既存の接続に接続する必要があります。まず、データストアを作成するか、既存のデータストアを使用するかを決定します。
- 新しいデータストアを作成する: データストアを作成する場合は、次のクイックスタートを使用します。
  
  クイックスタート: 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" の形式です。 {port} 通常は 1433 です。 {your_catalogue} データベースの名前は です。 {your_username} ユーザー名を して、データベースにアクセスします。パスワード {your_password} は、データベースにアクセスするためのものです。
    
    SQL 接続文字列の形式について詳しく知る
  2. 接続文字列を モバイルアプリ App Service に追加します。メニューの [構成] オプションを使用して、アプリケーションの接続文字列を管理できます。
    
    接続文字列を追加するには:
    1. [アプリケーション設定の ] タブをクリックします。
    2. で [+] 新しい接続文字列をクリックしてください。
    3. 接続文字列には名前、値、および型を指定する必要があります。
    4. 名前を MS_TableConnectionString として入力せよ
    5. 値は、前の手順で形成した接続文字列である必要があります。
    6. SQL Azure データベースに接続文字列を追加する場合は、の種類として SQLAzure を選択してください。
Azure Mobile Apps には、.NET および Node.js バックエンド用の SDK があります。
- Node.js バックエンド
  
  クイックスタートアプリ Node.js 使用する場合は、次の手順に従います。
  1. Azure portal で、Easy Tablesに移動すると、この画面が表示されます。
  2. [構成] タブに SQL 接続文字列が既に追加されていることを確認します。次に、のチェックボックスをオンにすると、すべてのサイトコンテンツが 上書きされ、[TodoItem テーブルの作成]ボタンをクリックします。
  3. [簡単なテーブル]で、[+ の追加] ボタンをクリックします。
  4. 匿名アクセスを使用して TodoItem テーブルを作成します。
    
    を追加する
- の .NET バックエンド
  
  .NET クイックスタートアプリを使用する場合は、次の手順に従います。
  1. azure-mobile-apps-quickstarts リポジトリから Azure Mobile Apps .NET サーバープロジェクトをダウンロードします。
  2. Visual Studio で .NET サーバープロジェクトをローカルにビルドします。
  3. Visual Studio でソリューションエクスプローラーを開き、ZUMOAPPNAMEService プロジェクトを右クリック [発行] をクリックすると、Publish to App Service ウィンドウが表示されます。 Mac で作業している場合は、でアプリを展開する他の方法を確認してください。
  4. 発行ターゲットとして App Service を選択し、既存のを選択をクリックし、ウィンドウの下部にある [発行] ボタンをクリックします。
  5. まず、Azure サブスクリプションを使用して Visual Studio にログインする必要があります。 Subscription、Resource Groupを選択し、アプリの名前を選択します。準備ができたら、[OK] をクリックすると、ローカルにある .NET サーバープロジェクトが App Service バックエンドにデプロイされます。デプロイが完了すると、ブラウザーで http://{zumoappname}.azurewebsites.net/ にリダイレクトされます。

Apache Cordova アプリをダウンロードして実行する

クライアントプロジェクト (.sln) のソリューションファイルに移動し、Visual Studio を使用して開きます。
Visual Studio で、スタート矢印の横にあるドロップダウンからソリューションプラットフォーム (Android、iOS、または Windows) を選択します。緑色の矢印のドロップダウンをクリックして、特定のデプロイデバイスまたはエミュレーターを選択します。既定の Android プラットフォームと Ripple エミュレーターを使用できます。より高度なチュートリアル (プッシュ通知など) では、サポートされているデバイスまたはエミュレーターを選択する必要があります。
ZUMOAPPNAME/app/src/main/java/com/example/zumoappname というフォルダー内の ToDoActivity.java ファイルを開きます。アプリケーション名は ZUMOAPPNAME。
azure portal に移動し、作成したモバイルアプリに移動します。 Overview ブレードで、モバイルアプリのパブリックエンドポイントである URL を探します。例 - アプリ名 "test123" のサイト名が https://test123.azurewebsites.netされます。
ZUMOAPPNAME/www/js/index.js の index.js ファイルに移動し、 onDeviceReady() メソッドで、 ZUMOAPPURL パラメーターを上記のパブリックエンドポイントに置き換えます。

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

なる

client = new WindowsAzure.MobileServiceClient('https://test123.azurewebsites.net');
Cordova アプリをビルドして実行するには、F5 キーを押すか、緑色の矢印をクリックします。エミュレーターにネットワークへのアクセスを要求するセキュリティダイアログが表示された場合は、それを受け入れます。
デバイスまたはエミュレーターでアプリを起動したら、[チュートリアルの完了] などのわかりやすいテキストを [新しいテキストの入力] に入力し、[追加] ボタンをクリックします。

バックエンドは、要求のデータを SQL Database の TodoItem テーブルに挿入し、新しく格納された項目に関する情報をモバイルアプリに返します。モバイルアプリでは、このデータが一覧に表示されます。

他のプラットフォームでは、手順 3 から 5 を繰り返すことができます。

次の方法で共有

Apache Cordova アプリを作成する

概要

前提条件

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

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

Apache Cordova アプリをダウンロードして実行する

その他のリソース

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

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