第5章 クライアントアプリの開発

5.1. RHMAP を使用した Angular アプリの開発

概要

ここでは、HTML5 AngularJS Cordova アプリ内で RHMAP Javascript SDK を使用する方法を説明します。

これには新規の AngularJS Hello World Project を作成するために必要なステップが含まれ、ここではクラウドコードアプリと対話するために必要なコードが強調されます。

要件

  • RHMAP アカウント
  • HTML、JavaScript、AngularJS および Node.js についての知識
  • GitHub ユーザーアカウント
  • FHC

AngularJS の使用を開始するユーザーは AngularJS チュートリアルをご利用できます。

5.1.1. サンプルプロジェクトの概要

このサンプルプロジェクトは、1 つのクライアントアプリと 1 つのクラウドアプリが含まれる単純なプロジェクトです。

5.1.1.1. クライアントアプリ

クライアントアプリは、RHMAP Javascript SDK が含まれる単純な AngularJS アプリです。クライアントアプリは、ユーザーに対してそれぞれの名前をテキストボックスに入力し、Say Hello From The Cloud ボタンをクリックするように求めます。次にクライアントアプリは $fh.cloud 関数を使用して入力されたテキストをクラウドコードアプリに送信します。

5.1.1.2. クラウドコードアプリ

クラウドコードアプリは hello エンドポイントを公開してクライアントアプリからリクエストを受信し、送信されたテキストを変更して Hello を追加し、応答をクライアントに返します。

5.1.2. AngularJS Hello World Project の新規作成

以下のステップを使用して新規の AngularJS Hello World Project を作成します。

  1. Studio にログインします。
  2. 画面の左上にあるプロジェクトタブを選択します。
  3. 画面上部の + 新規プロジェクトボタンを選択します。プロジェクトテンプレートの一覧が表示されます。
  4. AngularJS Hello World Project テンプレートを選択し、新規プロジェクトの名前を指定します。
  5. 次へ進むボタンを選択します。新規プロジェクトが作成されます。
  6. プロジェクトが作成されたら、終了ボタンを選択します。

これで、AngularJS クライアントアプリとそれが通信するクラウドコードアプリが含まれる新規プロジェクトが作成されました。

アプリをプレビューするには、以下を実行します。

  1. アプリ、クラウドアプリ & サービスタグを選択します。
  2. アプリセクションの下にあるクライアントアプリを選択します。ここから詳細画面に移動します。
  3. App Preview には、クラウドコードアプリと通信する AngularJS クライアントアプリの作業用バージョンが含まれます。

5.1.3. Android デバイス用クライアントアプリのビルド

アプリをテストして適切に機能することを確認したら、RHMAP Studio を使用してクライアントアプリをビルドすることができます。

以下のステップに従って Android デバイスのクライアントアプリをビルドします。

  1. クライアントアプリのインターフェースからビルドタブを選択します。
  2. Androidmaster ブランチ、Debug ビルドタイプ、Dev クラウドコードアプリを選択してからビルドボタンをクリックします。クライアントアプリの Android ビルドが作成されます。
  3. Android ビルドが完了すると QR コードが表示されので、Android デバイス上で QR Code Scanner アプリを開いてビルドをインストールします。または、ショート URL を電話のブラウザーに入力します。
注記

Android デバッグバイナリーは証明書なしにビルドできますが、いずれのタイプの iOS/Windows Phone バイナリーのビルドにも必要な認証情報が必要です。

注記

branch セレクターにより、ビルドするクライアントアプリのブランチを選択できます。この場合、デフォルトの master ブランチが適切なブランチになります。

これで RHMAP を使用して AngularJS HTML5 Cordova アプリを作成することができました。

5.1.4. デプロイメントの概要

このセクションでは、サンプルのソリューションが機能するための必要なコードについて重点的に説明します。

5.1.4.1. クラウドコードアプリ

まず、クラウドコードアプリについて考えてみましょう。この例ではクラウドコードアプリでクライアントアプリからのリクエストを受信し、hello パラメーターを変更し、以下のパラメーターを含む JSON オブジェクトを使用してクライアントアプリに応答できるようにします。

{
    msg: "Hello <<hello parameter sent by the client app>>"
}

この機能をクラウドコードアプリに実装するには、以下を実行します。

  1. application.js ファイルで、lib ディレクトリーにある hello.js ファイルを必要とする新規の /hello ルートが追加されます。
  2. hello.js ファイルは 2 つのルートを作成します。どちらのルートも hello パラメーターを変更するための同じ操作を実行します。

    • hello パラメーターがクエリー文字列として追加される GET リクエスト。
    • hello パラメーターが POST リクエストの本文で送信される POST リクエスト。
注記

このクラウドアプリは AngularJS クライアントアプリとは完全に切り離されています。クラウドコードアプリはプロジェクト内の任意の数のクライアントアプリ間で共有できます。

5.1.4.2. AngularJS クライアントアプリ

クラウドコードアプリの /hello エンドポイントを作成した後は、AngularJS クライアントアプリに追加した機能を検査し、この機能を使ってクラウドコードアプリで公開された /hello エンドポイントにリクエストを送信できるようにします。

クライアントアプリは、一部のテキストを受け入れる単一入力と入力をクラウドに送信し、結果をユーザーに表示する単一ボタンのある単純な AngularJS アプリです。

5.1.4.2.1. RHMAP SDK

まず、すべての HTML5 Cordova アプリの場合のように RHMAP Javascript SDK (feedhenry.js) は index.html ファイルに含まれています。この SDK により、すべての $fh クライアント API 関数にアクセスできます。

注記

feedhenry.js ファイルはテンプレートリポジトリーでは空になっていることを確認できます。クライアントアプリの作成時に feedhenry.js ファイルが www ディレクトリーにあると、最新の RHMAP Javascript SDK がファイルに自動的に追加されます。

5.1.4.2.2. fhconfig.json

クライアントアプリには fhconfig.json ファイルも含まれます。このファイルには、RHMAP Javascript SDK がクラウドアプリと通信するために必要な情報が含まれます。

注記

すべての HTML5 クライアントアプリには、$fh クライアント API 関数を使用するための fhconfig.json ファイルが含まれている必要があります。アプリの Studio での作成時に、このファイルに必要な情報が自動的に設定されます。

5.1.4.2.3. $fh.cloud

この例では、クラウドコードアプリの hello エンドポイントにリクエストを送信するために $fh.cloud クライアント API 関数が使用されます。

$fh.cloud 関数は cloud.js ファイルにあります。ここで、$fh.cloud 関数は MainCtrl コントローラーが使用する再利用可能なサービスとして公開されます。

AngularJS アプリには、MainCtrl という単一のコントローラーがあります。このコントローラーは以下を実行します。

  1. example.html ビューからユーザーの入力を受け入れる。
  2. fhcloud サービスを使用してクラウドコードアプリの hello エンドポイントを呼び出す。
  3. $fh.cloud 呼び出しが成功するかどうかに応じ、success または error 関数を使用してクラウドコードアプリからの応答を処理する。
注記

この場合、クライアントアプリは GET リクエストタイプを使用しています。クラウドコードアプリは GET および POST バージョンの hello エンドポイントの両方を公開し、POST リクエストタイプも機能します。これは RESTful アプリケーションを扱う場合にとくに役立ちます。

5.2. RHMAP を使用した Backbone アプリの開発

概要

ここでは HTML5 Backbone Cordova アプリ内で RHMAP Javascript SDK を使用する方法を説明します。

これには Backbone Hello World Project を新たに作成するために必要なステップが含まれ、ここではクラウドコードアプリと対話するために必要なコードが強調されます。

要件

  • RHMAP アカウント
  • HTML、JavaScript、Backbone および Node.js についての知識
  • GitHub ユーザーアカウント
  • FHC

Backbone の使用を開始するユーザーは Backbone Tutorial をご利用できます。

5.2.1. サンプルプロジェクトの概要

