Cordova-quick-guide

Cordova-概要

*Cordova* は、HTML、CSS、およびJavaScriptを使用してハイブリッドモバイルアプリケーションを構築するためのプラットフォームです。

公式文書は私たちにコルドバの定義を与えます-

'_「Apache Cordovaは、オープンソースのモバイル開発フレームワークです。 クロスプラットフォーム開発にHTML5、CSS3、JavaScriptなどの標準Webテクノロジーを使用できるため、各モバイルプラットフォームのネイティブ開発言語を回避できます。 アプリケーションは、各プラットフォームを対象としたラッパー内で実行され、標準に準拠したAPIバインディングに依存して、各デバイスのセンサー、データ、およびネットワークステータスにアクセスします。」_

Cordovaの機能

コルドバの機能を簡単に理解しましょう。

コマンドラインインターフェイス（Cordova CLI）

このツールは、プロジェクトの開始、さまざまなプラットフォーム用のプロセスの構築、プラグインのインストール、および開発プロセスを容易にするその他の便利なものの多くに使用できます。 後続の章でコマンドラインインターフェイスの使用方法を学習します。

Cordovaコアコンポーネント

Cordovaは、すべてのモバイルアプリケーションに必要なコアコンポーネントのセットを提供します。 これらのコンポーネントはアプリのベースを作成するために使用されるため、独自のロジックを実装するためにより多くの時間を費やすことができます。

Cordovaプラグイン

Cordovaは、ネイティブモバイル機能をJavaScriptアプリに実装するために使用されるAPIを提供します。

ライセンス

Cordovaは、Apache License、Version 2.0の下でライセンスされています。 ApacheおよびApache featherロゴは、Apache Software Foundationの商標です。

Cordovaの利点

次に、Cordovaの利点について説明します。

• Cordovaは、ハイブリッドモバイルアプリを構築するための1つのプラットフォームを提供するため、IOS、Android、Windows Phone、Amazon-fireos、ブラックベリー、Firefox OS、Ubuntu、tizienなどのさまざまなモバイルプラットフォームで使用される1つのアプリを開発できます。
• Cordovaが開発時間を節約できるように、ハイブリッドアプリの開発はネイティブアプリの開発よりも高速です。
• Cordovaで作業するときにJavaScriptを使用しているため、プラットフォーム固有のプログラミング言語を学ぶ必要はありません。
• Cordovaで使用できるコミュニティアドオンは多数ありますが、これらにはいくつかのライブラリとフレームワークがあり、それらを操作するために最適化されています。

Cordovaの制限

Cordovaの制限は次のとおりです。

• ハイブリッドアプリはネイティブアプリよりも遅いため、大量のデータと機能を必要とする大規模アプリにCordovaを使用するのは最適ではありません。
• ブラウザー間の互換性により、多くの問題が発生する可能性があります。 多くの場合、さまざまなプラットフォーム用のアプリを構築しているため、多数のデバイスとオペレーティングシステムをカバーする必要があるため、テストと最適化に時間がかかる可能性があります。
• 一部のプラグインには、さまざまなデバイスやプラットフォームとの互換性の問題があります。 CordovaでまだサポートされていないネイティブAPIもあります。

Cordova-環境設定

この章では、Cordovaの環境設定について理解します。 セットアップを開始するには、最初にいくつかのコンポーネントをインストールする必要があります。 次の表にコンポーネントをリストします。

S.No	Software & Description
1	NodeJS and NPM NodeJSは、Cordova開発に必要なプラットフォームです。 詳細については、リンク：/nodejs/nodejs_environment_setup [NodeJS Environment Setup]を確認してください。
2	Android SDK Androidプラットフォームの場合、マシンにAndroid SDKをインストールする必要があります。 詳細については、リンク：/android/android_environment_setup [Android Environment Setup]をご覧ください。
3	XCode iOSプラットフォームの場合、xCodeをマシンにインストールする必要があります。 詳細については、リンク：/ios/ios_environment_setup [iOS Environment Setup]をご覧ください。

Cordovaのインストール

始める前に、チュートリアルでWindowsの*コマンドプロンプト*を使用することを知っておく必要があります。

ステップ1-gitのインストール

gitを使用しない場合でも、Cordovaはgitをバックグラウンドプロセスに使用しているため、gitをインストールする必要があります。 git https://git-scm.com/downloads [こちら]をダウンロードできます。 gitをインストールしたら、環境変数を開きます。

• コンピューターを右クリック
• プロパティ
• 高度なシステム設定
• 環境変数
• システム変数
• Edit

• 変数値フィールド*の最後に以下をコピーします。 これはgitインストールのデフォルトパスです。 別のパスにインストールした場合は、以下のサンプルコードの代わりにそれを使用する必要があります。

;C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\cmd

これで、コマンドプロンプトに git と入力して、インストールが成功したかどうかをテストできます。

ステップ2-Cordovaのインストール

このステップでは、Cordovaモジュールをグローバルにダウンロードしてインストールします。 コマンドプロンプトを開き、次を実行します-

C:\Users\username>npm install -g cordova

あなたが実行することにより、インストールされたバージョンを確認することができます-

C:\Users\username>cordova -v

これが、WindowsオペレーティングシステムでCordovaアプリの開発を開始するために必要なすべてです。 次のチュートリアルでは、最初のアプリケーションを作成する方法を示します。

Cordova-最初のアプリケーション

Cordovaをインストールし、その環境をセットアップする方法を理解しました。 すべての準備が整ったら、最初のハイブリッドCordovaアプリケーションを作成できます。

ステップ1-アプリの作成

コマンドプロンプトでアプリをインストールするディレクトリを開きます。 デスクトップで作成します。

C:\Users\username\Desktop>cordova
   create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject は、アプリが作成されるディレクトリ名です。
• io.cordova.hellocordova は、デフォルトの逆ドメイン値です。 可能であれば、独自のドメイン値を使用する必要があります。
• CordovaApp はアプリのタイトルです。

ステップ2-プラットフォームの追加

コマンドプロンプトでプロジェクトディレクトリを開く必要があります。 この例では、 CordovaProject です。 必要なプラットフォームのみを選択する必要があります。 指定されたプラットフォームを使用できるようにするには、特定のプラットフォームSDKをインストールする必要があります。 Windowsで開発しているため、次のプラットフォームを使用できます。 Android SDKは既にインストールされているため、このチュートリアルではAndroidプラットフォームのみをインストールします。

C:\Users\username\Desktop\CordovaProject>cordova platform add android

Windows OSで使用できる他のプラットフォームがあります。

C:\Users\username\Desktop\CordovaProject>cordova platform add wp8

C:\Users\username\Desktop\CordovaProject>cordova platform add amazon-fireos

C:\Users\username\Desktop\CordovaProject>cordova platform add windows

C:\Users\username\Desktop\CordovaProject>cordova platform add blackberry10

C:\Users\username\Desktop\CordovaProject>cordova platform add firefoxos

Macで開発している場合は、次を使用できます-

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

以下を使用して、プロジェクトからプラットフォームを削除することもできます-

C:\Users\username\Desktop\CordovaProject>cordova platform rm android

ステップ3-ビルドと実行

この手順では、指定したプラットフォーム用のアプリをビルドして、モバイルデバイスまたはエミュレーターで実行できるようにします。

C:\Users\username\Desktop\CordovaProject>cordova build android

これでアプリを実行できます。 デフォルトのエミュレータを使用している場合は、使用する必要があります-

C:\Users\username\Desktop\CordovaProject>cordova emulate android

あなたが外部エミュレータまたは実際のデバイスを使用する場合は、使用する必要があります-

C:\Users\username\Desktop\CordovaProject>cordova run android

注-* Genymotion Androidエミュレータ*を使用します。これは、デフォルトのエミュレータよりも高速で応答性が高いためです。 エミュレーターはhttps://www.genymotion.com/#!/store [こちら]にあります。 オプションから* USBデバッグ*を有効にし、USBケーブルを介してコンピューターに接続することにより、実際のデバイスをテストに使用することもできます。 一部のデバイスでは、USBドライバーもインストールする必要があります。

アプリを実行すると、指定したプラットフォームにインストールされます。 すべてがエラーなしで終了した場合、出力にはアプリのデフォルトの開始画面が表示されます。

