次のステップ

Cordova CLIの使用方法とプラグインの活用方法を理解している開発者にとって、より優れたパフォーマンスの高いCordovaアプリケーションを構築するために、次に調査すべき事項がいくつかあります。次のドキュメントでは、ベストプラクティス、テスト、アップグレード、その他のトピックに関するアドバイスを提供しますが、規定されているものではありません。Cordova開発者としての成長の出発点と考えてください。また、改善できる点があれば、貢献してください！

Cordovaアプリのベストプラクティス

1) SPAはあなたの味方です

まず第一に、CordovaアプリケーションはSPA（シングルページアプリケーション）設計を採用する必要があります。大まかに定義すると、SPAはWebページの1つのリクエストから実行されるクライアントサイドアプリケーションです。ユーザーは初期リソースセット（HTML、CSS、およびJavaScript）を読み込み、さらに更新（新しいビューの表示、データの読み込み）はXHRリクエストを介して行われます。 SPAは、より複雑なクライアントサイドアプリケーションによく使用されます。 Gmailはその好例です。 Gmailを読み込んだ後、メールの表示、編集、整理はすべて、完全に新しいページを読み込むために現在のページを実際に離れるのではなく、DOMを更新することによって行われます。

SPAを使用すると、アプリケーションをより効率的な方法で整理するのに役立ちますが、Cordovaアプリケーションには特定の利点もあります。 Cordovaアプリケーションは、プラグインを使用する前に、devicereadyイベントが発生するのを待つ必要があります。 SPAを使用せず、ユーザーがクリックしてあるページから別のページに移動する場合、プラグインを使用する前にdevicereadyが再び発生するのを待つ必要があります。これは、アプリケーションが大きくなるにつれて忘れがちです。

Cordovaを使用しない場合でも、シングルページアーキテクチャを使用せずにモバイルアプリケーションを作成すると、パフォーマンスに深刻な影響が出ます。これは、ページ間を移動すると、スクリプト、アセットなどをリロードする必要があるためです。 これらのアセットがキャッシュされていても、パフォーマンスの問題は依然として発生します。

Cordovaアプリケーションで使用できるSPAライブラリの例は次のとおりです。

• React
• Vue.js
• Angular
• Ember.js
• Backbone.js
• Kendo UI
• Onsen UI

その他多数。

2) パフォーマンスに関する考慮事項

モバイルアプリケーションのパフォーマンスを向上させるには、次の問題を考慮してください。

• クリックとタッチ

  多くのデバイスでは、タップとタップしてズームのジェスチャを区別するために、クリックイベントに300ミリ秒の遅延が発生します。 これにより、アプリの反応が遅く感じられる可能性があります。 この遅延を回避することは、アプリの体感パフォーマンスを向上させるための最も重要な方法の1つです。

  タップ遅延の詳細については、Google Developersサイトの300ms tap delay, gone awayを参照してください。

  2015年現在、ほとんどのAndroidおよびiOSデバイスでは、遅延が発生しなくなりました。 AndroidとiOSの両方で、ビューポートメタタグにwidth=device-width値が設定されていることを確認してください。そうでない場合、タップ遅延が発生します。

• CSSトランジションとDOM操作

  ハードウェアアクセラレーションされたCSSトランジションを使用すると、JavaScriptを使用してアニメーションを作成するよりも劇的に優れたパフォーマンスが得られます。 例については、このセクションの最後にあるリソースのリストを参照してください。

• ネットワーク

  モバイルネットワークのレイテンシは、優れたモバイルネットワークであっても、おそらくあなたが考えているよりもはるかに悪いです。 30秒ごとに500行のJSONデータを読み込むデスクトップアプリは、モバイルデバイスとバッテリーの両方で低速になります。 Cordovaアプリには、アプリにデータを永続化する方法が複数あることに注意してください（たとえば、LocalStorageとファイルシステム）。 そのデータをローカルにキャッシュし、送受信するデータ量に注意してください。 これは、アプリケーションがセルラーネットワークに接続されている場合に特に重要な考慮事項です。

3) オフライン状態の認識と処理

ネットワークに関する前のヒントを参照してください。 低速ネットワーク上にいるだけでなく、アプリケーションが完全にオフラインになる可能性もあります。 アプリケーションはこれをインテリジェントな方法で処理する必要があります。 アプリケーションが処理しない場合、人々はアプリケーションが壊れていると考えるでしょう。 処理が非常に簡単なので（Cordovaはオフラインイベントとオンラインイベントの両方をリッスンすることをサポートしています）、アプリケーションがオフラインで実行されたときに適切に応答しない理由はありません。 アプリケーションをテストし（以下の「テスト」セクションを参照）、アプリケーションがある状態で開始してから別の状態に切り替えたときの処理方法をテストしてください。