このサンプルプロジェクトは、1 つのクライアントアプリと 1 つのクラウドアプリが含まれる単純なプロジェクトです。

5.2.1.1. クライアントアプリ

クライアントアプリは RHMAP Javascript SDK が含まれる単純な Backbone アプリです。クライアントアプリは、ユーザーに対してそれぞれの名前をテキストボックスに入力し、Say Hello From The Cloud ボタンをクリックするように求めます。次にクライアントアプリは $fh.cloud 関数を使用して入力されたテキストをクラウドコードアプリに送信します。

5.2.1.2. クラウドコードアプリ

クラウドコードアプリは hello エンドポイントを公開してクライアントアプリからリクエストを受信し、送信されたテキストを変更して Hello を追加し、応答をクライアントに返します。

5.2.2. Backbone Hello World Project の新規作成

以下のステップを使用して新規の Backbone Hello World Project を作成します。

  1. Studio にログインします。
  2. 画面の左上にあるプロジェクトタブを選択します。
  3. 画面上部の + 新規プロジェクトボタンを選択します。プロジェクトテンプレートの一覧が表示されます。
  4. Backbone Hello World Project テンプレートを選択し、新規プロジェクトの名前を指定します。
  5. 次へ進むボタンを選択します。新規プロジェクトが作成されます。
  6. プロジェクトが作成されたら、終了ボタンを選択します。

これで Backbone クライアントアプリとそれが通信するクラウドコードアプリが含まれる新規プロジェクトが作成されました。

アプリをプレビューするには、以下を実行します。

  1. アプリ、クラウドアプリ & サービスタグを選択します。
  2. アプリセクションの下にあるクライアントアプリを選択します。ここから詳細画面に移動します。
  3. App Preview には、クラウドコードアプリと通信する Backbone クライアントアプリの作業用バージョンが含まれます。

5.2.3. Android デバイス用クライアントアプリのビルド

アプリをテストして適切に機能することを確認したら、RHMAP Studio を使用してクライアントアプリをビルドすることができます。

以下のステップに従って Android デバイスのクライアントアプリをビルドします。

  1. クライアントアプリのインターフェースからビルドタブを選択します。
  2. Androidmaster ブランチ、Debug ビルドタイプ、Dev クラウドコードアプリを選択してからビルドボタンをクリックします。クライアントアプリの Android ビルドが作成されます。
  3. Android ビルドが完了すると QR コードが表示されので、Android デバイス上で QR Code Scanner アプリを開いてビルドをインストールします。または、ショート URL を電話のブラウザーに入力します。
注記

Android デバッグバイナリーは証明書なしにビルドできますが、いずれのタイプの iOS/Windows Phone バイナリーのビルドにも必要な認証情報が必要です。

注記

branch セレクターにより、ビルドするクライアントアプリのブランチを選択できます。この場合、デフォルトの master ブランチが適切なブランチになります。

これで RHMAP を使用して Backbone HTML5 Cordova アプリを作成することができました。

5.2.4. デプロイメントの概要

このセクションでは、サンプルのソリューションが機能するための必要なコードについて重点的に説明します。

5.2.4.1. クラウドコードアプリ

まず、クラウドコードアプリについて考えてみましょう。この例ではクラウドコードアプリでクライアントアプリからのリクエストを受信し、hello パラメーターを変更し、以下のパラメーターを含む JSON オブジェクトを使用してクライアントアプリに応答できるようにします。

{
    msg: "Hello <<hello parameter sent by the client app>>"
}

この機能をクラウドコードアプリに実装するには、以下を実行します。

  1. application.js ファイルで、lib ディレクトリーにある hello.js ファイルを必要とする新規の /hello ルートが追加されます。
  2. hello.js ファイルは 2 つのルートを作成します。どちらのルートも hello パラメーターを変更するための同じ操作を実行します。

    • hello パラメーターがクエリー文字列として追加される GET リクエスト。
    • hello パラメーターが POST リクエストの本文で送信される POST リクエスト。
注記

このクラウドアプリは Backbone クライアントアプリとは完全に切り離されています。クラウドコードアプリはプロジェクト内の任意の数のクライアントアプリ間で共有できます。

5.2.4.2. Backbone クライアントアプリ

クラウドコードアプリに /hello エンドポイントを作成した後は、Backbone クライアントアプリに追加した機能を検査し、この機能を使ってクラウドコードアプリで公開された /hello エンドポイントにリクエストを送信できるようにします。

クライアントアプリは、一部のテキストを受け入れる単一入力と入力をクラウドに送信し、結果をユーザーに表示する単一ボタンのある単純な Backbone アプリです。

5.2.4.2.1. RHMAP SDK

まず、すべての HTML5 Cordova アプリの場合のように RHMAP Javascript SDK (feedhenry.js) は index.html ファイルに含まれています。この SDK により、すべての $fh クライアント API 関数にアクセスできます。

注記

feedhenry.js ファイルはテンプレートリポジトリーでは空になっていることを確認できます。クライアントアプリの作成時に feedhenry.js ファイルが www ディレクトリーにあると、最新の RHMAP Javascript SDK がファイルに自動的に追加されます。

5.2.4.2.2. fhconfig.json

クライアントアプリには fhconfig.json ファイルも含まれます。このファイルには、RHMAP Javascript SDK がクラウドアプリと通信するために必要な情報が含まれます。

注記

すべての HTML5 クライアントアプリには、$fh クライアント API 関数を使用するための fhconfig.json ファイルが含まれている必要があります。アプリの Studio での作成時に、このファイルに必要な情報が自動的に設定されます。

5.2.4.2.3. $fh.cloud

この Backbone クライアントアプリには、単一のカウントビューがあります。このビューは index.html ファイルの hello div にバインドされます。

カウントビューは Get No. of Characters ボタンのクリックイベントをリッスンします。このボタンがクリックされると、以下のようになります。

  1. カウントビューはクラウドヘルパー関数を使用して $fh.cloud クライアント API 関数を呼び出します。
  2. 次に $fh.cloud 関数は GET リクエストをクラウドコードアプリの hello エンドポイントに送信します。
  3. $fh.cloud 関数は、カウント操作の結果と共に success 関数を呼び出すか、またはリクエストが失敗した場合に error 関数を呼び出します。
  4. カウントビューは関連するメッセージで更新されます。
注記

この場合、クライアントアプリは GET リクエストタイプを使用しています。クラウドコアアプリは GET および POST バージョンの hello エンドポイントの両方を公開し、POST リクエストタイプも機能します。これは RESTful Backbone モデルを扱う場合にとくに役立ちます。

5.3. RHMAP を使用したlonic アプリの開発

概要

ここでは HTML5 lonic Cordova アプリ内で RHMAP Javascript SDK を使用する方法を説明します。

これには lonic Hello World Project を新たに作成するために必要なステップが含まれ、ここではクラウドコードアプリと対話するために必要なコードが強調されます。

要件

  • RHMAP アカウント
  • HTML、JavaScript、Ionic および Node.js についての知識
  • GitHub ユーザーアカウント
  • FHC (インストール済み)

Ionic のドキュメントには lonic アプリの開発を開始する上で必要なすべての情報が記載されています。

5.3.1. サンプルプロジェクトの概要

このサンプルプロジェクトは、1 つのクライアントアプリと 1 つのクラウドアプリが含まれる単純なプロジェクトです。

5.3.1.1. クライアントアプリ

クライアントアプリは、RHMAP Javascript SDK が含まれる単純な Ionic アプリです。クライアントアプリは、ユーザーに対してそれぞれの名前をテキストボックスに入力し、Say Hello From The Cloud ボタンをクリックするように求めます。次にクライアントアプリは $fh.cloud 関数を使用して入力されたテキストをクラウドコードアプリに送信します。

5.3.1.2. クラウドコードアプリ

クラウドコードアプリは hello エンドポイントを公開してクライアントアプリからリクエストを受信し、送信されたテキストを変更して Hello を追加し、応答をクライアントに返します。