Cordovaアプリ

次のチュートリアルでは、Cordovaアプリケーションの構成方法を示します。

Cordova-config.xmlファイル

*config.xml* ファイルは、アプリの構成を変更できる場所です。 前回のチュートリアルでアプリを作成したときに、逆ドメインと名前を設定しました。 値は *config.xml* ファイルで変更できます。 アプリを作成すると、デフォルトの設定ファイルも作成されます。

Configure XML Default

次の表は、 config.xml の構成要素について説明しています。

config.xml構成テーブル

S.No	Element & Details
1	widget アプリの作成時に指定したアプリの逆ドメイン値。
2	name アプリの作成時に指定したアプリの名前。
3	description アプリの説明。
4	author アプリの作成者。
5	content アプリの開始ページ。 www ディレクトリ内に配置されます。
6	plugin 現在インストールされているプラ​​グイン。
7	access 外部ドメインへのアクセスを制御するために使用されます。 デフォルトの origin 値は＆ast;に設定されています。つまり、すべてのドメインへのアクセスが許可されます。 この値は、情報を保護するために特定のURLを開くことを許可しません。
8	allow-intent 特定のURLがアプリに開くように要求することを許可します。 たとえば、* <allow-intent href = "tel：*"/> *は、tel：リンクがダイヤラーを開くことを許可します。
9	platform アプリを構築するためのプラットフォーム。

Cordova-ストレージ

クライアントアプリにデータを保存するために利用可能なストレージAPIを使用できます。 これにより、ユーザーがオフラインのときにアプリを使用できるようになり、パフォーマンスも向上します。 このチュートリアルは初心者向けであるため、*ローカルストレージ*の使用方法を示します。 後のチュートリアルの1つで、使用できる他のプラグインを紹介します。

ステップ1-ボタンの追加

*indexl* ファイルに4つのボタンを作成します。 ボタンは *div class = "app"* 要素内に配置されます。

<button id = "setLocalStorage">SET LOCAL STORAGE</button>
<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
<button id = "getLocalStorageByKey">GET BY KEY</button>

それは次の画面を生成します-

ローカルストレージボタン

手順2-イベントリスナーの追加

Cordovaセキュリティポリシーはインラインイベントを許可しないため、index.jsファイル内にイベントリスナーを追加します。 また、後で使用する localStorage 変数に window.localStorage を割り当てます。

document.getElementById("setLocalStorage").addEventListener("click", setLocalStorage);
document.getElementById("showLocalStorage").addEventListener("click", showLocalStorage);
document.getElementById("removeProjectFromLocalStorage").addEventListener
   ("click", removeProjectFromLocalStorage);
document.getElementById("getLocalStorageByKey").addEventListener
   ("click", getLocalStorageByKey);
var localStorage = window.localStorage;

ステップ3-関数の作成

次に、ボタンがタップされたときに呼び出される関数を作成する必要があります。 最初の関数は、ローカルストレージにデータを追加するために使用されます。

function setLocalStorage() {
   localStorage.setItem("Name", "John");
   localStorage.setItem("Job", "Developer");
   localStorage.setItem("Project", "Cordova Project");
}

次は、コンソールに追加したデータを記録します。

function showLocalStorage() {
   console.log(localStorage.getItem("Name"));
   console.log(localStorage.getItem("Job"));
   console.log(localStorage.getItem("Project"));
}

[ローカルストレージの設定]ボタンをタップすると、3つのアイテムがローカルストレージに設定されます。 その後、 SHOW LOCAL STORAGE をタップすると、コンソールは必要な項目を記録します。

ローカルストレージログ

ローカルストレージからプロジェクトを削除する関数を作成しましょう。

function removeProjectFromLocalStorage() {
   localStorage.removeItem("Project");
}

プロジェクトを削除した後に[ローカルストレージの表示]ボタンをクリックすると、プロジェクトフィールドの null 値が出力に表示されます。

Show Local Storage 2

また、インデックスとして引数を取り、対応するインデックス値を持つ要素を返す* key（）*メソッドを使用して、ローカルストレージ要素を取得することもできます。

function getLocalStorageByKey() {
   console.log(localStorage.key(0));
}

*GET BY KEY* ボタンをタップすると、次の出力が表示されます。

ローカルストレージキーの表示

NOTE

• key（）メソッドを使用すると、引数 *0 を渡して最初のオブジェクトを取得した場合でも、コンソールは name ではなく job を記録します。 これは、ローカルストレージがアルファベット順にデータを保存しているためです。

次の表に、使用可能なすべてのローカルストレージメソッドを示します。

S.No	Methods & Details
1	setItem(key, value) アイテムをローカルストレージに設定するために使用されます。
2	getItem(key) ローカルストレージからアイテムを取得するために使用されます。
3	removeItem(key) ローカルストレージからアイテムを削除するために使用されます。
4	key(index) ローカルストレージ内のアイテムの index を使用してアイテムを取得するために使用されます。 これは、アイテムをアルファベット順に並べ替えるのに役立ちます。
5	length() ローカルストレージに存在するアイテムの数を取得するために使用されます。
6	clear() ローカルストレージからすべてのキー/値ペアを削除するために使用されます。

コルドバ-イベント

Cordovaプロジェクトで使用できるさまざまなイベントがあります。 次の表に、使用可能なイベントを示します。

S.No	Events & Details
1	deviceReady このイベントは、Cordovaが完全にロードされるとトリガーされます。 これにより、すべてがロードされる前にCordova関数が呼び出されないようにすることができます。
2	pause このイベントは、アプリがバックグラウンドになったときにトリガーされます。
3	resume このイベントは、アプリがバックグラウンドから返されたときにトリガーされます。
4	backbutton このイベントは、戻るボタンが押されたときにトリガーされます。
5	menubutton このイベントは、メニューボタンが押されるとトリガーされます。
6	searchbutton このイベントは、Androidの検索ボタンが押されたときにトリガーされます。
7	startcallbutton このイベントは、コール開始ボタンが押されたときにトリガーされます。
8	endcallbutton このイベントは、通話終了ボタンが押されたときにトリガーされます。
9	volumedownbutton このイベントは、音量を下げるボタンが押されるとトリガーされます。
10	volumeupbutton ボリュームアップボタンが押されると、このイベントがトリガーされます。

イベントを使用する

すべてのイベントはほぼ同じ方法で使用されます。 * Cordovaコンテンツセキュリティポリシー*はインラインJavascriptを許可しないため、* inlineイベント呼び出し*ではなく、 js に常にイベントリスナーを追加する必要があります。 イベントをインラインで呼び出そうとすると、次のエラーが表示されます。

イベントエラー

イベントを操作する正しい方法は、 addEventListener を使用することです。 例を通じて、 volumeupbutton イベントの使用方法を理解します。

document.addEventListener("volumeupbutton", callbackFunction, false);
function callbackFunction() {
   alert('Volume Up Button is pressed!');
}

• 音量アップ*ボタンを押すと、画面に次のアラートが表示されます。

イベント音量アップ

戻るボタンの処理

前の画面に戻るなどのアプリの機能には、Androidの戻るボタンを使用する必要があります。 独自の機能を実装するには、最初にアプリの終了に使用される戻るボタンを無効にする必要があります。

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
   e.preventDefault();
   alert('Back Button is Pressed!');
}

これで、Androidのネイティブの戻るボタンを押すと、アプリを終了する代わりに画面にアラートが表示されます。 これは、* e.preventDefault（）*コマンドを使用して行われます。

イベント戻るボタン

Cordova-戻るボタン

戻るボタンの処理

通常、前の画面に戻るなどのアプリの機能のためにAndroidの戻るボタンを使用します。 独自の機能を実装できるようにするには、最初に戻るボタンが押されたときにアプリの終了を無効にする必要があります。

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
   e.preventDefault();
   alert('Back Button is Pressed!');
}

これで、Androidのネイティブの戻るボタンを押すと、アプリを終了する代わりに画面にアラートが表示されます。 これは、* e.preventDefault（）*を使用して行われます。

イベント戻るボタン

コルドバ-プラグマン

