Cordova-quick-guide
Cordova-概要
公式文書は私たちにコルドバの定義を与えます-
'_「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インストールのデフォルトパスです。 別のパスにインストールした場合は、以下のサンプルコードの代わりにそれを使用する必要があります。
これで、コマンドプロンプトに git と入力して、インストールが成功したかどうかをテストできます。
ステップ2-Cordovaのインストール
このステップでは、Cordovaモジュールをグローバルにダウンロードしてインストールします。 コマンドプロンプトを開き、次を実行します-
あなたが実行することにより、インストールされたバージョンを確認することができます-
これが、WindowsオペレーティングシステムでCordovaアプリの開発を開始するために必要なすべてです。 次のチュートリアルでは、最初のアプリケーションを作成する方法を示します。
Cordova-最初のアプリケーション
Cordovaをインストールし、その環境をセットアップする方法を理解しました。 すべての準備が整ったら、最初のハイブリッドCordovaアプリケーションを作成できます。
ステップ1-アプリの作成
コマンドプロンプトでアプリをインストールするディレクトリを開きます。 デスクトップで作成します。
- CordovaProject は、アプリが作成されるディレクトリ名です。
- io.cordova.hellocordova は、デフォルトの逆ドメイン値です。 可能であれば、独自のドメイン値を使用する必要があります。
- CordovaApp はアプリのタイトルです。
ステップ2-プラットフォームの追加
コマンドプロンプトでプロジェクトディレクトリを開く必要があります。 この例では、 CordovaProject です。 必要なプラットフォームのみを選択する必要があります。 指定されたプラットフォームを使用できるようにするには、特定のプラットフォームSDKをインストールする必要があります。 Windowsで開発しているため、次のプラットフォームを使用できます。 Android SDKは既にインストールされているため、このチュートリアルではAndroidプラットフォームのみをインストールします。
Windows OSで使用できる他のプラットフォームがあります。
Macで開発している場合は、次を使用できます-
以下を使用して、プロジェクトからプラットフォームを削除することもできます-
ステップ3-ビルドと実行
この手順では、指定したプラットフォーム用のアプリをビルドして、モバイルデバイスまたはエミュレーターで実行できるようにします。
これでアプリを実行できます。 デフォルトのエミュレータを使用している場合は、使用する必要があります-
あなたが外部エミュレータまたは実際のデバイスを使用する場合は、使用する必要があります-
注-* Genymotion Androidエミュレータ*を使用します。これは、デフォルトのエミュレータよりも高速で応答性が高いためです。 エミュレーターはhttps://www.genymotion.com/#!/store [こちら]にあります。 オプションから* USBデバッグ*を有効にし、USBケーブルを介してコンピューターに接続することにより、実際のデバイスをテストに使用することもできます。 一部のデバイスでは、USBドライバーもインストールする必要があります。
アプリを実行すると、指定したプラットフォームにインストールされます。 すべてがエラーなしで終了した場合、出力にはアプリのデフォルトの開始画面が表示されます。
次のチュートリアルでは、Cordovaアプリケーションの構成方法を示します。
Cordova-config.xmlファイル
次の表は、 config.xml の構成要素について説明しています。
config.xml構成テーブル
S.No | Element & Details |
---|---|
1 |
widget アプリの作成時に指定したアプリの逆ドメイン値。 |
2 |
name アプリの作成時に指定したアプリの名前。 |
3 |
description アプリの説明。 |
4 |
author アプリの作成者。 |
5 |
content アプリの開始ページ。 www ディレクトリ内に配置されます。 |
6 |
plugin 現在インストールされているプラグイン。 |
7 |
access 外部ドメインへのアクセスを制御するために使用されます。 デフォルトの origin 値は*に設定されています。つまり、すべてのドメインへのアクセスが許可されます。 この値は、情報を保護するために特定のURLを開くことを許可しません。 |
8 |
allow-intent 特定のURLがアプリに開くように要求することを許可します。 たとえば、* <allow-intent href = "tel:*"/> *は、tel:リンクがダイヤラーを開くことを許可します。 |
9 |
platform アプリを構築するためのプラットフォーム。 |
Cordova-ストレージ
クライアントアプリにデータを保存するために利用可能なストレージAPIを使用できます。 これにより、ユーザーがオフラインのときにアプリを使用できるようになり、パフォーマンスも向上します。 このチュートリアルは初心者向けであるため、*ローカルストレージ*の使用方法を示します。 後のチュートリアルの1つで、使用できる他のプラグインを紹介します。
ステップ1-ボタンの追加
それは次の画面を生成します-
手順2-イベントリスナーの追加
Cordovaセキュリティポリシーはインラインイベントを許可しないため、index.jsファイル内にイベントリスナーを追加します。 また、後で使用する localStorage 変数に window.localStorage を割り当てます。
ステップ3-関数の作成
次に、ボタンがタップされたときに呼び出される関数を作成する必要があります。 最初の関数は、ローカルストレージにデータを追加するために使用されます。
次は、コンソールに追加したデータを記録します。
[ローカルストレージの設定]ボタンをタップすると、3つのアイテムがローカルストレージに設定されます。 その後、 SHOW LOCAL STORAGE をタップすると、コンソールは必要な項目を記録します。
ローカルストレージからプロジェクトを削除する関数を作成しましょう。
プロジェクトを削除した後に[ローカルストレージの表示]ボタンをクリックすると、プロジェクトフィールドの null 値が出力に表示されます。
また、インデックスとして引数を取り、対応するインデックス値を持つ要素を返す* 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 イベントの使用方法を理解します。
- 音量アップ*ボタンを押すと、画面に次のアラートが表示されます。
戻るボタンの処理
前の画面に戻るなどのアプリの機能には、Androidの戻るボタンを使用する必要があります。 独自の機能を実装するには、最初にアプリの終了に使用される戻るボタンを無効にする必要があります。
これで、Androidのネイティブの戻るボタンを押すと、アプリを終了する代わりに画面にアラートが表示されます。 これは、* e.preventDefault()*コマンドを使用して行われます。
Cordova-戻るボタン
戻るボタンの処理
通常、前の画面に戻るなどのアプリの機能のためにAndroidの戻るボタンを使用します。 独自の機能を実装できるようにするには、最初に戻るボタンが押されたときにアプリの終了を無効にする必要があります。
これで、Androidのネイティブの戻るボタンを押すと、アプリを終了する代わりに画面にアラートが表示されます。 これは、* e.preventDefault()*を使用して行われます。
コルドバ-プラグマン
Cordova Plugmanは、プラグインをインストールおよび管理するための便利なコマンドラインツールです。 アプリを特定のプラットフォームで実行する必要がある場合は、 plugman を使用する必要があります。 クロスプラットフォーム*アプリを作成する場合は、さまざまなプラットフォームのプラグインを変更する *cordova-cli を使用する必要があります。
ステップ1-Plugmanのインストール
- コマンドプロンプト*ウィンドウを開き、次のコードスニペットを実行してplugmanをインストールします。
ステップ2-プラグインのインストール
plugmanを使用してCordovaプラグインをインストールする方法を理解するために、例としてCameraプラグインを使用します。
上記の3つのパラメーターを考慮する必要があります。
- *-platform *-使用しているプラットフォーム(android、ios、amazon-fireos、wp8、blackberry10)。
- -project *-プロジェクトがビルドされるパス。 この例では、 *platforms \ android ディレクトリです。
- *-plugin *-インストールするプラグイン。
有効なパラメーターを設定すると、コマンドプロンプトウィンドウに次の出力が表示されます。
追加の方法
同様の方法で uninstall メソッドを使用できます。
- コマンドプロンプト*コンソールには、次の出力が表示されます。
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-バッテリープラグインのインストール
このプラグインをインストールするには、*コマンドプロンプト*ウィンドウを開き、次のコードを実行する必要があります。
ステップ2-イベントリスナーを追加する
ステップ3-コールバック関数を作成する
アプリを実行すると、アラートがトリガーされます。 現時点では、バッテリーは100%充電されています。
ステータスが変更されると、新しいアラートが表示されます。 バッテリーの状態は、バッテリーが99%充電されたことを示しています。
デバイスを充電器に接続すると、新しいアラートは isPlugged 値が true に変更されたことを示します。
追加イベント
このプラグインは、 batterystatus イベントに加えて2つの追加イベントを提供します。 これらのイベントは、 batterystatus イベントと同じ方法で使用できます。
S.No | Event & Details |
---|---|
1 |
batterylow バッテリーの充電率が低い値に達すると、イベントがトリガーされます。 この値はデバイスによって異なります。 |
2 |
batterycritical バッテリーの充電率が限界値に達すると、イベントがトリガーされます。 この値はデバイスによって異なります。 |
Cordova-カメラ
このプラグインは、写真の撮影や画像ギャラリーのファイルの使用に使用されます。
手順1-カメラプラグインのインストール
このプラグインをインストールするには、*コマンドプロンプト*ウィンドウで次のコードを実行します。
ステップ2-ボタンと画像の追加
次に、カメラを呼び出すためのボタンと、撮影した画像が表示される img を作成します。 これは、 div class = "app" 要素内の indexl に追加されます。
手順3-イベントリスナーの追加
イベントリスナーが onDeviceReady 関数内に追加され、使用を開始する前にCordovaが確実にロードされます。
ステップ4-関数の追加(写真を撮る)
イベントリスナーへのコールバックとして渡される cameraTakePicture 関数を作成します。 ボタンがタップされると発生します。 この関数内で、プラグインAPIによって提供される navigator.camera グローバルオブジェクトを呼び出します。 写真の撮影が成功した場合、データは onSuccess コールバック関数に送信されます。そうでない場合、エラーメッセージ付きのアラートが表示されます。 このコードを index.js の下部に配置します。
アプリを実行してボタンを押すと、ネイティブカメラがトリガーされます。
写真を撮って保存すると、画面に表示されます。
同じ手順を使用して、ローカルファイルシステムからイメージを取得できます。 唯一の違いは、最後の手順で作成された関数です。 sourceType オプションパラメータが追加されていることがわかります。
ステップ1 B
ステップ2 B
ステップ3 B
ステップ4 B
2番目のボタンを押すと、カメラの代わりにファイルシステムが開くので、表示する画像を選択できます。
このプラグインは、カスタマイズのための多くのオプションパラメータを提供します。
S.No | Parameter & Details |
---|---|
1 |
quality 0〜100の範囲の画像の品質。 デフォルトは50です。 |
2 |
destinationType
|
3 |
sourceType
|
4 |
allowEdit 画像編集を許可します。 |
5 |
encodingType
|
6 |
targetWidth ピクセル単位の画像スケーリング幅。 |
7 |
targetHeight ピクセル単位の画像スケーリングの高さ。 |
8 |
mediaType
|
9 |
correctOrientation 画像の向きを修正するために使用されます。 |
10 |
saveToPhotoAlbum 画像をフォトアルバムに保存するために使用します。 |
11 |
popoverOptions IOSでポップオーバーの場所を設定するために使用されます。 |
12 |
cameraDirection
|
コルドバ-連絡先
このプラグインは、デバイスの連絡先データベースにアクセスするために使用されます。 このチュートリアルでは、連絡先を作成、クエリ、削除する方法を示します。
手順1-連絡先プラグインをインストールする
ステップ2-ボタンの追加
このボタンは、 createContact 関数の呼び出しに使用されます。 indexl ファイルの div class = "app" に配置します。
手順2-イベントリスナーの追加
現在、デバイスには連絡先が保存されていません。
最初のコールバック関数は、新しい連絡先データを指定できる navigator.contacts.create メソッドを呼び出します。 これにより、連絡先が作成され、 myContact 変数に割り当てられますが、デバイスには保存されません。 保存するには、 save メソッドを呼び出して、成功およびエラーコールバック関数を作成する必要があります。
2番目のコールバック関数は、すべての連絡先を照会します。 navigator.contacts.find メソッドを使用します。 optionsオブジェクトには、検索フィルターを指定するために使用されるフィルターパラメーターがあります。 デバイスからすべての連絡先を返すため、 multiple = true が使用されます。 連絡先を保存するときに使用したため、 displayName で連絡先を検索する field キー。
オプションを設定したら、 find メソッドを使用して連絡先を照会します。 見つかった連絡先ごとにアラートメッセージがトリガーされます。
ステップ3C-コールバック関数(削除)
この手順では、findメソッドを再度使用しますが、今回はさまざまなオプションを設定します。 options.filter は、削除する必要がある Test User を検索するように設定されています。 contactfindSuccess コールバック関数が必要な連絡先を返した後、独自の成功およびエラーコールバックを必要とする remove メソッドを使用して削除します。
これで、デバイスに保存される連絡先は1つだけになりました。 削除プロセスを示すために、手動でもう1つ追加します。
ここで、[ DELETE CONTACT ]ボタンをクリックして、 Test User を削除します。 連絡先リストを再度確認すると、 Test User がもう存在しないことがわかります。
Cordova-デバイス
このプラグインは、ユーザーのデバイスに関する情報を取得するために使用されます。
手順1-デバイスプラグインのインストール
このプラグインをインストールするには、*コマンドプロンプト*で次のスニペットを実行する必要があります。
ステップ2-ボタンの追加
このプラグインは、他のCordovaプラグインと同じ方法で使用します。 indexl ファイルにボタンを追加しましょう。 このボタンは、デバイスに関する情報を取得するために使用されます。
手順3-イベントリスナーの追加
Cordovaプラグインは deviceready イベントの後に利用できるため、 index.js の onDeviceReady 関数内にイベントリスナーを配置します。
ステップ4-関数の作成
次の関数は、プラグインが提供するすべての可能性を使用する方法を示します。 index.js に配置します。
Cordova-加速度計
Accelerometerプラグインは、 device-motion とも呼ばれます。 デバイスの動きを3次元で追跡するために使用されます。
手順1-加速度計プラグインのインストール
ステップ2-ボタンを追加する
このステップでは、 indexl ファイルに2つのボタンを追加します。 1つは現在の加速度を取得するために使用され、もう1つは加速度の変化を監視します。
手順3-イベントリスナーの追加
ボタンのイベントリスナーを index.js 内の onDeviceReady 関数に追加しましょう。
ステップ4-関数の作成
次に、2つの関数を作成します。 最初の関数は現在の加速度を取得するために使用され、2番目の関数は加速度を監視し、3秒ごとに加速度に関する情報がトリガーされます。 また、 setTimeout 関数でラップされた clearWatch 関数を追加して、指定された時間枠の後に加速の監視を停止します。 frequency パラメーターは、3秒ごとにコールバック関数をトリガーするために使用されます。
Cordova-デバイスの向き
コンパスは、地理的な北の基点に対する方向を示すために使用されます。
手順1-デバイスの向きのプラグインをインストールする
- コマンドプロンプト*ウィンドウを開き、次を実行します。
ステップ2-ボタンを追加する
このプラグインは acceleration プラグインに似ています。 indexl に2つのボタンを作成します。
手順3-イベントリスナーの追加
次に、 index.js の onDeviceReady 関数内に*イベントリスナー*を追加します。
ステップ4-関数の作成
2つの関数を作成します。最初の関数は現在の加速度を生成し、もう1つの関数は方向の変化をチェックします。 frequency オプションを再び使用して、3秒ごとに発生する変更を監視していることがわかります。
コンパスプラグインは加速プラグインとほとんど同じなので、今回はエラーコードを表示します。 一部のデバイスには、コンパスが機能するために必要な磁気センサーがありません。 デバイスにそれがない場合、次のエラーが表示されます。
Cordova-ダイアログ
Cordova Dialogsプラグインは、プラットフォームのネイティブダイアログUI要素を呼び出します。
ステップ1-ダイアログのインストール
このコマンドをインストールするには、*コマンドプロンプト*ウィンドウに次のコマンドを入力します。
ステップ2-ボタンを追加する
次に、 indexl を開いて、すべてのタイプのダイアログに1つずつ、4つのボタンを追加します。
手順3-イベントリスナーの追加
次に、 index.js の onDeviceReady 関数内にイベントリスナーを追加します。 リスナーは、対応するボタンがクリックされるとコールバック関数を呼び出します。
ステップ4A-アラート機能の作成
4つのイベントリスナーを追加したので、 index.js でそれらすべてのコールバック関数を作成します。 最初のものは dialogAlert です。
ダイアログボタンをクリックすると、次の出力がコンソールに表示されます。
Cordova Alert DIalog Dismissed
ステップ4B-確認機能の作成
作成する必要がある2番目の関数は、 dialogConfirm 関数です。
[はい]ボタンをクリックして質問に答えます。 次の出力がコンソールに表示されます。
ステップ4C-プロンプト機能の作成
3番目の関数は dialogPrompt 関数です。 これにより、ユーザーはテキストをダイアログ入力要素に入力できます。
このダイアログボックスには、テキストを入力するオプションがあります。 クリックしたボタンとともに、このテキストをコンソールに記録します。
ステップ4D-ビープ機能を作成する
最後のものは dialogBeep 関数です。 これは、ビープ音の通知を呼び出すために使用されます。 times パラメーターは、ビープ信号の繰り返し回数を設定します。
Cordova-ファイルシステム
このプラグインは、ユーザーのデバイス上のネイティブファイルシステムを操作するために使用されます。
手順1-ファイルプラグインのインストール
このプラグインをインストールするには、*コマンドプロンプト*で次のコードを実行する必要があります。
ステップ2-ボタンを追加する
この例では、ファイルの作成、ファイルへの書き込み、読み取り、削除の方法を示します。 このため、 indexl に4つのボタンを作成します。 また、ファイルのコンテンツが表示される textarea を追加します。
手順3-イベントリスナーの追加
プラグインが使用される前にすべてが開始されるように、 onDeviceReady 関数内の index.js に*イベントリスナー*を追加します。
ステップ4A-ファイル機能の作成
ファイルは、デバイスのアプリのルートフォルダーに作成されます。 ルートフォルダーにアクセスできるようにするには、フォルダーへの*スーパーユーザー*アクセスを提供する必要があります。 この場合、ルートフォルダーへのパスは \ data \ data \ com.example.hello \ cache です。 現時点では、このフォルダーは空です。
ここで、log.txtファイルを作成する関数を追加しましょう。 このコードを index.js に記述し、ファイルシステムにリクエストを送信します。 このメソッドは、WINDOW.TEMPORARYまたはWINDOW.PERSISTENTを使用します。 ストレージに必要なサイズはバイト単位です(この例では5MB)。
これで、 CREATE FILE ボタンを押すと、ファイルが正常に作成されたことをアラートで確認できます。
これで、アプリのルートフォルダを再度確認でき、そこに新しいファイルを見つけることができます。
ステップ4B-ファイル関数の書き込み
このステップでは、ファイルにテキストを書き込みます。 再度ファイルシステムに要求を送信し、 blob 変数に割り当てた Lorem Ipsum テキストを書き込むことができるファイルライターを作成します。
これで、 log.txt を開いて、 Lorem Ipsum が内部に書き込まれていることを確認できます。
ステップ4C-ファイル機能の読み取り
このステップでは、log.txtファイルを読み取り、 textarea 要素に表示します。 ファイルシステムにリクエストを送信し、ファイルオブジェクトを取得してから、リーダー*を作成します。 リーダーがロードされると、戻り値を *textarea に割り当てます。
ステップ4D-ファイル機能の削除
最後に、 log.txt ファイルを削除する関数を作成します。
アプリのルートフォルダーを確認すると、空であることがわかります。
Cordova-ファイル転送
このプラグインは、ファイルのアップロードとダウンロードに使用されます。
手順1-ファイル転送プラグインのインストール
- コマンドプロンプト*を開き、次のコマンドを実行してプラグインをインストールする必要があります。
ステップ2-ボタンを作成する
この章では、ファイルをアップロードおよびダウンロードする方法を示します。 indexl に2つのボタンを作成しましょう
手順3-イベントリスナーの追加
イベントリスナーは、 onDeviceReady 関数内の index.js で作成されます。 *クリック*イベントと*コールバック*関数を追加しています。
ステップ4A-ダウンロード機能
この機能は、サーバーからデバイスにファイルをダウンロードするために使用されます。 ファイルを postimage.org にアップロードして、作業をより簡単にしました。 おそらく、独自のサーバーを使用することになるでしょう。 この関数は index.js に配置され、対応するボタンが押されるとトリガーされます。 uri はサーバーダウンロードリンクで、 fileURI はデバイス上のDCIMフォルダーへのパスです。
コンソール出力は次のようになります-
ステップ4B-アップロード機能
次に、ファイルを取得してサーバーにアップロードする関数を作成しましょう。 繰り返しますが、これを可能な限り単純化したいので、テストには posttestserver.com オンラインサーバーを使用します。 uri値は、 posttestserver に投稿するためにリンクされます。
サーバーをチェックして、ファイルがアップロードされたことを確認することもできます。
コルドバ-ジオロケーション
位置情報は、デバイスの緯度と経度に関する情報を取得するために使用されます。
ステップ1-プラグインのインストール
次のコードを*コマンドプロンプト*ウィンドウに入力することにより、このプラグインをインストールできます。
ステップ2-ボタンを追加する
このチュートリアルでは、現在の位置を取得する方法と変更を監視する方法を示します。 まず、これらの関数を呼び出すボタンを作成する必要があります。
手順3-イベントリスナーの追加
次に、デバイスの準備ができたときにイベントリスナーを追加します。 以下のコードサンプルを index.js の onDeviceReady 関数に追加します。
ステップ3-関数を作成する
2つのイベントリスナーに対して2つの関数を作成する必要があります。 1つは現在の位置を取得するために使用され、もう1つは位置を監視するために使用されます。
上記の例では、 getCurrentPosition と watchPosition の2つのメソッドを使用しています。 どちらの機能も3つのパラメーターを使用しています。 CURRENT POSITION ボタンをクリックすると、アラートに位置情報の値が表示されます。
NOTE
このプラグインはGPSを使用しています。 時には値を時間通りに返せず、リクエストはタイムアウトエラーを返します。 これが、 enableHighAccuracy:true および maximumAge:3600000. を指定した理由です。これは、要求が時間通りに完了しない場合、代わりに最後の既知の値を使用することを意味します。 この例では、maximumAgeを3600000ミリ秒に設定しています。
Cordova-グローバリゼーション
このプラグインは、ユーザーのロケール言語、日付と時間帯、通貨などに関する情報を取得するために使用されます。
手順1-グローバリゼーションプラグインのインストール
- コマンドプロンプト*を開き、次のコードを入力してプラグインをインストールします
ステップ2-ボタンを追加する
後で作成するさまざまなメソッドを呼び出せるように、いくつかのボタンを indexl に追加します。
手順3-イベントリスナーの追加
イベントリスナーは、 index.js ファイルの getDeviceReady 関数内に追加され、使用を開始する前にアプリとCordovaがロードされるようにします。
ステップ4A-言語機能
使用している最初の関数は、クライアントのデバイスのBCP 47言語タグを返します。 getPreferredLanguage メソッドを使用します。 この関数には、onSuccessと onError の2つのパラメーターがあります。 この関数を index.js に追加しています。
Cordova Globalization Language
ステップ4B-ロケール機能
この関数は、クライアントのローカル設定のBCP 47タグを返します。 この関数は、前に作成した関数と似ています。 唯一の違いは、今回は getLocaleName メソッドを使用していることです。
ステップ4C-日付関数
この関数は、クライアントのロケールとタイムゾーン設定に従って日付を返すために使用されます。 date パラメーターは現在の日付で、 options パラメーターはオプションです。
これでアプリを実行し、 DATE ボタンを押して現在の日付を確認できます。
最後に示す関数は、クライアントのデバイス設定とISO 4217通貨コードに従って通貨値を返すことです。 概念が同じであることがわかります。
このプラグインは他の方法を提供します。 以下の表ですべて見ることができます。
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-プラグインのインストール
このプラグインを使用するには、*コマンドプロンプト*ウィンドウにインストールする必要があります。
ステップ2-[追加]ボタン
ステップ3-イベントリスナーを追加する
ステップ4-関数の作成
このステップでは、アプリ内でブラウザを開く関数を作成しています。 これを ref 変数に割り当てて、後でイベントリスナーを追加するために使用できます。
コンソールもイベントをリッスンします。 URLの読み込みが開始されると loadstart イベントが発生し、URLが読み込まれると loadstop イベントが発生します。 コンソールで確認できます。
ブラウザを閉じると、 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 (参照)変数を使用できます。 簡単な例を示します。 イベントリスナーを削除するために使用することができます-
InAppBrowserを閉じるために使用できます-
私たちは隠されたウィンドウを開いた場合、それを表示することができます-
JavaScriptコードでさえInAppBrowserに注入できます-
同じ概念はCSSを注入するために使用することができます-
Cordova-メディア
Cordovaメディアプラグインは、Cordovaアプリでオーディオサウンドを録音および再生するために使用されます。
手順1-メディアプラグインのインストール
メディアプラグインをインストールするには、*コマンドプロンプト*ウィンドウで次のコードを実行します。
ステップ2-ボタンを追加する
このチュートリアルでは、シンプルなオーディオプレーヤーを作成します。 indexl に必要なボタンを作成しましょう。
手順3-イベントリスナーの追加
次に、 index.js 内の onDeviceReady 関数内にボタンのイベントリスナーを追加する必要があります。
ステップ4A-プレイ機能
追加する最初の関数は playAudio です。 後で追加する関数(pause、stop、volumeUp、volumeDown)で使用するため、関数の外で myMedia を定義しています。 このコードは index.js ファイルに配置されます。
ステップ4B-機能の一時停止と停止
次に必要な関数は pauseAudio と stopAudio です。
ステップ4C-ボリューム機能
ボリュームを設定するには、 setVolume メソッドを使用できます。 このメソッドは、 0 から 1 の値を持つパラメーターを取ります。 開始値を 0.5 に設定します。
次の表は、このプラグインが提供する他のメソッドを示しています。
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-メディアキャプチャプラグインのインストール
このプラグインをインストールするには、*コマンドプロンプト*を開き、次のコードを実行します-
ステップ2-ボタンを追加する
音声、画像、動画のキャプチャ方法を説明するため、 indexl に3つのボタンを作成します。
手順3-イベントリスナーの追加
次のステップは、 index.js の onDeviceReady 内にイベントリスナーを追加することです。
ステップ4A-オーディオ機能のキャプチャ
コンソールには、ユーザーがキャプチャしたオブジェクトの配列が返されます。
ステップ4B-画像のキャプチャ機能
画像をキャプチャする機能は、最後のものと同じです。 唯一の違いは、今回は captureImage メソッドを使用していることです。
これで、 IMAGE ボタンをクリックしてカメラを起動できます。
写真を撮ると、コンソールは画像オブジェクトで配列を記録します。
ステップ4C-ビデオ機能のキャプチャ
ビデオをキャプチャするために同じ概念を繰り返しましょう。 今回は videoCapture メソッドを使用します。
ビデオが保存されると、コンソールはもう一度配列を返します。 今回は内部にビデオオブジェクトがあります。
Cordova-ネットワーク情報
このプラグインは、デバイスのネットワークに関する情報を提供します。
手順1-ネットワーク情報プラグインのインストール
このプラグインをインストールするには、*コマンドプロンプト*を開き、次のコードを実行します-
ステップ2-ボタンを追加する
手順3-イベントリスナーの追加
ステップ4-関数の作成
ネットワークに接続されたアプリを起動すると、 onOnline 関数がアラートをトリガーします。
ネットワークから切断すると、 onOffline 関数が呼び出されます。
Cordova-スプラッシュスクリーン
このプラグインは、アプリケーションの起動時にスプラッシュスクリーンを表示するために使用されます。
手順1-スプラッシュスクリーンプラグインのインストール
スプラッシュスクリーンプラグインは、次のコードを実行して*コマンドプロンプト*ウィンドウにインストールできます。
ステップ2-スプラッシュスクリーンを追加する
スプラッシュ画面の追加は、他のCordovaプラグインの追加とは異なります。 config.xml を開き、次のコードスニペットを widget 要素内に追加する必要があります。
最初のスニペットは SplashScreen です。 platform/android/res/drawable -フォルダー内の画像の名前である value プロパティがあります。 Cordovaは、この例で使用しているデフォルトの screen.png 画像を提供していますが、おそらく独自の画像を追加する必要があります。 重要なことは、ポートレートビューとランドスケープビューの画像を追加し、さまざまな画面サイズをカバーすることです。
追加する必要がある2番目のスニペットは SplashScreenDelay です。 3秒後にスプラッシュスクリーンを非表示にするために、値*を *3000 に設定しています。
最後の設定はオプションです。 値が true に設定されている場合、画像は画面に合わせて拡大されません。 false に設定されている場合、引き伸ばされます。
アプリを実行すると、スプラッシュ画面が表示されます。
コルドバ-振動
このプラグインは、デバイスの振動機能に接続するために使用されます。
ステップ1-振動プラグインのインストール
次のコードを実行することで、このコマンドを*コマンドプロンプト*ウィンドウにインストールできます-
ステップ2-ボタンを追加する
プラグインをインストールしたら、 indexl にボタンを追加して、後で振動をトリガーするために使用できます。
手順3-イベントリスナーの追加
次に、 index.js の onDeviceReady 内にイベントリスナーを追加します。
ステップ4-関数を作成する
このプラグインは非常に使いやすいです。 2つの関数を作成します。
最初の機能は時間パラメータを取得しています。 このパラメーターは、振動の持続時間を設定するために使用されます。 VIBRATION ボタンを押すと、デバイスは3秒間振動します。
2番目の機能は、 pattern パラメーターを使用しています。 この配列は、デバイスに1秒間振動させてから、1秒間待機してからプロセスを再度繰り返します。
Cordova-ホワイトリスト
このプラグインにより、アプリのナビゲーション用のホワイトリストポリシーを実装できます。 新しいCordovaプロジェクトを作成すると、デフォルトで whitelist プラグインがインストールおよび実装されます。 config.xml ファイルを開いて、Cordovaが提供する allow-intent のデフォルト設定を確認できます。
ナビゲーションホワイトリスト
以下の簡単な例では、外部URLへのリンクを許可しています。 このコードは config.xml に配置されます。 file:// URLへのナビゲーションはデフォルトで許可されています。
アスタリスク記号*は、複数の値へのナビゲーションを許可するために使用されます。 上記の例では、 example.com のすべてのサブドメインへのナビゲーションを許可しています。 同じことがホストのプロトコルまたはプレフィックスに適用できます。
意図のホワイトリスト
システムを開くことを許可するURLを指定するために使用される allow-intent 要素もあります。 config.xml で、Cordovaがすでに必要なリンクのほとんどを許可していることがわかります。
ネットワークリクエストホワイトリスト
前の例と同じ原理が使用されます。
これにより、* http://example.com*からのすべてのネットワーク要求が許可されます。
コンテンツセキュリティポリシー
アプリの現在のセキュリティポリシーは、 indexl の head 要素で確認できます。
これはデフォルトの構成です。 あなたが同じ起源と example.com からすべてを許可したい場合は、使用することができます-
すべてを許可することもできますが、CSSとJavaScriptを同じ生成元に制限します。
これは初心者向けのチュートリアルなので、デフォルトのCordovaオプションをお勧めします。 Cordovaに慣れたら、いくつかの異なる値を試すことができます。
Cordova-ベストプラクティス
Cordovaはハイブリッドモバイルアプリの作成に使用されるため、プロジェクトで選択する前にこれを考慮する必要があります。 以下は、Cordovaアプリ開発のベストプラクティスです。
シングルページアプリ
これは、すべてのCordovaアプリに推奨される設計です。 SPAはクライアント側ルーターと単一ページに読み込まれたナビゲーションを使用しています(通常は indexl )。 ルーティングはAJAXを介して処理されます。 チュートリアルに従っている場合、ほとんどすべてのCordovaプラグインが使用可能になる前にデバイスの準備が整うまで待機する必要があることに気づいたでしょう。 SPAの設計により、読み込み速度と全体的なパフォーマンスが向上します。
タッチイベント
Cordovaはモバイルワールドで使用されるため、 click イベントの代わりに touchstart および touchend イベントを使用するのが自然です。 クリックイベントには300ミリ秒の遅延があるため、クリックはネイティブに感じられません。 一方、タッチイベントはすべてのプラットフォームでサポートされているわけではありません。 使用するものを決定する前に、これを考慮に入れる必要があります。
アニメーション
JavaScriptアニメーションの代わりに、ハードウェアアクセラレーションされた* CSSトランジション*を常に使用する必要があります。モバイルデバイスでのパフォーマンスが向上するためです。
ストレージ
可能な限りストレージキャッシュを使用します。 通常、モバイルネットワーク接続は不良であるため、アプリ内のネットワーク呼び出しを最小限に抑える必要があります。 また、ユーザーのデバイスがオフラインになる場合があるため、アプリのオフラインステータスも処理する必要があります。
スクロール
ほとんどの場合、アプリ内の最初の遅い部分はリストのスクロールです。 アプリのスクロールパフォーマンスを改善するには、いくつかの方法があります。 ネイティブスクロールを使用することをお勧めします。 リストに多数のアイテムがある場合、それらを部分的にロードする必要があります。 必要に応じてローダーを使用してください。
画像
画像もモバイルアプリの速度を低下させる可能性があります。 可能な限り、CSSイメージスプライトを使用する必要があります。 画像を拡大縮小するのではなく、完全に合わせるようにしてください。
CSSスタイル
影やグラデーションはページのレンダリング時間を遅くするため、避ける必要があります。
単純化
ブラウザのDOMは遅いため、DOM操作とDOM要素の数を最小限に抑えるようにしてください。
テスト
できるだけ多くのデバイスとオペレーティングシステムのバージョンでアプリをテストしてください。 アプリが1つのデバイスで問題なく動作する場合、他のデバイスまたはプラットフォームで動作するという意味ではありません。