オンラインイベントとオフラインイベント、およびネットワーク接続APIは完璧ではないことに注意してください。 デバイスが本当にオフラインかオンラインかを確認するには、XHRリクエストを使用する必要がある場合があります。 結局のところ、ネットワーク問題のサポートを追加してください。実際、Apple Store（およびおそらく他のストア）は、オフライン/オンライン状態を適切に処理しないアプリを拒否します。 このトピックの詳細については、「Is This Thing On?」を参照してください。

アップグレードの処理

Cordovaプロジェクトのアップグレード

Cordovaプロジェクトのアップグレードコマンドはありません。 代わりに、プロジェクトからプラットフォームを削除し、再度追加して最新バージョンを取得します

cordova platform rm android
cordova platform add android

更新されたバージョンで行われた変更点について理解しておくことが非常に重要です。更新によってコードが壊れる可能性があります。 この情報を見つけるのに最適な場所は、リポジトリとCordovaブログの両方で公開されているリリースノートです。 更新を実行した後、アプリが正しく機能していることを確認するために、アプリを徹底的にテストする必要があります。

注：一部のプラグインは、Cordovaの新バージョンと互換性がない場合があります。 プラグインに互換性がない場合は、必要なことを実行する代替プラグインを見つけるか、プロジェクトのアップグレードを遅らせる必要がある場合があります。 あるいは、新しいバージョンで動作するようにプラグインを変更し、コミュニティに貢献してください。

プラグインのアップグレード

プラグインのアップグレードには、プラットフォームと同じプロセスが含まれます。削除してから、再度追加します。

cordova plugin rm some-plugin
cordova plugin add some-plugin

詳細については、バージョンとプラットフォームの管理を参照してください。

更新されたプラグインのドキュメントを確認してください。新しいバージョンで動作するようにコードを調整する必要がある場合があります。 また、プラグインの新バージョンがプロジェクトのCordovaのバージョンで動作することを再確認してください。

常にアプリをテストして、新しいプラグインのインストールによって予期しない問題が発生していないことを確認してください。

プロジェクトに更新が必要なプラグインが多数ある場合は、1つのコマンドでプラグインを削除して追加するシェルスクリプトまたはバッチスクリプトを作成すると、時間を節約できる場合があります。

Cordovaアプリのテスト

アプリケーションのテストは非常に重要です。 CordovaチームはJasmineを使用していますが、Webフレンドリーな単体テストソリューションであれば何でも使用できます。

シミュレーターと実際のデバイスでのテスト

Cordovaアプリケーションを開発する際に、デスクトップブラウザとデバイスシミュレータ/エミュレータを使用することは珍しくありません。 ただし、できるだけ多くの物理デバイスでアプリをテストすることが非常に重要です

• シミュレータはまさにそれです：シミュレータ。 たとえば、アプリはiOSシミュレータで問題なく動作する可能性がありますが、実際のデバイスでは（特にメモリが少ない状態など、特定の状況で）失敗する可能性があります。 また、アプリはシミュレータでは実際に失敗する可能性がありますが、実際のデバイスでは正常に動作します。
• エミュレータはまさにそれです：エミュレータ。 アプリが物理デバイスでどの程度うまく動作するかを表すものではありません。 たとえば、一部のエミュレータではアプリが文字化けして表示される場合がありますが、実際のデバイスでは問題ありません。 （この問題が発生した場合は、エミュレータでホストGPUを無効にしてください。）
• シミュレータは一般に物理デバイスよりも高速です。 一方、エミュレータは一般に低速です。 シミュレータまたはエミュレータでのパフォーマンスによってアプリのパフォーマンスを判断しないでください。 さまざまな実際のデバイスでの動作によって、アプリのパフォーマンスを判断してください。
• シミュレータまたはエミュレータを使用して、アプリがタッチにどのように反応するかを適切に把握することは不可能です。 代わりに、実際のデバイスでアプリを実行すると、ユーザーインターフェイス要素のサイズ、応答性などの問題を指摘できます。
• プラットフォームごとに1つのデバイスだけでテストできれば良いのですが、さまざまなOSバージョンの多くのデバイスでテストするのが最善です。 たとえば、特定のAndroidスマートフォンで動作するものが、別のAndroidデバイスでは失敗する可能性があります。 最新のiOSデバイスで動作するものが、古いデバイスでは失敗する可能性があります。