Cordova Plugmanは、プラグインをインストールおよび管理するための便利なコマンドラインツールです。 アプリを特定のプラットフォームで実行する必要がある場合は、 plugman を使用する必要があります。 クロスプラットフォーム*アプリを作成する場合は、さまざまなプラットフォームのプラグインを変更する *cordova-cli を使用する必要があります。

ステップ1-Plugmanのインストール

• コマンドプロンプト*ウィンドウを開き、次のコードスニペットを実行してplugmanをインストールします。

C:\Users\username\Desktop\CordovaProject>npm install -g plugman

ステップ2-プラグインのインストール

plugmanを使用してCordovaプラグインをインストールする方法を理解するために、例としてCameraプラグインを使用します。

C:\Users\username\Desktop\CordovaProject>plugman
   install --platform android --project platforms\android
   --plugin cordova-plugin-camera
   plugman uninstall --platform android --project platforms\android
   --plugin cordova-plugin-camera

上記の3つのパラメーターを考慮する必要があります。

• *-platform *-使用しているプラ​​ットフォーム（android、ios、amazon-fireos、wp8、blackberry10）。
• -project *-プロジェクトがビルドされるパス。 この例では、 *platforms \ android ディレクトリです。
• *-plugin *-インストールするプラグイン。

有効なパラメーターを設定すると、コマンドプロンプトウィンドウに次の出力が表示されます。

Plugman Install CMD Output

追加の方法

同様の方法で uninstall メソッドを使用できます。

C:\Users\username\Desktop\CordovaProject>plugman uninstall
   --platform android --project platforms\android --plugin cordova-plugin-camera

• コマンドプロンプト*コンソールには、次の出力が表示されます。

Plugman Uninstall CMD Output

Plugmanは、使用できる追加のメソッドをいくつか提供します。 メソッドは次の表にリストされています。

S.No	Method & Details
1	install Cordovaプラグインのインストールに使用されます。
2	uninstall Cordovaプラグインのアンインストールに使用されます。
3	fetch Cordovaプラグインを特定の場所にコピーするために使用されます。
4	prepare JSモジュールのサポートに役立つ構成ファイルの更新に使用されます。
5	adduser ユーザーアカウントをレジストリに追加するために使用されます。
6	publish レジストリにプラグインを公開するために使用されます。
7	unpublish レジストリからプラグインを非公開にするために使用されます。
8	search レジストリ内のプラグインを検索するために使用されます。
9	config レジストリ設定の構成に使用されます。
10	create カスタムプラグインの作成に使用されます。
11	platform カスタム作成のプラグインからプラットフォームを追加または削除するために使用されます。

追加コマンド

立ち往生している場合は、いつでも plugman -help コマンドを使用できます。 バージョンは、 plugman -v を使用して確認できます。 プラグインを検索するには、 plugman search を使用し、最後に plugman config set registry コマンドを使用してプラグインレジストリを変更できます。

NOTE

Cordovaはクロスプラットフォーム開発に使用されるため、以降の章では、プラグインのインストールに Plugman ではなく Cordova CLI を使用します。

Cordova-バッテリーの状態

このCordovaプラグインは、デバイスのバッテリーステータスの監視に使用されます。 プラグインは、デバイスのバッテリーに発生するすべての変更を監視します。

手順1-バッテリープラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*ウィンドウを開き、次のコードを実行する必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-pluginbattery-status

ステップ2-イベントリスナーを追加する

*index.js* ファイルを開くと、 *onDeviceReady* 関数が見つかります。 これは、イベントリスナーを追加する場所です。

window.addEventListener("batterystatus", onBatteryStatus, false);

ステップ3-コールバック関数を作成する

*index.js* ファイルの下部に *onBatteryStatus* コールバック関数を作成します。

function onBatteryStatus(info) {
   alert("BATTERY STATUS:  Level: " + info.level + " isPlugged: " + info.isPlugged);
}

アプリを実行すると、アラートがトリガーされます。 現時点では、バッテリーは100％充電されています。

ステータスが変更されると、新しいアラートが表示されます。 バッテリーの状態は、バッテリーが99％充電されたことを示しています。

バッテリー状態の変更

デバイスを充電器に接続すると、新しいアラートは isPlugged 値が true に変更されたことを示します。

バッテリー状態のプラグイン

追加イベント

このプラグインは、 batterystatus イベントに加えて2つの追加イベントを提供します。 これらのイベントは、 batterystatus イベントと同じ方法で使用できます。

S.No	Event & Details
1	batterylow バッテリーの充電率が低い値に達すると、イベントがトリガーされます。 この値はデバイスによって異なります。
2	batterycritical バッテリーの充電率が限界値に達すると、イベントがトリガーされます。 この値はデバイスによって異なります。

Cordova-カメラ

このプラグインは、写真の撮影や画像ギャラリーのファイルの使用に使用されます。

手順1-カメラプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*ウィンドウで次のコードを実行します。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

ステップ2-ボタンと画像の追加

次に、カメラを呼び出すためのボタンと、撮影した画像が表示される img を作成します。 これは、 div class = "app" 要素内の indexl に追加されます。

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

手順3-イベントリスナーの追加

イベントリスナーが onDeviceReady 関数内に追加され、使用を開始する前にCordovaが確実にロードされます。

document.getElementById("cameraTakePicture").addEventListener
   ("click", cameraTakePicture);

ステップ4-関数の追加（写真を撮る）

イベントリスナーへのコールバックとして渡される cameraTakePicture 関数を作成します。 ボタンがタップされると発生します。 この関数内で、プラグインAPIによって提供される navigator.camera グローバルオブジェクトを呼び出します。 写真の撮影が成功した場合、データは onSuccess コールバック関数に送信されます。そうでない場合、エラーメッセージ付きのアラートが表示されます。 このコードを index.js の下部に配置します。

function cameraTakePicture() {
   navigator.camera.getPicture(onSuccess, onFail, {
      quality: 50,
      destinationType: Camera.DestinationType.DATA_URL
   });

   function onSuccess(imageData) {
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }
}

アプリを実行してボタンを押すと、ネイティブカメラがトリガーされます。

Cordova Camera Take Picture

写真を撮って保存すると、画面に表示されます。

Cordovaカメラ表示画像

同じ手順を使用して、ローカルファイルシステムからイメージを取得できます。 唯一の違いは、最後の手順で作成された関数です。 sourceType オプションパラメータが追加されていることがわかります。

ステップ1 B

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincamera

ステップ2 B

<button id = "cameraGetPicture">GET PICTURE</button>

ステップ3 B

document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

ステップ4 B

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

2番目のボタンを押すと、カメラの代わりにファイルシステムが開くので、表示する画像を選択できます。

Cordovaカメラファイルシステム

このプラグインは、カスタマイズのための多くのオプションパラメータを提供します。

S.No	Parameter & Details
1	quality 0〜100の範囲の画像の品質。 デフォルトは50です。
2	destinationType DATA_URL* または *0* base64エンコード文字列を返します。 *FILE_URI* または *1* 画像ファイルURIを返します。 *NATIVE_URI* または *2* 画像のネイティブURIを返します。
3	sourceType PHOTOLIBRARY* または *0* 写真ライブラリを開きます。 *CAMERA* または *1* ネイティブカメラを開きます。 *SAVEDPHOTOALBUM* または *2* 保存したフォトアルバムを開きます。
4	allowEdit 画像編集を許可します。
5	encodingType JPEG* または *0* JPEGエンコード画像を返します。 *PNG* または *1* PNGエンコードされた画像を返します。
6	targetWidth ピクセル単位の画像スケーリング幅。
7	targetHeight ピクセル単位の画像スケーリングの高さ。
8	mediaType PICTURE* または *0* 画像の選択のみを許可します。 *VIDEO* または *1* ビデオの選択のみを許可します。 *ALLMEDIA* または *2* すべてのメディアタイプを選択できます。
9	correctOrientation 画像の向きを修正するために使用されます。
10	saveToPhotoAlbum 画像をフォトアルバムに保存するために使用します。
11	popoverOptions IOSでポップオーバーの場所を設定するために使用されます。
12	cameraDirection FRONT* または *0* フロントカメラ。 *BACK* または *1* バックカメラ。 *ALLMEDIA*

コルドバ-連絡先

このプラグインは、デバイスの連絡先データベースにアクセスするために使用されます。 このチュートリアルでは、連絡先を作成、クエリ、削除する方法を示します。