5.3.2. Ionic Hello World Project の新規作成

以下のステップを使用して新規の Ionic Hello World Project を作成します。

  1. Studio にログインします。
  2. 画面の左上にあるプロジェクトタブを選択します。
  3. 画面上部の + 新規プロジェクトボタンを選択します。プロジェクトテンプレートの一覧が表示されます。
  4. Ionic Hello World Project テンプレートを選択し、新規プロジェクトの名前を指定します。
  5. 次へ進むボタンを選択します。新規プロジェクトが作成されます。
  6. プロジェクトが作成されたら、終了ボタンを選択します。

これで Ionic クライアントアプリとそれが通信するクラウドコードアプリが含まれる新規プロジェクトが作成されました。

アプリをプレビューするには、以下を実行します。

  1. アプリ、クラウドアプリ & サービスタグを選択します。
  2. アプリセクションの下にあるクライアントアプリを選択します。ここから詳細画面に移動します。
  3. App Preview には、クラウドコードアプリと通信する Ionic クライアントアプリの作業用バージョンが含まれます。

5.3.3. Android デバイス用クライアントアプリのビルド

アプリをテストして適切に機能することを確認したら、RHMAP Studio を使用してクライアントアプリをビルドすることができます。

以下のステップに従って Android デバイスのクライアントアプリをビルドします。

  1. クライアントアプリのインターフェースからビルドタブを選択します。
  2. Androidmaster ブランチ、Debug ビルドタイプ、Dev クラウドコードアプリを選択してからビルドボタンをクリックします。クライアントアプリの Android ビルドが作成されます。
  3. Android ビルドが完了すると QR コードが表示されので、Android デバイス上で QR Code Scanner アプリを開いてビルドをインストールします。または、ショート URL を電話のブラウザーに入力します。
注記

Android デバッグバイナリーは証明書なしにビルドできますが、いずれのタイプの iOS/Windows Phone バイナリーのビルドにも必要な認証情報が必要です。

注記

branch セレクターにより、ビルドするクライアントアプリのブランチを選択できます。この場合、デフォルトの master ブランチが適切なブランチになります。

これで RHMAP を使用して Ionic HTML5 Cordova アプリを作成することができました。

5.3.4. デプロイメントの概要

このセクションでは、サンプルのソリューションが機能するための必要なコードについて重点的に説明します。

5.3.4.1. クラウドコードアプリ

まず、クラウドコードアプリについて考えてみましょう。この例ではクラウドコードアプリでクライアントアプリからのリクエストを受信し、hello パラメーターを変更し、以下のパラメーターを含む JSON オブジェクトを使用してクライアントアプリに応答できるようにします。

{
    msg: "Hello <<hello parameter sent by the client app>>"
}

この機能をクラウドコードアプリに実装するには、以下を実行します。

  1. application.js ファイルで、lib ディレクトリーにある hello.js ファイルを必要とする新規の /hello ルートが追加されます。
  2. hello.js ファイルは 2 つのルートを作成します。どちらのルートも hello パラメーターを変更するための同じ操作を実行します。

    • hello パラメーターがクエリー文字列として追加される GET リクエスト。
    • hello パラメーターが POST リクエストの本文で送信される POST リクエスト。
注記

このクラウドアプリは Ionic クライアントアプリとは完全に切り離されています。クラウドコードアプリはプロジェクト内の任意の数のクライアントアプリ間で共有できます。

5.3.4.2. Ionic クライアントアプリ

クラウドコードアプリに /hello エンドポイントを作成した後は、Ionic クライアントアプリに追加した機能を検査し、この機能を使ってクラウドコードアプリで公開された /hello エンドポイントにリクエストを送信できるようにします。

クライアントアプリは、一部のテキストを受け入れる単一入力と入力をクラウドに送信し、結果をユーザーに表示する単一ボタンのある単純な Ionic アプリです。

5.3.4.2.1. RHMAP SDK

まず、すべての HTML5 Cordova アプリの場合のように RHMAP Javascript SDK (feedhenry.js) は index.html ファイルに含まれています。この SDK により、すべての $fh クライアント API 関数にアクセスできます。

注記

feedhenry.js ファイルはテンプレートリポジトリーでは空になっていることを確認できます。クライアントアプリの作成時に feedhenry.js ファイルが www ディレクトリーにあると、最新の RHMAP Javascript SDK がファイルに自動的に追加されます。

5.3.4.2.2. fhconfig.json

クライアントアプリには fhconfig.json ファイルも含まれます。このファイルには、RHMAP Javascript SDK がクラウドアプリと通信するために必要な情報が含まれます。

注記

すべての HTML5 クライアントアプリには、$fh クライアント API 関数を使用するための fhconfig.json ファイルが含まれている必要があります。アプリの Studio での作成時に、このファイルに必要な情報が自動的に設定されます。

5.3.4.2.3. $fh.cloud

この例では、クラウドコードアプリの hello エンドポイントにリクエストを送信するために$fh.cloud クライアント API 関数が使用されます。

$fh.cloud 関数は cloud.js ファイルにあります。ここで $fh.cloud 関数は MainCtrl コントローラーが使用する再利用可能なサービスとして公開されます。

Ionic アプリには、MainCtrl という単一のコントローラーがあります。このコントローラーは以下を実行します。

  1. example.html ビューからユーザーの入力を受け入れる。
  2. fhcloud サービスを使用してクラウドコードアプリの hello エンドポイントを呼び出す。
  3. $fh.cloud 呼び出しが成功するかどうかに応じ、success または error 関数を使用してクラウドコードアプリからの応答を処理する。
注記

この場合、クライアントアプリは GET リクエストタイプを使用しています。クラウドコードアプリは GET および POST バージョンの hello エンドポイントの両方を公開し、POST リクエストタイプも機能します。これは RESTful アプリケーションを扱う場合にとくに役立ちます。

5.4. Cordova プラグインの使用

Cordova プラグインは、ハイブリッドモバイルアプリのモバイルデバイス機能へのプラットフォームに依存しない JavaScript インターフェースを提供します。ストレージやカメラ、位置情報および他のサードパーティープラグインを含むデバイスの基本機能のための公式の Apache プラグインがいくつかあります。

Cordova プラグインの公式のレジストリーおよび配信チャネルは npm であり、プラグイン ID は npm パッケージ ID に対応します。Cordova プラグインページには公式のプラグインリストが記載されており、これはキーワード ecosystem:cordova を使用した npm パッケージのフィルターとして機能します。

5.4.1. サポートされるプラットフォーム

Cordova プラグインは RHMAP でサポートされるすべてのプラットフォームで使用できます。ただし、すべての Cordova プラグインがすべてのプラットフォームをサポートする訳ではありません。プラグインでサポートされるプラットフォームは cordova.platforms オブジェクトのプラグインの package.json ファイルで指定されるか、または Cordova プラグインの検索ページで指定されます。

5.4.2. プラグインのアプリへの追加

Cordova アプリケーションの開発時に、プラグインは cordova プラグインアプリを使って追加されます。これにより、リポジトリーからプラグインがダウンロードされ、必要なフォルダー構造が作成されると共にエントリーが config.xml ファイルに追加されます。詳細については、公式の Cordova ドキュメントの Platforms and Plugins Version Management を参照してください。

ただし RHMAP では、プラグインは RHMAP 固有の JSON ファイルの config.json でも宣言できます。これにより、Cordova Light アプリでプラグインを宣言でき、プラグインの仕様フォーマットが変更される場合もアプリがその変更に対応できるようになります。必要な変更は RHMAP Build Farm に 1 回で実装できるため、すべての開発者が各自のアプリを更新することを強制されることはありません。