もちろん、市場に出回っているすべてのデバイスでテストすることは不可能です。 このため、さまざまなデバイスを持っている多くのテスターを募集することをお勧めします。 彼らはすべて

Cordova アプリのデバッグ

ほとんどの場合、Cordova アプリのデバッグは非常に簡単です。

iOS デバッグ

Xcode

Xcode を使用すると、Cordova アプリケーションの iOS ネイティブ側をデバッグできます。デバッグエリアが表示されていることを確認してください（表示 -> デバッグエリア）。アプリがデバイス（またはシミュレーター）で実行されると、デバッグエリアでログ出力を表示できます。エラーや警告が表示されるのはここです。ソースファイル内にブレークポイントを設定することもできます。これにより、コードを 1 行ずつステップ実行し、その時点での変数の状態を確認できます。ブレークポイントに達すると、変数の状態がデバッグエリアに表示されます。アプリがデバイスで起動して実行されたら、Safari の Web インスペクタ（下記参照）を起動して、アプリケーションの Web ビューと JS 側をデバッグできます。詳細については、Apple デバッグサポートドキュメントを参照してください。

Web インスペクタを使用した Safari リモートデバッグ

Safari の Web インスペクタを使用すると、Cordova アプリケーションの Web ビューと JS コードをデバッグできます。これは macOS でのみ機能します。Safari を使用してデバイス（またはシミュレーター）に接続し、ブラウザの開発ツールを Cordova アプリケーションに接続します。開発ツールから期待されるものが得られます - DOM の検査/操作、JavaScript デバッガ、ネットワーク検査、コンソールなど。Xcode と同様に、Safari の Web インスペクタを使用すると、JavaScript コードにブレークポイントを設定し、その時点での変数の状態を確認できます。コンソールに出力されるエラー、警告、またはメッセージを表示できます。アプリの実行中に、コンソールから直接 JavaScript コマンドを実行することもできます。

検査を開始するには、まずデバイスで `設定 > Safari > 詳細 > Web インスペクタ` を有効にします。デスクトップでは、`Safari > 環境設定 > 詳細 > メニューバーに「開発」メニューを表示` から開発ツールを有効にします。「開発」メニューで、接続されているデバイスと検査するアプリを選択できるようになります。

Chrome リモートデバッグ

Safari バージョンとほぼ同じですが、これは Android のみで動作しますが、どのデスクトップオペレーティングシステムからでも使用できます。接続すると、デスクトップアプリケーションと同じ Chrome Dev Tools エクスペリエンスをモバイルアプリケーションで得ることができます。さらに、Chrome Dev Tools には、モバイルデバイスで実行されているアプリを表示するミラーオプションがあります。これは単なるビュー以上のものです - 開発ツールからスクロールしてクリックすると、モバイルデバイスで更新されます。

検査するには、デスクトップの Chrome で URL `chrome://inspect` を開きます。ここに、接続されているデバイスと検査可能なアプリのリストが表示されます。これが機能するには、デバイスが USB デバッグ用に設定されている必要があります。設定方法の詳細な手順は、https://developers.google.com/chrome/mobile/docs/debugging にあります。

デバイスが検査デバイスセクションに表示されているが、Cordova Web ビューが表示されない場合は、`AndroidManifest.xml` の `<application>` ノードに `android:debuggable="true"` を追加する必要がある場合があります。

WebKit プロキシを介して Chrome Dev Tools を使用して iOS アプリを検査することも可能です：https://github.com/google/ios-webkit-debug-proxy/

ユーザーインターフェース

モバイルで見栄えの良い Cordova アプリケーションを構築することは、特に開発者にとって難しい場合があります。多くの人が UI フレームワークを使用してこれを容易にすることを選択しています。検討したいオプションの短いリストを次に示します。

• Ionic - この強力な UI フレームワークには、実際にはプロジェクトの作成を処理する独自の CLI があります。
• Ratchet - Bootstrap を作成した人々によって提供されています。
• Kendo UI - Telerik のオープンソース UI およびアプリケーションフレームワーク。
• Onsen UI - Web サイトと Cordova アプリの両方を対象としたオープンソース UI フレームワーク
• Topcoat
• ReactJS