手順1-連絡先プラグインをインストールする

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugincontacts

ステップ2-ボタンの追加

このボタンは、 createContact 関数の呼び出しに使用されます。 indexl ファイルの div class = "app" に配置します。

<button id = "createContact">ADD CONTACT</button>
<button id = "findContact">FIND CONTACT</button>
<button id = "deleteContact">DELETE CONTACT</button>

手順2-イベントリスナーの追加

*index.js* を開き、次のコードスニペットを *onDeviceReady* 関数にコピーします。

document.getElementById("createContact").addEventListener("click", createContact);
document.getElementById("findContact").addEventListener("click", findContact);
document.getElementById("deleteContact").addEventListener("click", deleteContact);

ステップ3A-コールバック関数（navigator.contacts.create）

現在、デバイスには連絡先が保存されていません。

Cordova Contact Empty

最初のコールバック関数は、新しい連絡先データを指定できる navigator.contacts.create メソッドを呼び出します。 これにより、連絡先が作成され、 myContact 変数に割り当てられますが、デバイスには保存されません。 保存するには、 save メソッドを呼び出して、成功およびエラーコールバック関数を作成する必要があります。

function createContact() {
   var myContact = navigator.contacts.create({"displayName": "Test User"});
   myContact.save(contactSuccess, contactError);

   function contactSuccess() {
      alert("Contact is saved!");
   }

   function contactError(message) {
      alert('Failed because: ' + message);
   }

}

*ADD CONTACT* ボタンをクリックすると、新しい連絡先がデバイスの連絡先リストに保存されます。

Cordova Contact Create

ステップ3B-コールバック関数（navigator.contacts.find）

2番目のコールバック関数は、すべての連絡先を照会します。 navigator.contacts.find メソッドを使用します。 optionsオブジェクトには、検索フィルターを指定するために使用されるフィルターパラメーターがあります。 デバイスからすべての連絡先を返すため、 multiple = true が使用されます。 連絡先を保存するときに使用したため、 displayName で連絡先を検索する field キー。

オプションを設定したら、 find メソッドを使用して連絡先を照会します。 見つかった連絡先ごとにアラートメッセージがトリガーされます。

function findContacts() {
   var options = new ContactFindOptions();
   options.filter = "";
   options.multiple = true;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      for (var i = 0; i < contacts.length; i++) {
         alert("Display Name = " + contacts[i].displayName);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }

}

*FIND CONTACT* ボタンを押すと、連絡先が1つしか保存されていないため、1つのアラートポップアップがトリガーされます。

Cordova Contacts Find

ステップ3C-コールバック関数（削除）

この手順では、findメソッドを再度使用しますが、今回はさまざまなオプションを設定します。 options.filter は、削除する必要がある Test User を検索するように設定されています。 contactfindSuccess コールバック関数が必要な連絡先を返した後、独自の成功およびエラーコールバックを必要とする remove メソッドを使用して削除します。

function deleteContact() {
   var options = new ContactFindOptions();
   options.filter = "Test User";
   options.multiple = false;
   fields = ["displayName"];
   navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);

   function contactfindSuccess(contacts) {
      var contact = contacts[0];
      contact.remove(contactRemoveSuccess, contactRemoveError);

      function contactRemoveSuccess(contact) {
         alert("Contact Deleted");
      }

      function contactRemoveError(message) {
         alert('Failed because: ' + message);
      }
   }

   function contactfindError(message) {
      alert('Failed because: ' + message);
   }

}

これで、デバイスに保存される連絡先は1つだけになりました。 削除プロセスを示すために、手動でもう1つ追加します。

Cordova Contacts Multiple

ここで、[ DELETE CONTACT ]ボタンをクリックして、 Test User を削除します。 連絡先リストを再度確認すると、 Test User がもう存在しないことがわかります。

Cordova連絡先が削除されました

Cordova-デバイス

このプラグインは、ユーザーのデバイスに関する情報を取得するために使用されます。

手順1-デバイスプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*で次のスニペットを実行する必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device

ステップ2-ボタンの追加

このプラグインは、他のCordovaプラグインと同じ方法で使用します。 indexl ファイルにボタンを追加しましょう。 このボタンは、デバイスに関する情報を取得するために使用されます。

<button id = "cordovaDevice">CORDOVA DEVICE</button>

手順3-イベントリスナーの追加

Cordovaプラグインは deviceready イベントの後に利用できるため、 index.js の onDeviceReady 関数内にイベントリスナーを配置します。

document.getElementById("cordovaDevice").addEventListener("click", cordovaDevice);

ステップ4-関数の作成

次の関数は、プラグインが提供するすべての可能性を使用する方法を示します。 index.js に配置します。

function cordovaDevice() {
   alert("Cordova version: " + device.cordova + "\n" +
      "Device model: " + device.model + "\n" +
      "Device platform: " + device.platform + "\n" +
      "Device UUID: " + device.uuid + "\n" +
      "Device version: " + device.version);
}

*CORDOVA DEVICE* ボタンをクリックすると、アラートにCordovaバージョン、デバイスモデル、プラットフォーム、UUID、およびデバイスバージョンが表示されます。

Cordovaデバイスアラート

Cordova-加速度計

Accelerometerプラグインは、 device-motion とも呼ばれます。 デバイスの動きを3次元で追跡するために使用されます。

手順1-加速度計プラグインのインストール

*cordova-CLI* を使用してこのプラグインをインストールします。 *コマンドプロンプト*ウィンドウに次のコードを入力します。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugindevice-motion

ステップ2-ボタンを追加する

このステップでは、 indexl ファイルに2つのボタンを追加します。 1つは現在の加速度を取得するために使用され、もう1つは加速度の変化を監視します。

<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>

手順3-イベントリスナーの追加

ボタンのイベントリスナーを index.js 内の onDeviceReady 関数に追加しましょう。

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener(
   "click", watchAcceleration);

ステップ4-関数の作成

次に、2つの関数を作成します。 最初の関数は現在の加速度を取得するために使用され、2番目の関数は加速度を監視し、3秒ごとに加速度に関する情報がトリガーされます。 また、 setTimeout 関数でラップされた clearWatch 関数を追加して、指定された時間枠の後に加速の監視を停止します。 frequency パラメーターは、3秒ごとにコールバック関数をトリガーするために使用されます。

function getAcceleration() {
   navigator.accelerometer.getCurrentAcceleration(
      accelerometerSuccess, accelerometerError);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');
   };

   function accelerometerError() {
      alert('onError!');
   };
}

function watchAcceleration() {
   var accelerometerOptions = {
      frequency: 3000
   }
   var watchID = navigator.accelerometer.watchAcceleration(
      accelerometerSuccess, accelerometerError, accelerometerOptions);

   function accelerometerSuccess(acceleration) {
      alert('Acceleration X: ' + acceleration.x + '\n' +
         'Acceleration Y: ' + acceleration.y + '\n' +
         'Acceleration Z: ' + acceleration.z + '\n' +
         'Timestamp: '      + acceleration.timestamp + '\n');

      setTimeout(function() {
         navigator.accelerometer.clearWatch(watchID);
      }, 10000);
   };

   function accelerometerError() {
      alert('onError!');
   };

}

*GET ACCELERATION* ボタンを押すと、現在の加速度値が取得されます。 *WATCH ACCELERATION* ボタンを押すと、アラートが3秒ごとにトリガーされます。 3番目のアラートが表示された後、 *clearWatch* 関数が呼び出され、タイムアウトを10000ミリ秒に設定しているため、アラートはこれ以上表示されません。

Cordova Acceleration

Cordova-デバイスの向き

コンパスは、地理的な北の基点に対する方向を示すために使用されます。

手順1-デバイスの向きのプラグインをインストールする

• コマンドプロンプト*ウィンドウを開き、次を実行します。

C:\Users\username\Desktop\CordovaProject>cordova plugin
   add cordova-plugindevice-orientation

ステップ2-ボタンを追加する

このプラグインは acceleration プラグインに似ています。 indexl に2つのボタンを作成します。

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

手順3-イベントリスナーの追加

次に、 index.js の onDeviceReady 関数内に*イベントリスナー*を追加します。