{
  "plugins": [
    {
      "id": "cordova-plugin-device",
      "version": "latest"
    },
    {
      "id": "cordova-plugin-geolocation",
      "version": "1.0.1"
    },
    {
      "id": "cordova-labs-local-webserver",
      "url": "https://github.com/apache/cordova-plugins#master:local-webserver",
      "version": "2.3.1",
      "preferences": {
          "CordovaLocalWebServerStartOnSimulator": "false"
      }
    }
  ]
}

上記の例では、npm から利用可能な Device プラグインと Geolocation プラグイン、および指定の Github リポジトリーからのみ利用可能な Local WebServer プラグインの 3 つのプラグインが指定されています。

5.4.2.1. 仕様

config.json ファイルは Cordova アプリの www フォルダーか、または Cordova Light アプリの root に置かれる必要があります。

このファイルには plugins というキーが含まれている必要があり、その値は JSON オブジェクトのアレイであり、以下のプロパティーを定義するために使用されます。

  • id (必須)

    これは Cordova プラグインのグローバルに一意の ID です。これはその npm パッケージ ID に対応します。また、この ID は Cordova プラグインの仕様で説明されているようにプラグインの plugin.xml ファイルでも確認できます。

  • version (必須)

    使用するプラグインのバージョンです。npm パッケージバージョンに対応します。Git で配信されるプラグインの場合にのみ、プラグインのバージョンをその plugin.xml で確認できます。

    npm で配信されるプラグインの場合、最新の値を使用すると利用可能な最新バージョンを常に使用することができます。ただし、プラグインのアップグレードによって後方互換性が失われる可能性があるため、お使いのアプリで機能することが証明されている特定のバージョンを使用することを強くお勧めします。

  • url

    有効な Cordova プラグインが含まれる公式の Git リポジトリー URL (plugin.xml ファイルを含む) です。

    このフィールドに指定される値は、id の値または version フィールドの値にかかわらずプラグインをダウンロードするために使用されます。このフィールドが指定されていない場合、プラグインは id および version フィールドの値を使用して npm からダウンロードされます。

    また 公式の Cordova CLI ドキュメントで説明されているように、特定の Git の参照 (ref) およびリポジトリー内のプラグインへのパスを指定することもできます。

    • Git の参照 (ref) オブジェクトは、URL に #<git-ref> を追加して指定できます。お使いのアプリで機能するかどうかについてテスト済みのタグまたはその他の安定した参照 (ref) を使用することを強くお勧めします。master を参照 (ref) として使用すると、ビルドのたびにプラグインコードが変更され、アプリケーションが破損する可能性があります。
    • プラグインを含むディレクトリーへのパスは URL の :<path> で指定できます。

    たとえば、リポジトリーの release ブランチの plugin サブディレクトリーにあるプラグインを取得する必要がある場合、URL の形式は以下のようになります。

    https://example.com/example.git#release:plugin

    プラグインがダウンロードされた後に、プラグイン ID が config.json で指定される id フィールドと一致することを確認するためにその plugin.xml ファイルが解析されます。

  • preferences

    プラグイン設定を指定するには、上記の例の CordovaLocalWebServerStartOnSimulator のように preferences オブジェクトのキーと値のペアを使用します。

  • variables

    一部のプラグインは、文字列の値をパラメーター化するために plugin.xml で変数を使用します。このフィールドに変数の値をキーと値のペアで指定できます。変数の詳細については、公式のドキュメントを参照してください。

5.4.3. Cordova Light アプリの考慮事項

Cordova Light App の後方互換性を維持するため、有効な config.json ファイルが提供されない場合は、Build Farm でのアプリのビルド時にデフォルトのプラグインのセットが適用されます。config.json ファイルを提供し、アプリで必要な Cordova プラグインのみを指定することを強くお勧めします。これを実行することにより、以下が可能になります。

  • プラグインの予期しない変更によるアプリへの影響を回避

    デフォルトプラグインの一覧は変更されままであるとは保証できず、これに変更が加わると、後方互換性が失われる可能性があります。独自の config.json ファイルを提供することにより、アプリはプラグインバージョンの一定のリストを常に使用できるため、ビルドの安定性が高まります。

  • アプリのビルド時間とバイナリーのサイズを縮小

    プラグインはアプリのビルド時にダウンロードおよびインストールされ、ビルドされるバイナリーに組み込まれます。そのため、プラグインの数が減ると、ビルド時間やバイナリーのサイズが縮小することになります。

5.4.3.1. デフォルトプラグイン

公式プラグイン

  • cordova-plugin-device (1.1.2)
  • cordova-plugin-network-information (1.2.1)
  • cordova-plugin-battery-status (1.1.2)
  • cordova-plugin-device-motion (1.2.1)
  • cordova-plugin-device-orientation (1.0.3)
  • cordova-plugin-geolocation (2.2.0)
  • cordova-plugin-file (4.2.0)
  • cordova-plugin-camera (2.2.0)
  • cordova-plugin-media (2.3.0)
  • cordova-plugin-media-capture (1.3.0)
  • cordova-plugin-file-transfer (1.5.1)
  • cordova-plugin-dialogs (1.2.1)
  • cordova-plugin-vibration (2.1.1)
  • cordova-plugin-contacts (2.1.0)
  • cordova-plugin-globalization (1.0.3)
  • cordova-plugin-inappbrowser (1.4.0)
  • cordova-plugin-console (1.0.3)
  • cordova-plugin-whitelist (1.2.2)
  • cordova-plugin-splashscreen (3.2.2)

オプション

  • cordova-sms-plugin (v0.1.9)
  • com.arnia.plugins.smsbuilder (0.1.1)
  • cordova-plugin-statusbar (2.1.3)

5.4.4. ブラウザーでのアプリのテスト

プラグインが config.json ファイルに指定される場合、プラグインの JavaScript オブジェクトはビルドおよびデバイスへのインストールが終了するまで利用できません。そのため、アプリでプラグインの JavaScript オブジェクトを参照し、アプリを Studio の App Preview にロードしようとすると、object undefined (オブジェクトが定義されていません)というエラーが出される可能性があります。

これを解決するには、プラグイン API を呼び出す際に防御的なチェック (defensive checking) を使用します。たとえば Cordova camera API の以下の呼び出しにより、「オブジェクトが定義されていません (object undefined)」というエラーが出されます。

navigator.camera.getPicture(success, fail, opts);

ただし、API が定義されているかどうかを確認することで、エラーを処理できます。

if(typeof navigator.camera !== "undefined"){
  navigator.camera.getPicture(success, fail, opts);
} else {
  //fail gracefully
  fail();
}

5.5. アプリでのセキュアキーの使用

$fh.sec API は、キーおよびデータの暗号化/復号化を生成する機能を提供します。ただし、キーの生成後は今後の使用に備えてそれらをどこかに保存する必要があるかもしれません。たとえば、シークレットキーで暗号化する必要のあるデータがあり、これをデバイスに保存したとします。次にアプリケーションが再度起動すると、同じシークレットキーを取得して、データを復号化する必要があります。

これを実行するための最適な方法として、キーをクラウド側に保存し、クライアントの固有 ID (CUID) およびアプリ ID を使用してそれらのキーをクライアントに関連付けることができます。

5.5.1. CUID およびアプリ ID

CUID とアプリ ID の両方はすべての $fh.act リクエストでクライアント SDK によって送信されます。これらは __fh という特殊な JSON オブジェクトからアクセスできます。CUID は各デバイスに固有であり、アプリが削除されたり再インストールされる場合でもそのまま変更されません。アプリ ID はアプリがプラットフォームで作成されると生成され、これも変更されません。以下のコードを使用し、クラウドコードでそれらにアクセスできます。

getKeyId = function(params){
  var cuid = params.__fh.cuid;
  var appid = params.__fh.appid;
  var keyid = cuid + "_" + appid;
  return keyid;
}

exports.getKey = function(params, callback){
  var keyid = getKeyId(params);
  //get a key using this keyid
  ....
}

5.5.2. キーの永続化