ユーザーインターフェースを構築する際には、ターゲットとするすべてのプラットフォームとユーザーの期待の違いについて考えることが重要です。たとえば、iOS スタイルの UI を持つ Android アプリケーションは、ユーザーには受け入れられない可能性があります。これは、さまざまなアプリケーションストアによって強制されることさえあります。このため、各プラットフォームの規則を尊重し、したがって、さまざまなヒューマンインターフェースガイドラインに精通していることが重要です。

• iOS
• Android

特別な考慮事項

Cordova はクロスプラットフォーム開発を容易にしますが、基盤となるネイティブプラットフォームから 100% 分離することは不可能であるため、制限事項に注意してください。

プラットフォームの癖

ドキュメントを読む際には、複数のプラットフォームでの異なる動作や要件の概要を示すセクションを探してください。存在する場合、これらは「Android の癖」、「iOS の癖」などのセクションにあります。これらの癖を読んで、Cordova で作業する際にそれらに注意してください。

リモートコンテンツの読み込み

リモートでロードされた HTML ページ（デバイスにローカルに保存されていない HTML ページ）から Cordova JavaScript 関数を呼び出すことは、サポートされていない構成です。これは、Cordova がこのために設計されておらず、Apache Cordova コミュニティがこの構成のテストを行っていないためです。状況によっては機能する場合がありますが、推奨もサポートもされていません。同一オリジンポリシー、JavaScript と Cordova のネイティブ部分を同じバージョンで同期させること（変更される可能性のあるプライベート API を介して結合されているため）、リモートコンテンツがネイティブのローカル関数を呼び出すことの信頼性、アプリストアでの拒否の可能性など、課題があります。 。

Web ビューでのリモートでロードされた HTML コンテンツの表示は、Cordova の InAppBrowser を使用して行う必要があります。InAppBrowser は、上記の理由により、そこで実行されている JavaScript が Cordova JavaScript API にアクセスできないように設計されています。セキュリティガイドを参照してください。

最新の状態に保つ

Cordova の最新情報を入手するには、次のようないくつかの方法があります。

• Cordova ブログを購読する。
• 開発者リストを購読する。注 - これはサポートグループではなく、Cordova の開発について話し合う場所です。

ヘルプの取得

Cordova のヘルプを得るための最適なリンクは次のとおりです。

• GitHub ディスカッション - Apache Cordova

  公式の Apache Cordova GitHub ディスカッションチャンネルは、サポートリソースに加わったばかりで、コミュニティの議論と質問を GitHub リポジトリ内に集中させることを目的としています。

  このチャンネルは、Cordova に関するすべてのことをまとめて、議論の完全な履歴を保持できるという利点があるため、強くお勧めします。GitHub ディスカッションを活用することで、将来の参照のためにより良い継続性とアクセシビリティを確保できます。

• Slack - Apache Cordova

  公式の Apache Cordova Slack ワークスペースは、コミュニティからヘルプを求めたり、質問に対する迅速な回答を得たりするための優れたリソースです。

  ただし、Slack ワークスペースはメッセージ履歴を保持しないことに注意してください。これにより、長期的に情報のアクセスが制限されます。質問をより適切に保持するには、GitHub ディスカッションでスレッドを作成し、そのリンクと質問の概要を Slack で共有することをお勧めします。

  こうすることで、Slack の即時応答性を利用しながら、議論を保存し、将来の参照のためにアクセスしやすくすることができます。

• Stack Overflow - Apache Cordova

  Stack Overflow では、「cordova」タグを使用してすべての Cordova の質問を閲覧できます。

  注：Stack Overflow は、過去の質問を維持するために「phonegap」タグを自動的に「cordova」に変換します。

  Stack Overflow には広範で多様なコミュニティがあるため、質問の内容に応じて結果を得るための優れた選択肢となります。たとえば、Cordova アプリを開発している場合でも、質問が Web またはネイティブアプリ開発に関連している場合は、このプラットフォームを利用する方が適している可能性があります。そうすることで、質問を、それらの特定の分野を専門とするより幅広いコミュニティに公開することになります。

• Google グループ - PhoneGap

  この Google グループは、以前は PhoneGap として知られていた Cordova のサポートフォーラムでした。このグループは現在非アクティブですが、過去の参考資料としてアクセスできます。

  GitHub ディスカッション、Stack Overflow、Slack などの代替プラットフォームを利用して、サポートを得たり、Cordova コミュニティと交流したりすることをお勧めします。これらのプラットフォームは、支援と議論のためによりアクティブに活動しています。