document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

ステップ4-関数の作成

2つの関数を作成します。最初の関数は現在の加速度を生成し、もう1つの関数は方向の変化をチェックします。 frequency オプションを再び使用して、3秒ごとに発生する変更を監視していることがわかります。

function getOrientation() {
   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

function watchOrientation(){
   var compassOptions = {
      frequency: 3000
   }
   var watchID = navigator.compass.watchHeading(compassSuccess,
      compassError, compassOptions);

   function compassSuccess(heading) {
      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {
         navigator.compass.clearWatch(watchID);
      }, 10000);
   };

   function compassError(error) {
      alert('CompassError: ' + error.code);
   };
}

コンパスプラグインは加速プラグインとほとんど同じなので、今回はエラーコードを表示します。 一部のデバイスには、コンパスが機能するために必要な磁気センサーがありません。 デバイスにそれがない場合、次のエラーが表示されます。

Cordova Compass Error

Cordova-ダイアログ

Cordova Dialogsプラグインは、プラットフォームのネイティブダイアログUI要素を呼び出します。

ステップ1-ダイアログのインストール

このコマンドをインストールするには、*コマンドプロンプト*ウィンドウに次のコマンドを入力します。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

ステップ2-ボタンを追加する

次に、 indexl を開いて、すべてのタイプのダイアログに1つずつ、4つのボタンを追加します。

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>

手順3-イベントリスナーの追加

次に、 index.js の onDeviceReady 関数内にイベントリスナーを追加します。 リスナーは、対応するボタンがクリックされるとコールバック関数を呼び出します。

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);

ステップ4A-アラート機能の作成

4つのイベントリスナーを追加したので、 index.js でそれらすべてのコールバック関数を作成します。 最初のものは dialogAlert です。

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
   navigator.notification.alert(message, alertCallback, title, buttonName);

   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
}

*ALERT* ボタンをクリックすると、アラートダイアログボックスが表示されます。

Cordovaアラートダイアログ

ダイアログボタンをクリックすると、次の出力がコンソールに表示されます。

Cordova Alert DIalog Dismissed

ステップ4B-確認機能の作成

作成する必要がある2番目の関数は、 dialogConfirm 関数です。

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }

}

*CONFIRM* ボタンを押すと、新しいダイアログがポップアップ表示されます。

Cordovaダイアログ確認

[はい]ボタンをクリックして質問に答えます。 次の出力がコンソールに表示されます。

Cordovaプラットフォーム確認の却下

ステップ4C-プロンプト機能の作成

3番目の関数は dialogPrompt 関数です。 これにより、ユーザーはテキストをダイアログ入力要素に入力できます。

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
   navigator.notification.prompt(message, promptCallback,
      title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" +
         "You entered " +  result.input1);
   }

}

*PROMPT* ボタンは、次のスクリーンショットのようにダイアログボックスをトリガーします。

Cordovaダイアログプロンプト

このダイアログボックスには、テキストを入力するオプションがあります。 クリックしたボタンとともに、このテキストをコンソールに記録します。

Cordovaダイアログプロンプトを閉じる

ステップ4D-ビープ機能を作成する

最後のものは dialogBeep 関数です。 これは、ビープ音の通知を呼び出すために使用されます。 times パラメーターは、ビープ信号の繰り返し回数を設定します。

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

*BEEP* ボタンをクリックすると、 *times* 値が *2* に設定されているため、通知音が2回聞こえます。

Cordova-ファイルシステム

このプラグインは、ユーザーのデバイス上のネイティブファイルシステムを操作するために使用されます。

手順1-ファイルプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*で次のコードを実行する必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

ステップ2-ボタンを追加する

この例では、ファイルの作成、ファイルへの書き込み、読み取り、削除の方法を示します。 このため、 indexl に4つのボタンを作成します。 また、ファイルのコンテンツが表示される textarea を追加します。

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>
<textarea id = "textarea"></textarea>

手順3-イベントリスナーの追加

プラグインが使用される前にすべてが開始されるように、 onDeviceReady 関数内の index.js に*イベントリスナー*を追加します。

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

ステップ4A-ファイル機能の作成

ファイルは、デバイスのアプリのルートフォルダーに作成されます。 ルートフォルダーにアクセスできるようにするには、フォルダーへの*スーパーユーザー*アクセスを提供する必要があります。 この場合、ルートフォルダーへのパスは \ data \ data \ com.example.hello \ cache です。 現時点では、このフォルダーは空です。

Cordova File Root Empty

ここで、log.txtファイルを作成する関数を追加しましょう。 このコードを index.js に記述し、ファイルシステムにリクエストを送信します。 このメソッドは、WINDOW.TEMPORARYまたはWINDOW.PERSISTENTを使用します。 ストレージに必要なサイズはバイト単位です（この例では5MB）。

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }

}

これで、 CREATE FILE ボタンを押すと、ファイルが正常に作成されたことをアラートで確認できます。

Cordovaファイル作成

これで、アプリのルートフォルダを再度確認でき、そこに新しいファイルを見つけることができます。

Cordovaファイルルート

ステップ4B-ファイル関数の書き込み

このステップでは、ファイルにテキストを書き込みます。 再度ファイルシステムに要求を送信し、 blob 変数に割り当てた Lorem Ipsum テキストを書き込むことができるファイルライターを作成します。

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

            fileWriter.onerror = function(e) {
               alert('Write failed: ' + e.toString());
            };

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

*WRITE FILE* ボタンを押すと、次のスクリーンショットのように、アラートにより書き込みが成功したことが通知されます。

Cordovaファイル書き込み

これで、 log.txt を開いて、 Lorem Ipsum が内部に書き込まれていることを確認できます。

Cordovaファイルルートログテキスト

ステップ4C-ファイル機能の読み取り

このステップでは、log.txtファイルを読み取り、 textarea 要素に表示します。 ファイルシステムにリクエストを送信し、ファイルオブジェクトを取得してから、リーダー*を作成します。 リーダーがロードされると、戻り値を *textarea に割り当てます。

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {}, function(fileEntry) {

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };
            reader.readAsText(file);
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

*READ FILE* ボタンをクリックすると、ファイルのテキストが *textarea* 内に書き込まれます。

Cordovaファイル読み取り

ステップ4D-ファイル機能の削除

最後に、 log.txt ファイルを削除する関数を作成します。

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;
   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
}

*DELETE FILE* ボタンを押して、アプリのルートフォルダーからファイルを削除できます。 アラートは、削除操作が成功したことを通知します。

Cordovaファイルの削除

アプリのルートフォルダーを確認すると、空であることがわかります。

Cordova File Root Empty

Cordova-ファイル転送

このプラグインは、ファイルのアップロードとダウンロードに使用されます。

手順1-ファイル転送プラグインのインストール

• コマンドプロンプト*を開き、次のコマンドを実行してプラグインをインストールする必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file-transfer

ステップ2-ボタンを作成する

この章では、ファイルをアップロードおよびダウンロードする方法を示します。 indexl に2つのボタンを作成しましょう

<button id = "uploadFile">UPLOAD</button>
<button id = "downloadFile">DOWNLOAD</button>

手順3-イベントリスナーの追加

イベントリスナーは、 onDeviceReady 関数内の index.js で作成されます。 *クリック*イベントと*コールバック*関数を追加しています。

document.getElementById("uploadFile").addEventListener("click", uploadFile);
document.getElementById("downloadFile").addEventListener("click", downloadFile);

ステップ4A-ダウンロード機能

この機能は、サーバーからデバイスにファイルをダウンロードするために使用されます。 ファイルを postimage.org にアップロードして、作業をより簡単にしました。 おそらく、独自のサーバーを使用することになるでしょう。 この関数は index.js に配置され、対応するボタンが押されるとトリガーされます。 uri はサーバーダウンロードリンクで、 fileURI はデバイス上のDCIMフォルダーへのパスです。

function downloadFile() {
   var fileTransfer = new FileTransfer();
   var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileURL =  "///storage/emulated/0/DCIM/myFile";

   fileTransfer.download(
      uri, fileURL, function(entry) {
         console.log("download complete: " + entry.toURL());
      },

      function(error) {
         console.log("download error source " + error.source);
         console.log("download error target " + error.target);
         console.log("download error code" + error.code);
      },

      false, {
         headers: {
            "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
         }
      }
   );
}