キーをクラウドに保存するために任意の永続的なメカニズムを使用できます。推奨される 1 つの方法として、$fh.db を使用することができます。以下は、$fh.db を使用してキーを保存し、取得する方法を示すサンプルコードです。

//read a key using $fh.db
var getKey = function(params, cb){
  if(typeof $fh !== "undefined" && $fh.db){
    $fh.db({
      act:'list',
      'type': 'securityKeys',
      eq: {
        "id": getKeyId(params),  //The id is generated using the above example code
        "keyType": params.type
      }
    }, function(err, data){
      if(err) return cb(err);
      if(data.count > 0){
        return cb(undefined, data.list[0].fields.keyValue);
      } else {
        return cb(undefined, undefined);
      }
    });
  } else {
    console.log("$fh.db not defined");
    cb("$fh.db not defined");
  }
}

//save a key using $fh.db
var saveKey = function(params, cb){
  if(typeof $fh !== "undefined" && $fh.db){
    //first check if a key with the same id and type already exsists
    $fh.db({
      act:'list',
      'type': 'securityKeys',
      eq: {
        "id": getKeyId(params),
        "keyType": params.type
      }
    }, function(err, data){
      if(err) return cb(err);
      //a key with the same id and type already exists, update it
      if(data.count > 0){
        $fh.db({
          'act':'update',
          'type': 'securityKeys',
          'guid': data.list[0].guid,
          'fields' : {
            'id': getKeyId(params),
            'keyType': params.type,
            'keyValue' : params.value
          }
        }, function(err, result){
          if(err) return cb(err);
          return cb(undefined, result);
        })
      } else {
        //a key with the same id and type is not found, create it
        $fh.db({
          'act': 'create',
          'type': 'securityKeys',
          'fields': {
            'id' : getKeyId(params),
            'keyType': params.type,
            'keyValue': params.value
          }
        }, function(err, result){
          if(err) return cb(err);
          return cb(undefined, result);
        });
      }
    });
  } else {
    console.log("$fh.db not defined");
    cb("$fh.db not defined");
  }
}

5.5.3. サンプルコード