*DOWNLOAD* ボタンを押すと、ファイルが *postimg.org* サーバーからモバイルデバイスにダウンロードされます。 指定されたフォルダーを確認し、 *myFile* があることを確認できます。

Cordovaファイル転送ダウンロード

コンソール出力は次のようになります-

Cordovaファイル転送ダウンロードログ

ステップ4B-アップロード機能

次に、ファイルを取得してサーバーにアップロードする関数を作成しましょう。 繰り返しますが、これを可能な限り単純化したいので、テストには posttestserver.com オンラインサーバーを使用します。 uri値は、 posttestserver に投稿するためにリンクされます。

function uploadFile() {
   var fileURL = "///storage/emulated/0/DCIM/myFile"
   var uri = encodeURI("http://posttestserver.com/post.php");
   var options = new FileUploadOptions();
   options.fileKey = "file";
   options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
   options.mimeType = "text/plain";

   var headers = {'headerParam':'headerValue'};
   options.headers = headers;
   var ft = new FileTransfer();
   ft.upload(fileURL, uri, onSuccess, onError, options);

   function onSuccess(r) {
      console.log("Code = " + r.responseCode);
      console.log("Response = " + r.response);
      console.log("Sent = " + r.bytesSent);
   }

   function onError(error) {
      alert("An error has occurred: Code = " + error.code);
      console.log("upload error source " + error.source);
      console.log("upload error target " + error.target);
   }

}

*UPLOAD* ボタンを押してこの機能をトリガーできます。 アップロードが成功したことの確認としてコンソール出力を取得します。

Cordovaファイル転送アップロードログ

サーバーをチェックして、ファイルがアップロードされたことを確認することもできます。

Cordovaファイル転送アップロードサーバーの応答

コルドバ-ジオロケーション

位置情報は、デバイスの緯度と経度に関する情報を取得するために使用されます。

ステップ1-プラグインのインストール

次のコードを*コマンドプロンプト*ウィンドウに入力することにより、このプラグインをインストールできます。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

ステップ2-ボタンを追加する

このチュートリアルでは、現在の位置を取得する方法と変更を監視する方法を示します。 まず、これらの関数を呼び出すボタンを作成する必要があります。

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

手順3-イベントリスナーの追加

次に、デバイスの準備ができたときにイベントリスナーを追加します。 以下のコードサンプルを index.js の onDeviceReady 関数に追加します。

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);

ステップ3-関数を作成する

2つのイベントリスナーに対して2つの関数を作成する必要があります。 1つは現在の位置を取得するために使用され、もう1つは位置を監視するために使用されます。

function getPosition() {
   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {
   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }
   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {
      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }
}

上記の例では、 getCurrentPosition と watchPosition の2つのメソッドを使用しています。 どちらの機能も3つのパラメーターを使用しています。 CURRENT POSITION ボタンをクリックすると、アラートに位置情報の値が表示されます。

Cordova Geolocation

*WATCH POSITION* ボタンをクリックすると、同じアラートが3秒ごとにトリガーされます。 これにより、ユーザーのデバイスの動きの変化を追跡できます。

NOTE

このプラグインはGPSを使用しています。 時には値を時間通りに返せず、リクエストはタイムアウトエラーを返します。 これが、 enableHighAccuracy：true および maximumAge：3600000. を指定した理由です。これは、要求が時間通りに完了しない場合、代わりに最後の既知の値を使用することを意味します。 この例では、maximumAgeを3600000ミリ秒に設定しています。

Cordova-グローバリゼーション

このプラグインは、ユーザーのロケール言語、日付と時間帯、通貨などに関する情報を取得するために使用されます。

手順1-グローバリゼーションプラグインのインストール

• コマンドプロンプト*を開き、次のコードを入力してプラグインをインストールします

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

ステップ2-ボタンを追加する

後で作成するさまざまなメソッドを呼び出せるように、いくつかのボタンを indexl に追加します。

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

手順3-イベントリスナーの追加

イベントリスナーは、 index.js ファイルの getDeviceReady 関数内に追加され、使用を開始する前にアプリとCordovaがロードされるようにします。

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

ステップ4A-言語機能

使用している最初の関数は、クライアントのデバイスのBCP 47言語タグを返します。 getPreferredLanguage メソッドを使用します。 この関数には、onSuccessと onError の2つのパラメーターがあります。 この関数を index.js に追加しています。

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

*LANGUAGE* ボタンを押すと、画面にアラートが表示されます。

Cordova Globalization Language

ステップ4B-ロケール機能

この関数は、クライアントのローカル設定のBCP 47タグを返します。 この関数は、前に作成した関数と似ています。 唯一の違いは、今回は getLocaleName メソッドを使用していることです。

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

*LOCALE* ボタンをクリックすると、アラートにロケールタグが表示されます。

Cordova Globalization Locale

ステップ4C-日付関数

この関数は、クライアントのロケールとタイムゾーン設定に従って日付を返すために使用されます。 date パラメーターは現在の日付で、 options パラメーターはオプションです。

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

これでアプリを実行し、 DATE ボタンを押して現在の日付を確認できます。

Cordova Globalization Date

最後に示す関数は、クライアントのデバイス設定とISO 4217通貨コードに従って通貨値を返すことです。 概念が同じであることがわかります。

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

*CURRENCY* ボタンは、ユーザーの通貨パターンを示すアラートをトリガーします。

コルドバグローバリゼーション通貨

このプラグインは他の方法を提供します。 以下の表ですべて見ることができます。

method	parameters	details
getPreferredLanguage	onSuccess, onError	Returns client’s current language.
getLocaleName	onSuccess, onError	Returns client’s current locale settings.
dateToString	date, onSuccess, onError, options	Returns date according to client’s locale and timezone.
stringToDate	dateString, onSuccess, onError, options	Parses a date according to client’s settings.
getCurrencyPattern	currencyCode, onSuccess, onError	Returns client’s currency pattern.
getDatePattern	onSuccess, onError, options	Returns client’s date pattern.
getDateNames	onSuccess, onError, options	Returns an array of names of the months, weeks or days according to client’s settings.
isDayLightSavingsTime	date, successCallback, errorCallback	Used to determine if the daylight saving time is active according to client’s time zone and calendar.
getFirstDayOfWeek	onSuccess, onError	Returns the first day of the week according to client settings.
numberToString	number, onSuccess, onError, options	Returns number according to client’s settings.
stringToNumber	string, onSuccess, onError, options	Parses a number according to client’s settings.
getNumberPattern	onSuccess, onError, options	Returns the number pattern according to client’s settings.

Cordova-InAppBrowser

このプラグインは、Cordovaアプリ内でWebブラウザーを開くために使用されます。

ステップ1-プラグインのインストール

このプラグインを使用するには、*コマンドプロンプト*ウィンドウにインストールする必要があります。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

ステップ2-[追加]ボタン

*indexl* の *inAppBrowser* ウィンドウを開くために使用するボタンを1つ追加します。

ステップ3-イベントリスナーを追加する

*index.js* の *onDeviceReady* 関数にボタンのイベントリスナーを追加しましょう。

document.getElementById("openBrowser").addEventListener("click", openBrowser);

ステップ4-関数の作成

このステップでは、アプリ内でブラウザを開く関数を作成しています。 これを ref 変数に割り当てて、後でイベントリスナーを追加するために使用できます。

function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location = yes"
   var ref = cordova.InAppBrowser.open(url, target, options);

   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}

*BROWSER* ボタンを押すと、画面に次の出力が表示されます。

Cordova InAppBrowser Open

コンソールもイベントをリッスンします。 URLの読み込みが開始されると loadstart イベントが発生し、URLが読み込まれると loadstop イベントが発生します。 コンソールで確認できます。

Cordova InAppBrowser Console

ブラウザを閉じると、 exit イベントが発生します。

Cordova InAppBrowser Exit Console

InAppBrowserウィンドウには他の可能なオプションがあります。 以下の表で説明します。

S.No	option & details
1	location ブラウザのロケーションバーをオンまたはオフにするために使用されます。 値は yes または no です。
2	hidden inAppBrowserの非表示または表示に使用されます。 値は yes または no です。
3	clearCache ブラウザのCookieキャッシュをクリアするために使用されます。 値は yes または no です。
4	clearsessioncache セッションCookieキャッシュをクリアするために使用されます。 値は yes または no です。
5	zoom Androidブラウザーのズームコントロールを非表示または表示するために使用されます。 値は yes または no です。
6	hardwareback はい、ハードウェアの戻るボタンを使用して、ブラウザの履歴内を戻ることができます。 *いいえ*戻るボタンがクリックされるとブラウザを閉じます。

他の機能には ref （参照）変数を使用できます。 簡単な例を示します。 イベントリスナーを削除するために使用することができます-

ref.removeEventListener(eventname, callback);

InAppBrowserを閉じるために使用できます-

ref.close();

私たちは隠されたウィンドウを開いた場合、それを表示することができます-

ref.show();

JavaScriptコードでさえInAppBrowserに注入できます-

var details = "javascript/file/url"
ref.executeScript(details, callback);

同じ概念はCSSを注入するために使用することができます-

var details = "css/file/url"
ref.inserCSS(details, callback);

Cordova-メディア

Cordovaメディアプラグインは、Cordovaアプリでオーディオサウンドを録音および再生するために使用されます。

手順1-メディアプラグインのインストール

メディアプラグインをインストールするには、*コマンドプロンプト*ウィンドウで次のコードを実行します。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media

ステップ2-ボタンを追加する

このチュートリアルでは、シンプルなオーディオプレーヤーを作成します。 indexl に必要なボタンを作成しましょう。

<button id = "playAudio">PLAY</button>
<button id = "pauseAudio">PAUSE</button>
<button id = "stopAudio">STOP</button>
<button id = "volumeUp">VOLUME UP</button>
<button id = "volumeDown">VOLUME DOWN</button>

手順3-イベントリスナーの追加

次に、 index.js 内の onDeviceReady 関数内にボタンのイベントリスナーを追加する必要があります。

document.getElementById("playAudio").addEventListener("click", playAudio);
document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
document.getElementById("stopAudio").addEventListener("click", stopAudio);
document.getElementById("volumeUp").addEventListener("click", volumeUp);
document.getElementById("volumeDown").addEventListener("click", volumeDown);

ステップ4A-プレイ機能

追加する最初の関数は playAudio です。 後で追加する関数（pause、stop、volumeUp、volumeDown）で使用するため、関数の外で myMedia を定義しています。 このコードは index.js ファイルに配置されます。

var myMedia = null;
function playAudio() {
   var src = "/android_asset/www/audio/piano.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

*PLAY* ボタンをクリックして、 *src* パスからピアノ音楽を開始できます。

ステップ4B-機能の一時停止と停止

次に必要な関数は pauseAudio と stopAudio です。

function pauseAudio() {
   if(myMedia) {
      myMedia.pause();
   }
}

function stopAudio() {
   if(myMedia) {
      myMedia.stop();
   }
   myMedia = null;
}

*PAUSE* または *STOP* ボタンをクリックして、ピアノの音を一時停止または停止できます。

ステップ4C-ボリューム機能

ボリュームを設定するには、 setVolume メソッドを使用できます。 このメソッドは、 0 から 1 の値を持つパラメーターを取ります。 開始値を 0.5 に設定します。

var volumeValue = 0.5;
function volumeUp() {
   if(myMedia && volumeValue < 1) {
      myMedia.setVolume(volumeValue += 0.1);
   }
}

function volumeDown() {
   if(myMedia && volumeValue > 0) {
      myMedia.setVolume(volumeValue -= 0.1);
   }
}

*VOLUME UP* または *VOLUME DOWN* を押すと、ボリューム値を *0.1* ずつ変更できます。

次の表は、このプラグインが提供する他のメソッドを示しています。

S.No	Method & Details
1	getCurrentPosition オーディオの現在の位置を返します。
2	getDuration オーディオの継続時間を返します。
3	play オーディオの開始または再開に使用されます。
4	pause オーディオの一時停止に使用されます。
5	release 基盤となるオペレーティングシステムのオーディオリソースを解放します。
6	seekTo オーディオの位置を変更するために使用されます。
7	setVolume オーディオの音量を設定するために使用されます。
8	startRecord オーディオファイルの録音を開始します。
9	stopRecord オーディオファイルの録音を停止します。
10	stop オーディオファイルの再生を停止します。

Cordova-メディアキャプチャ

このプラグインは、デバイスのキャプチャオプションにアクセスするために使用されます。

手順1-メディアキャプチャプラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*を開き、次のコードを実行します-

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

ステップ2-ボタンを追加する

音声、画像、動画のキャプチャ方法を説明するため、 indexl に3つのボタンを作成します。

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

手順3-イベントリスナーの追加

次のステップは、 index.js の onDeviceReady 内にイベントリスナーを追加することです。

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

ステップ4A-オーディオ機能のキャプチャ

*index.js* の最初のコールバック関数は *audioCapture* です。 サウンドレコーダーを起動するには、 *captureAudio* メソッドを使用します。 2つのオプションを使用しています- *limit* は、単一のキャプチャ操作ごとに1つのオーディオクリップのみを記録し、 *duration* はサウンドクリップの秒数です。

function audioCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

*AUDIO* ボタンを押すと、サウンドレコーダーが開きます。

Cordova Capture Audio

コンソールには、ユーザーがキャプチャしたオブジェクトの配列が返されます。

Cordova Capture Audio Log

ステップ4B-画像のキャプチャ機能

画像をキャプチャする機能は、最後のものと同じです。 唯一の違いは、今回は captureImage メソッドを使用していることです。

function imageCapture() {
   var options = {
      limit: 1
   };
   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

これで、 IMAGE ボタンをクリックしてカメラを起動できます。

Cordova Capture Image

写真を撮ると、コンソールは画像オブジェクトで配列を記録します。

Cordova Capture Image Log

ステップ4C-ビデオ機能のキャプチャ

ビデオをキャプチャするために同じ概念を繰り返しましょう。 今回は videoCapture メソッドを使用します。

function videoCapture() {
   var options = {
      limit: 1,
      duration: 10
   };
   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
}

*VIDEO* ボタンを押すと、カメラが開き、ビデオを録画できます。

Cordova Capture Video

ビデオが保存されると、コンソールはもう一度配列を返します。 今回は内部にビデオオブジェクトがあります。

Cordova Capture Video Log

Cordova-ネットワーク情報

このプラグインは、デバイスのネットワークに関する情報を提供します。

手順1-ネットワーク情報プラグインのインストール

このプラグインをインストールするには、*コマンドプロンプト*を開き、次のコードを実行します-

C:\Users\username\Desktop\CordovaProject>cordova plugin
   add cordova-plugin-network-information

ステップ2-ボタンを追加する

*indexl* に、ネットワークに関する情報を取得するために使用するボタンを1つ作成しましょう。

<button id = "networkInfo">INFO</button>

手順3-イベントリスナーの追加

*index.js* の *onDeviceReady* 関数内に3つのイベントリスナーを追加します。 1つは前に作成したボタンのクリックをリッスンし、他の2つは接続ステータスの変更をリッスンします。

document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);

ステップ4-関数の作成

*networkInfo* 関数は、ボタンがクリックされると現在のネットワーク接続に関する情報を返します。 *type* メソッドを呼び出しています。 他の関数は、 *onOffline* および *onOnline* です。 これらの関数は接続の変更をリッスンしており、変更があると対応するアラートメッセージがトリガーされます。

function networkInfo() {
   var networkState = navigator.connection.type;
   var states = {};
   states[Connection.UNKNOWN]  = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI]     = 'WiFi connection';
   states[Connection.CELL_2G]  = 'Cell 2G connection';
   states[Connection.CELL_3G]  = 'Cell 3G connection';
   states[Connection.CELL_4G]  = 'Cell 4G connection';
   states[Connection.CELL]     = 'Cell generic connection';
   states[Connection.NONE]     = 'No network connection';
   alert('Connection type: ' + states[networkState]);
}

function onOffline() {
   alert('You are now offline!');
}

function onOnline() {
   alert('You are now online!');
}

ネットワークに接続されたアプリを起動すると、 onOnline 関数がアラートをトリガーします。