$fh.sec API を使用する方法を詳細に説明した参照アプリケーションが作成されており、このアプリケーションのコードは GitHub (https://github.com/feedhenry-training/fh-security-demo-app) で利用できます。

5.6. アプリのデバッグ

デバッグはアプリ開発に不可欠な部分です。Web アプリの場合、これはコードの特定部分の変数の値を表示するための alert() 関数を使用するだけで実行できます。コンソールのあるブラウザーの場合、console.log 関数を使ってこの種の情報のログを受動的に記録することができます。Web アプリケーションのより高度なデバッグ方法には、DOM の状態検査、JavaScript コードのブレークポイント設定およびコードのステップ実行、またはオンザフライでの DOM および関連付けられたスタイルの更新などがあります。

このページでは、クラスプラットフォームアプリの開発時に使用できるデバッグツールについて説明します。これらのツールは Studio またはデバイスで使用できます。

デバッグ用のアプリや iOS および Android でデバッグを実行する方法の詳細については、この ブログ を参照してください。

5.6.1. Studio コンソール

ほとんどのブラウザーはコンソールロガーをサポートしています。さまざまなログレベルをメッセージと共に呼び出すことができます。以下は例になります。

console.log(message);
console.error(message);

このコンソール出力をデバッグするには、ブラウザーで関連する Web デバッグツールを開く必要があります。

クラウドコードをデバッグするには、単純に console.log() および console.error() を使用します。対応するログファイルは「ログ」セクションの下に表示されるか、または FHC を使用して表示できます。

console.log('this goes to stdout.log');
console.error('this goes to stderr.log');

5.6.2. Firebug

開発用として選択したブラウザーが Firefox の場合、Firebug ツールを使うとデバッグが非常に簡単になります。Firebug は Firefox のアドオンですが、これは多数のアップデートが行われる非常にアクティブなアドオンです。以下は、Firebug を使用して実行できるいくつかの点になります。

  • コンソール出力の表示
  • リソース要求の表示
  • スクリプト実行のデバッグ
  • ブレークポイントのデバッグ時のコードの動的実行
  • DOM の表示/更新
  • スタイルの表示/更新
  • ローカルストレージ (DB) の表示/更新

上記の機能を使用すると、アプリのデバッグは非常に簡単になります。アプリが Firebug による警告またはエラーなしに起動する場合、そのアプリはクロスプラットフォームで機能できる可能性があります。

5.6.3. Chrome の Web Inspector

Web Inspector は Firebug によく似ています。これは Firebug とほぼ同じ機能を提供しますが、設定なしに WebKit ブラウザーに組み込まれるという利点があります。つまり、Web Inspector は Google Chrome および Safari で使用することができます。Chrome ではこのツールをデフォルトで有効にでき、web ページの任意のオブジェクトをクリックして「Inspect Element (要素を検証)」を選択することにより、コンテキストで開始できます。

5.6.4. Safari / iOS 6+

注記

Safari での iOS でのリモートデバッグは、開発プロビジョニングプロファイルでビルドされたアプリケーション用にのみ有効にできます。Ad Hoc および Distribution アプリをこの方法でデバッグすることはできません。

  1. iOS デバイスの「Settings app」に移動します。
  2. SafariAdvanced に移動してから Web Inspector スイッチを切り替えます。

    Studio スクリーンショット

  3. デスクトップ Safari で、SafariPreferences に移動し、Advanced を選択してから Show Develop menu in menu bar チェックボックスにチェックを付けます。

    Studio スクリーンショット

  4. USB 経由で iOS デバイスを開発マシンに接続します。
  5. デバッグの必要なアプリを開きます。これは Safari の Develop メニューから使用できます。

    Studio スクリーンショット

  6. Develop メニューには、User Agent スイッチャーのような追加ツールがあります。これにより、ブラウザーを Mobile Safari などの異なるブラウザーとして表示することができます。この機能は、アプリのモバイル Internet 版を開発する場合に役立ちます。

5.6.5. Chrome / Android 4.0+

注記

Chrome での Android のリモートデバッグは、デバッグ可能フラグが付けられたアプリケーション用にのみ有効にできます。Cordova 3.3 以降を使用している場合、android:debuggable="true"AndroidManifest.xml ファイルの <application> 要素に追加します。Cordova 3.2 以前のバージョンを使用している場合には、WebView デバッグを有効にする必要があります。

  1. Android デバイスで USB デバッグを有効にします。Android 4.2 以降のバージョンでは、開発者のオプションは非表示にされています。これを利用可能にするには、SettingsAbout phone に移動し、Build number を 7 回タップします。

    Studio スクリーンショット

  2. 直前の画面に戻り、Developer options を見つけて USB debugging チェックボックスにチェックを付けます。Stay awake オプションを選択することも推奨されています。

    Studio スクリーンショット

  3. デスクトップ Chrome ブラウザーの右上のメニューから、ToolsInspect Devices を選択します。
  4. Discover USB devices にチェックを付けます (選択されていない場合)。
  5. USB 経由で Android デバイスに接続します。
  6. このデバイスを開発用に初めて接続する場合、開発マシンから USB デバッグのパーミッションを要求するアラートがデバイスに表示される可能性があります。このアラートが毎回表示されないようにするには、Always allow from this computer にチェックを付けてから、OK をタップします。
  7. アプリをデバッグするには、これをデバイス上で実行する必要があります。
  8. Chrome では、Inspect リンクをクリックして DevTools を開きます。

    Studio スクリーンショット

5.6.6. オンデバイス (On-Device)

デバイス上のデバッグは、デスクトップブラウザー内でのデバッグに比べると単純な初期段階のデバッグと言えます。iOS などの一部のプラットフォームでは、コンソールを利用でき、Developer モードが有効にされると javascript エラーが表示されますが、これは完全に機能が搭載された Firebug または Web Inspector などの高度な機能とは比較になりません。

5.6.6.1. Weinre

Weinre は、現時点で最も良いオンデバイスデバッグツールと言えるでしょう。これは webkit ブラウザーのみを正式にサポートします。つまり、このツールは Android および iOS で機能します。詳細一覧およびバージョン番号はこのサイトで確認できます。

Weinre は、デバイス上のアプリから Weinre サーバーへのリモートのデバッグセッションをセットアップすると機能します。Weinre は、Web Inspector にアクセスし、アプリをリモートでデバッグするために使用できる web サーバーを実行します。本書の作成時点で、この Web Inspector セッションの機能は DOM のデバッグおよび更新を可能にします。リモートコンソールも表示され、開発者はコンソールからアプリのコードを動的に実行できます。

アプリケーションで Weinre のデバッグを有効にするには、いくつかのステップを実行する必要があります。

  1. デバイスの接続先となる Weinre jar を稼働させます。これを実行する方法として 2 つの方法があります。

    • インターネット上でアクセス可能なマシンで jar ファイルを実行する。
    • デバイスと同じネットワーク上のマシンで jar を実行します。つまり、このデバイスは、WiFi 経由で開発者マシンと同じルーター/アクセスポイントに接続されていることになります。

    jar をコマンドラインから実行する場合、すべてのインターフェースでリッスンするように boundHost に値 -all- を使用することをお勧めします。

  2. アプリをデバイスにビルドし、デプロイする前にアプリの HTML にスクリプトを追加します。Weinre のドキュメントによると、組み込まれるスクリプトは以下のようになります。

    <script src="http://some.server.xyz/target/target-script-min.js#anonymous"></script>

    使用されるアドレス some.server.xyz は Weinre サーバーを実行しているマシンのアドレスと一致している必要があります (ip アドレスも機能します) 。

  3. アプリをデバイスにデプロイし、これを起動します。(開発者マシンの) Weinre サーバーの web ページを開くと、デバッグユーザーインターフェースへのリンクが表示されます。このリンクから Web Inspector が開き、アプリのリモートデバッグが可能になります。

    ここまではサードパーティーツールについての説明であり、このセットアッププロセスに関する更新情報については、公式サイトをご確認いただくことをお勧めします。

5.7. Cordova Light Client アプリの Cordova への移行

5.7.1. 概要

Cordova Light アプリの標準 Cordova への移行により、アプリの最新 RHMAP 機能との互換性が確保されますが、以下の点に注意してください。

  • Cordova Light では、iOS、iPhone および iPad という iOS アプリの 3 つの異なる種類を作成することができました。標準 Cordova アプリは (バリエーションなしの) iOS をサポートします。移行時には Cordova Light の iPhone 設定オプションのみが送信されます。移行前に、この手順 で説明されているように保存する必要のある iOS および iPad 設定オプションが Studio の iPhone 設定オプションに適用されていることを確認してください。
  • Cordova Light アプリに config.json ファイルが含まれていない場合は、移行ツールが config.xml ファイルに、Build Farm でサポートされるデフォルトのプラグインを設定します。この手順 で説明されているように不必要なプラグインは削除することが推奨されています。
注記

Cordova Light は、標準 Cordova が導入されたため非推奨となりました。

Cordova Light アプリから Cordova への移行は必須ではありません。テンプレートから新規の Cordova Light アプリを作成することはできなくなりましたが、それらを RHMAP Studio のプロジェクトにインポートしたり、Build Farm を使用してビルドしたりすることができます。

既存の Cordova Light クライアントアプリを Studio にインポートするには、以下を実行します。

  1. プロジェクトに移動します。
  2. アプリ、クラウドアプリ & サービス に移動します。
  3. + ボタンをクリックして新規アプリを追加します。
  4. 既存アプリのインポート ボタンをクリックします。
  5. Cordova Light アプリタイプを選択します。

5.7.2. 既存アプリのバックアップ

既存の Cordova Light アプリをバックアップするには、アプリの 詳細 に移動し、クローン をクリックします。これにより、元のアプリと同じソースコードを持つ新規の Cordova Light アプリが作成されます。

5.7.3. アプリ移行の設定

  1. アプリの 設定 (Config) ページに移動します。

    注記

    設定 (Config) オプションは Cordova Light アプリの左側のメニューにのみ表示されます。

  2. 保存する必要のある iOS および iPad 設定オプションが Studio の iPhone 設定オプションに適用されていることを確認します。設定の移行方法についての詳細は、移行後のアプリの設定 を参照してください。
  3. Cordova Light アプリが RHMAP 3.11 よりも前にビルドされている場合、RHMAP 3.11 アップグレードドキュメント を使用してアプリをアップグレードし、最新のプラグインを使用できるようにします。

5.7.4. アプリの移行

Cordova Light アプリは、Studio または FHC コマンドラインツール のいずれかを使用して移行することができます。

Studio を使用してアプリを移行するには、以下の手順を実行します。

  1. アプリの 設定 (Config) ページに移動します。
  2. Full Cordova への移行 (Migrate to Full Cordova) をクリックします。
  3. iPad および iOS 設定を iPhone 設定に移動したことを確認します。

移行が完了すると、Studio に通知が表示されます。

FHC を使用してアプリを移行するには、以下の手順を実行します。

  1. FHC コマンドラインツール をセットアップします。
  2. 以下のコマンドを使用してアプリを移行します。

    fhc cordova migrate --app=<CORDOVA_LIGHT_APP>

    ここで、CORDOVA_LIGHT_APP は Cordova Light アプリのアプリ ID です。これはアプリの 詳細 (Details) ページで参照できます。

移行ツール:

  1. 標準 Cordova config.xml ファイルを作成します。
  2. config.xml ファイルに値がアプリの名前に設定された name タグを作成します。
  3. config.xml にクラウドアプリドメインが設定された access タグを作成し、すべてのサブドメインを許可します。
  4. access タグを config.xml に作成し、cdvfile://* を許可します。
  5. cordova.jsindex.html に追加します (存在しない場合)。これはプラグインを実行するのに必要です。
  6. 「設定 (Config)」タブの値を該当する Cordova の値に移行し、config.xml にプラグインまたは設定を追加します。
  7. www/config.json プラグインオブジェクトを config.xml で標準 Cordova プラグインエントリーに変換します。
  8. cordova-plugin-splashscreen プラグインをインストールします。
  9. スプラッシュ画像およびアイコンの参照を config.xml ファイルに追加します。
  10. アプリタイプを Cordova Light から Cordova に変更します。
  11. www/config.json ファイルを削除します。

5.7.5. 移行後のアプリの設定

  1. アプリが外部サービスに接続する必要がある場合に access タグを追加します。移行ツールはクラウドアプリドメインが設定された access タグを自動的に作成し、すべてのサブドメインと cdvfile://* を許可します。access タグについての詳細は、Cordova Whitelist Guide を参照してください。
  2. 不要なプラグインを削除します。Cordova Light アプリに config.json ファイルが含まれない場合、移行ツールは config.xml ファイルに Cordova 6.3.1 と互換性のある以下のプラグインを設定します。ご使用のアプリではこれらのプラグインのいずれも不要な場合があります。

    <plugin name="cordova-plugin-device" spec="1.1.2"/>
    <plugin name="cordova-plugin-network-information" spec="1.2.1"/>
    <plugin name="cordova-plugin-battery-status" spec="1.1.2"/>
    <plugin name="cordova-plugin-device-motion" spec="1.2.1"/>
    <plugin name="cordova-plugin-device-orientation" spec="1.0.3"/>
    <plugin name="cordova-plugin-geolocation" spec="2.4.1"/>
    <plugin name="cordova-plugin-file" spec="4.2.0"/>
    <plugin name="cordova-plugin-camera" spec="2.3.1"/>
    <plugin name="cordova-plugin-media" spec="2.4.1"/>
    <plugin name="cordova-plugin-media-capture" spec="1.4.1"/>
    <plugin name="cordova-plugin-file-transfer" spec="1.5.1"/>
    <plugin name="cordova-plugin-dialogs" spec="1.2.1"/>
    <plugin name="cordova-plugin-vibration" spec="0.3.7"/>
    <plugin name="cordova-plugin-contacts" spec="2.1.0"/>
    <plugin name="cordova-plugin-globalization" spec="1.0.3"/>
    <plugin name="cordova-plugin-inappbrowser" spec="1.4.0"/>
    <plugin name="cordova-plugin-console" spec="1.0.3"/>
    <plugin name="cordova-plugin-whitelist" spec="1.2.2"/>
    <plugin name="cordova-plugin-screen-orientation" spec="v1.4.2"/>
    <plugin name="com.feedhenry.plugins.apkdownloader" spec="https://github.com/feedhenry/fh-cordova-plugin-apkdownloader.git#fh0.0.1"/>
    <plugin name="fh-cordova-plugin-device " spec="https://github.com/feedhenry/fh-cordova-plugin-device.git#fh0.0.3"/>
    <plugin name="cordova-sms-plugin" spec="v0.1.11"/>
    <plugin name="cordova-plugin-statusbar" spec="~2.2.1"/>
    <plugin name="fh-cordova-plugin-smsbuilder" spec="https://github.com/feedhenry/sms-builder.git#fh0.1.2"/>
    <plugin name="fh-cordova-plugin-ftputil" spec="https://github.com/feedhenry/fh-cordova-plugin-ftputil.git#fh0.0.2"/>
  3. 標準 Cordova アプリは (バリエーションなしの) iOS をサポートします。以下の Cordova Light から標準 Cordova への設定オプションの移行について注意してください。

    1. 以下の iPhone オプションの移行に注意してください。

      • アクティビティースピナー (Activity Spinner)

        アクティビティースピナー (Activity Spinner) フィールドの値が 上 (Top) または 中央 (Center) の場合、移行ツールは値 trueShowSplashScreenSpinner 設定を config.xml ファイルに追加します。たとえば、<preference name="ShowSplashScreenSpinner" value="true"/> のようになります。値が 非表示 (Hidden) の場合、値が falseShowSplashScreenSpinner 設定を追加します。

      • バンドル識別子 (Bundle Identifier)

        バンドル識別子 (Bundle Identifier) フィールドの値が Android パッケージ名 (Android Package Name) の値と同一の場合、その値は config.xml ファイルの id ウィジェット属性に使用されます。値が異なる場合は、バンドル識別子 (Bundle Identifier) フィールドの値が config.xml ファイルの ios-CFBundleIdentifier ウィジェット属性に使用されます。値が指定されていない場合は、デフォルトの org.feedhenry.dart.helloworld.cordova が使用されます。ios-CFBundleIdentifier 属性は iOS アプリのバンドル識別子を設定するために使用されます。

      • 自動回転 (Auto Rotate)

        自動回転 (Auto Rotate) オプションにチェックが付けられていない場合、画面の向き (Orientation) 設定タグが config.xml ファイルの ios プラットフォームタグ内に 画面の向き (Orientation) フィールドの値と共に追加されます。たとえば、<preference name="Orientation" value="landscape" /> のようになります。

      • 自動非表示スプラッシュ (Auto Hide Splash)

        自動非表示スプラッシュ (Auto Hide Splash) オプションにチェックが付けられている場合、値が trueAutoHideSplashScreen 設定が config.xml ファイルに追加されます。たとえば、<preference name="AutoHideSplashScreen" value="true" /> のようになります。このオプションにチェックが付けられていない場合は、値 false が使用されます。

      • 背景音 (Background Audio): 背景音 (Background Audio) オプションにチェックが付けられている場合、cordova-plugin-settings-hook プラグインタグおよびこのコードが config.xml ファイルの widget 要素内に追加されます。

        <plugin name="cordova-plugin-settings-hook" spec="~0.2.4"/>
        <config-file parent="UIBackgroundModes" platform="ios" target="*-Info.plist">
            <array>
                <string>audio</string>
            </array>
        </config-file>
      • ステータスバーの非表示 (Hide Status Bar): ステータスバーの非表示 (Hide Status Bar) オプションにチェックが付けられている場合、cordova-plugin-settings-hook プラグインタグおよびこのコードが config.xml ファイルの widget 要素内に追加されます。

        <plugin name="cordova-plugin-settings-hook" spec="~0.2.4"/>
        <platform name="ios">
            <config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
                <true/>
            </config-file>
            <config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
                <false/>
            </config-file>
        </platform>
      • 旧スタイルのステータスバー (Old Style Status Bar)
      • 旧スタイルのステータスバー (Old Style Status Bar) オプションにチェックが付けられている場合、cordova-plugin-statusbar のプラグインタグ、値が falseStatusBarOverlaysWebView 設定タグ、および値が #000000StatusBarBackgroundColor 設定タグが config.xml ファイルの widget 要素内に追加されます。

            <plugin name="cordova-plugin-statusbar" spec="~2.2.1"/>
            <preference name="StatusBarOverlaysWebView" value="false"/>
            <preference name="StatusBarBackgroundColor" value="#000000"/>
      • 画面の向き (Orientation)

        自動回転 (Auto Rotate) にチェックが付けられていない場合、画面の向き (Orientation) の値が使用され、config.xml ファイルの ios プラットフォームタグ内に 画面の向き (Orientation) 設定タグが作成されます。

      • リモートデバッグ (Remote Debug): この値は使用されません。
      • iphone5 Retina スプラッシュ画像 (iphone5 Retina Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • Retina スプラッシュ画像 (Retina Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • スプラッシュ画像 (Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • バージョン名 (Version Name)

        バージョン名 (Version Name)config.xml ファイルの widget 要素の ios-CFBundleVersion 属性を設定するために使用されます。widget 要素の version 属性の場合、Android タブの バージョン名 (Version Name) が代わりに使用されます。Cordova は ios-CFBundleVersion を使用してアプリのビルドバージョンである CFBundleVersion を設定し、version を使用してアプリの表示されるバージョンである CFBundleShortVersionString を設定します。アプリを異なる iOS バージョン名でビルドする場合には、移行後に config.xml ファイルの version 属性を ios-CFBundleVersion 属性の値に置き換えます。たとえば、生成される widget 要素を以下のように更新します。

        <widget version="1.2" ios-CFBundleVersion="1.2">
          ...
        </widget>
    2. 以下の iPad オプションの移行に注意してください。

      • アクティビティースピナー (Activity Spinner): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • バンドル識別子 (Bundle Identifier): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • 自動回転 (Auto Rotate): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • 自動非表示スプラッシュ (Auto Hide Splash): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • 背景音 (Background Audio): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • Flurry アプリケーションキー (Flurry Application Key): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • ステータスバーの非表示 (Hide Status Bar): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • 旧スタイルのステータスバー (Old Style Status Bar): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • iPad 横向き Retina スプラッシュ画像 (iPad Landscape Retina Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • iPad Retina スプラッシュ画像 (iPad Retina Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • 横向きスプラッシュ画像 (Landscape Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • 画面の向き (Orientation): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
      • リモートデバッグ (Remote Debug): この値は使用されません。
      • スプラッシュ画像 (Splash Image): この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。
      • バージョン名 (Version Name): この値は使用されず、代わりに iPhone タブのこのフィールドの値が使用されます。
    3. iOS タブのすべての設定は移行ツールによって無視されます。iOS の設定を保存するには、移行前にこれを iPhone タブに移動する必要があります。
    4. 以下の Android オプションの移行に注意してください。

      • Android パッケージ名 (Android Package Name)

        Android パッケージ名 (Android Package Name) フィールドの値が バンドル識別子 (Bundle Identifier) の値と同一の場合、その値は config.xmlid ウィジェット属性に使用されます。値が異なる場合は、Android パッケージ名 (Android Package Name) フィールドの値が config.xml ファイルの android-packageName ウィジェット属性に使用されます。値が指定されていない場合は、デフォルトの値である org.feedhenry.dart.helloworld.cordova が使用されます。この属性は Android アプリパッケージ名を設定するために使用されます。

      • 自動回転 (Auto Rotate)

        自動回転 (Auto Rotate) オプションにチェックが付けられていない場合、画面の向き (Orientation) 設定タグが config.xml ファイルの Android プラットフォームタグ内に 画面の向き (Orientation) フィールドの値と共に追加されます。たとえば、<preference name="Orientation" value="landscape" /> のようになります。

      • Flurry アプリケーションキー (Flurry Application Key)

        iPhone タブの Flurry アプリケーションキー (Flurry Application Key) フィールドに値がない場合、この値が config.xml ファイルの末尾にコメントとして記録されますが、Flurry プラグインはインストールされていないためにこの値は使用されません。iPhone および Android タブのどちらにも Flurry アプリケーションキー (Flurry Application Key) の値がある場合には、Android の値が無視されます。

      • フルスクリーン (Full Screen)

        フルスクリーン (Full Screen) にチェックが付けられている場合、フルスクリーン (Full Screen) 設定タグが config.xml ファイルの android プラットフォームタグ内に、値 true と共に追加されます。たとえば、<preference name="Fullscreen" value="true" /> のようになります。

      • 画面の向き (Orientation)

        自動回転 (Auto Rotate) にチェックが付けられていない場合、画面の向き (Orientation) の値が使用され、config.xml ファイルの android プラットフォームタグ内に 画面の向き (Orientation) 設定タグが作成されます。

      • 音声パーミッション (Permission Audio): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • カメラパーミッション (Permission Camera): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • 連絡先パーミッション (Permission Contacts): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • 場所パーミッション (Permission Location): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • 電話の状態読み取りパーミッション (Permission Read Phone State): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • SMS 受信パーミッション (Permission Receive SMS): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • バイブレーションパーミッション (Permission Vibrate): このフィールドは無視されます。パーミッションは関連付けられたプラグインで処理されます。
      • リモートデバッグ (Remote Debug): この値は使用されません。
      • スプラッシュ画像 (Splash Image)

        この値は使用されませんが、config.xml ファイルの末尾にコメントとして記録されます。

        バージョンコード (Version Code)

        バージョンコード (Version Code) フィールドは config.xml ファイルの widget 要素の android-versionCode 属性を設定するために使用されます。

        <widget android-versionCode="18">
          ...
        </widget>

        バージョン名 (Version Name)

        バージョン名 (Version Name) フィールドは、config.xml ファイルの widget 要素のversion 属性の値を設定するために使用されます。

        <widget version="1.8">
          ...
        </widget>
    5. Blackberry タブのすべての設定は無視され、記録されません。
    6. Windows Phone タブのすべての設定は無視され、記録されません。
  4. 必要に応じてスプラッシュ画像およびアイコンを config.xml ファイルに追加します。

    スプラッシュ画像は Cordova プラットフォームの機能ですが、この機能にはプラグインが必要になります。そのため、<plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>config.xml ファイルに追加されます。

    移行ツールは、スプラッシュ画像およびアイコンが対応するフォルダーにあり、クライアントアプリの開発 で示されるような正しい名前を持つ場合にスプラッシュおよびアイコンタグを追加します。画像がそれらのパスに正しい名前で見つからない場合、スプラッシュまたはアイコンタグは追加されません。スプラッシュ画像およびアイコンが必要な場合でパスと名前が一致しない場合、移行後にスプラッシュおよびアイコンタグを手動で config.xml に追加できます。

    注記

    アイコンまたはスプラッシュ画像がない場合、Cordova はそれらのデフォルト画像を使用します。

    1. iOS スプラッシュ画像を追加します。

      iOS スプラッシュ画像は www/res/splash/ios/ フォルダーになければなりません。iOS ではスプラッシュ画像に正しい解像度が設定されている必要があります。画像の解像度が正しくないと、それが使用されないだけでなく、Cordova デフォルト画像も使用されません。そのため、アプリが一部のデバイスのスケール (scaled) モードで 320x480 の解像度で実行される可能性があります。以下の一覧には、正しい名前と解像度が設定されている必要なすべてのスプラッシュ画像が表示されています。

          <splash src="www/res/splash/ios/Default-568h@2x.png" width="640" height="1136" />
          <splash src="www/res/splash/ios/Default-667h.png" width="750" height="1334" />
          <splash src="www/res/splash/ios/Default-736h.png" width="1242" height="2208" />
          <splash src="www/res/splash/ios/Default-Landscape-736h.png" width="2208" height="1242" />
          <splash src="www/res/splash/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536" />
          <splash src="www/res/splash/ios/Default-Landscape.png" width="1024" height="768" />
          <splash src="www/res/splash/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048" />
          <splash src="www/res/splash/ios/Default-Portrait.png" width="768" height="1024" />
          <splash src="www/res/splash/ios/Default@2x.png" width="640" height="960" />
          <splash src="www/res/splash/ios/Default.png" width="320" height="480" />
    2. Android スプラッシュ画像を追加します。

      Android スプラッシュ画像は www/res/splash/android/ ディレクトリーになければなりません。名前が splash.png のスプラッシュ画像を密度 (density) を設定せずに指定する場合、その画像はすべての密度で使用されます。以下の一覧には、移行ツールが処理できるすべての画像が表示されています。

          <splash src="www/res/splash/android/splash.png"      />
          <splash src="www/res/splash/android/splash-ldpi.png"      density="ldpi" />
          <splash src="www/res/splash/android/splash-mdpi.png"      density="mdpi" />
          <splash src="www/res/splash/android/splash-hdpi.png"      density="hdpi" />
          <splash src="www/res/splash/android/splash-xhdpi.png"     density="xhdpi" />
    3. iOS アイコンを追加します。

      iOS アイコンは www/res/icons/ios/ フォルダーになければなりません。アイコンには正しい解像度が設定されている必要があります。以下の一覧には、移行ツールが処理できる正しい名前と解像度が設定された必要なすべてのアイコンが表示されています。

          <icon src="www/res/icons/ios/Icon-40.png" width="40" height="40" />
          <icon src="www/res/icons/ios/Icon-40@2x.png" width="80" height="80" />
          <icon src="www/res/icons/ios/Icon-50.png" width="50" height="50" />
          <icon src="www/res/icons/ios/Icon-50@2x.png" width="100" height="100" />
          <icon src="www/res/icons/ios/Icon-60.png" width="60" height="60" />
          <icon src="www/res/icons/ios/Icon-60@2x.png" width="120" height="120" />
          <icon src="www/res/icons/ios/Icon-60@3x.png" width="180" height="180" />
          <icon src="www/res/icons/ios/Icon-72.png" width="72" height="72" />
          <icon src="www/res/icons/ios/Icon@2x~ipad.png" width="144" height="144" />
          <icon src="www/res/icons/ios/Icon-76.png" width="76" height="76" />
          <icon src="www/res/icons/ios/Icon-76@2x.png" width="152" height="152" />
          <icon src="www/res/icons/ios/Icon-small.png" width="29" height="29" />
          <icon src="www/res/icons/ios/Icon-small@2x.png" width="58" height="58" />
          <icon src="www/res/icons/ios/Icon.png" width="57" height="57" />
          <icon src="www/res/icons/ios/Icon@2x.png" width="114" height="114" />
    4. Android アイコンを追加します。

      Android アイコンは www/res/icons/android/ ディレクトリーになければなりません。以下の一覧には、移行ツールが処理できるすべてのアイコンファイルが表示されます。

          <icon src="www/res/icons/android/icon-ldpi.png" density="ldpi" />
          <icon src="www/res/icons/android/icon-mdpi.png" density="mdpi" />
          <icon src="www/res/icons/android/icon-hdpi.png" density="hdpi" />
          <icon src="www/res/icons/android/icon-xhdpi.png" density="xhdpi" />