Cordova Network Online

*INFO* ボタンを押すと、ネットワークの状態がアラートに表示されます。

Cordovaネットワーク情報

ネットワークから切断すると、 onOffline 関数が呼び出されます。

Cordova Network Offline

Cordova-スプラッシュスクリーン

このプラグインは、アプリケーションの起動時にスプラッシュスクリーンを表示するために使用されます。

手順1-スプラッシュスクリーンプラグインのインストール

スプラッシュスクリーンプラグインは、次のコードを実行して*コマンドプロンプト*ウィンドウにインストールできます。

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-splashscreen

ステップ2-スプラッシュスクリーンを追加する

スプラッシュ画面の追加は、他のCordovaプラグインの追加とは異なります。 config.xml を開き、次のコードスニペットを widget 要素内に追加する必要があります。

最初のスニペットは SplashScreen です。 platform/android/res/drawable -フォルダー内の画像の名前である value プロパティがあります。 Cordovaは、この例で使用しているデフォルトの screen.png 画像を提供していますが、おそらく独自の画像を追加する必要があります。 重要なことは、ポートレートビューとランドスケープビューの画像を追加し、さまざまな画面サイズをカバーすることです。

<preference name = "SplashScreen" value = "screen"/>

追加する必要がある2番目のスニペットは SplashScreenDelay です。 3秒後にスプラッシュスクリーンを非表示にするために、値*を *3000 に設定しています。

<preference name = "SplashScreenDelay" value = "3000"/>

最後の設定はオプションです。 値が true に設定されている場合、画像は画面に合わせて拡大されません。 false に設定されている場合、引き伸ばされます。

<preference name = "SplashMaintainAspectRatio" value = "true"/>

アプリを実行すると、スプラッシュ画面が表示されます。

Cordovaスプラッシュスクリーン

コルドバ-振動

このプラグインは、デバイスの振動機能に接続するために使用されます。

ステップ1-振動プラグインのインストール

次のコードを実行することで、このコマンドを*コマンドプロンプト*ウィンドウにインストールできます-

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-vibration

ステップ2-ボタンを追加する

プラグインをインストールしたら、 indexl にボタンを追加して、後で振動をトリガーするために使用できます。

<button id = "vibration">VIBRATION</button>
<button id = "vibrationPattern">PATTERN</button>

手順3-イベントリスナーの追加

次に、 index.js の onDeviceReady 内にイベントリスナーを追加します。

document.getElementById("vibration").addEventListener("click", vibration);
document.getElementById("vibrationPattern").addEventListener("click", vibrationPattern);

ステップ4-関数を作成する

このプラグインは非常に使いやすいです。 2つの関数を作成します。

function vibration() {
   var time = 3000;
   navigator.vibrate(time);
}

function vibrationPattern() {
   var pattern = [1000, 1000, 1000, 1000];
   navigator.vibrate(pattern);
}

最初の機能は時間パラメータを取得しています。 このパラメーターは、振動の持続時間を設定するために使用されます。 VIBRATION ボタンを押すと、デバイスは3秒間振動します。

2番目の機能は、 pattern パラメーターを使用しています。 この配列は、デバイスに1秒間振動させてから、1秒間待機してからプロセスを再度繰り返します。

Cordova-ホワイトリスト

このプラグインにより、アプリのナビゲーション用のホワイトリストポリシーを実装できます。 新しいCordovaプロジェクトを作成すると、デフォルトで whitelist プラグインがインストールおよび実装されます。 config.xml ファイルを開いて、Cordovaが提供する allow-intent のデフォルト設定を確認できます。

ナビゲーションホワイトリスト

以下の簡単な例では、外部URLへのリンクを許可しています。 このコードは config.xml に配置されます。 file：// URLへのナビゲーションはデフォルトで許可されています。

<allow-navigation href = "http://example.com/*"/>

アスタリスク記号*は、複数の値へのナビゲーションを許可するために使用されます。 上記の例では、 example.com のすべてのサブドメインへのナビゲーションを許可しています。 同じことがホストのプロトコルまたはプレフィックスに適用できます。

<allow-navigation href = "*://*.example.com/*"/>

意図のホワイトリスト

システムを開くことを許可するURLを指定するために使用される allow-intent 要素もあります。 config.xml で、Cordovaがすでに必要なリンクのほとんどを許可していることがわかります。

ネットワークリクエストホワイトリスト

*config.xml* ファイルの中を見ると、* <access origin = "*"/> *要素があります。 この要素により、Cordovaフックを介したアプリへのすべてのネットワークリクエストが許可されます。 特定の要求のみを許可する場合は、config.xmlから削除して自分で設定できます。

前の例と同じ原理が使用されます。

<access origin = "http://example.com"/>

これにより、* http：//example.com*からのすべてのネットワーク要求が許可されます。

コンテンツセキュリティポリシー

アプリの現在のセキュリティポリシーは、 indexl の head 要素で確認できます。

<meta http-equiv = "Content-Security-Policy" content = "default-src
   'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src
   'self' 'unsafe-inline'; media-src *">

これはデフォルトの構成です。 あなたが同じ起源と example.com からすべてを許可したい場合は、使用することができます-

<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' foo.com">

すべてを許可することもできますが、CSSとJavaScriptを同じ生成元に制限します。

<meta http-equiv = "Content-Security-Policy" content = "default-src *;
   style-src 'self' 'unsafe-inline'; script-src 'self'
   'unsafe-inline' 'unsafe-eval'">

これは初心者向けのチュートリアルなので、デフォルトのCordovaオプションをお勧めします。 Cordovaに慣れたら、いくつかの異なる値を試すことができます。

Cordova-ベストプラクティス

Cordovaはハイブリッドモバイルアプリの作成に使用されるため、プロジェクトで選択する前にこれを考慮する必要があります。 以下は、Cordovaアプリ開発のベストプラクティスです。

シングルページアプリ

これは、すべてのCordovaアプリに推奨される設計です。 SPAはクライアント側ルーターと単一ページに読み込まれたナビゲーションを使用しています（通常は indexl ）。 ルーティングはAJAXを介して処理されます。 チュートリアルに従っている場合、ほとんどすべてのCordovaプラグインが使用可能になる前にデバイスの準備が整うまで待機する必要があることに気づいたでしょう。 SPAの設計により、読み込み速度と全体的なパフォーマンスが向上します。

タッチイベント

Cordovaはモバイルワールドで使用されるため、 click イベントの代わりに touchstart および touchend イベントを使用するのが自然です。 クリックイベントには300ミリ秒の遅延があるため、クリックはネイティブに感じられません。 一方、タッチイベントはすべてのプラットフォームでサポートされているわけではありません。 使用するものを決定する前に、これを考慮に入れる必要があります。

アニメーション

JavaScriptアニメーションの代わりに、ハードウェアアクセラレーションされた* CSSトランジション*を常に使用する必要があります。モバイルデバイスでのパフォーマンスが向上するためです。

ストレージ

可能な限りストレージキャッシュを使用します。 通常、モバイルネットワーク接続は不良であるため、アプリ内のネットワーク呼び出しを最小限に抑える必要があります。 また、ユーザーのデバイスがオフラインになる場合があるため、アプリのオフラインステータスも処理する必要があります。

スクロール

ほとんどの場合、アプリ内の最初の遅い部分はリストのスクロールです。 アプリのスクロールパフォーマンスを改善するには、いくつかの方法があります。 ネイティブスクロールを使用することをお勧めします。 リストに多数のアイテムがある場合、それらを部分的にロードする必要があります。 必要に応じてローダーを使用してください。

画像

画像もモバイルアプリの速度を低下させる可能性があります。 可能な限り、CSSイメージスプライトを使用する必要があります。 画像を拡大縮小するのではなく、完全に合わせるようにしてください。

CSSスタイル

影やグラデーションはページのレンダリング時間を遅くするため、避ける必要があります。

単純化

ブラウザのDOMは遅いため、DOM操作とDOM要素の数を最小限に抑えるようにしてください。

テスト

できるだけ多くのデバイスとオペレーティングシステムのバージョンでアプリをテストしてください。 アプリが1つのデバイスで問題なく動作する場合、他のデバイスまたはプラットフォームで動作するという意味ではありません。