モバイルアプリケーションは、スマートフォンやタブレットからスマートウォッチに至るまで、あらゆる場所に忍び寄り、まもなく他のウェアラブルにも登場します。ただし、リソースが限られている場合や、開発者が1人ではなく単一の開発者である場合は特に、個別のモバイルプラットフォームごとに開発することは徹底的な作業になる可能性があります。 モバイルアプリ開発会社 。
これは、 精通したApacheCordova開発者 HTML5、CSS3、JavaScriptなどの標準的なWebテクノロジーを使用してモバイルアプリケーションを開発する方法を提供することで、便利になります。
2009年、Nitobiというスタートアップが、開発者が標準のWebテクノロジーを使用してモバイルアプリケーションを作成できるようにすることを目的として、ネイティブモバイルリソースにアクセスするためのオープンソースAPIであるPhoneGapを作成しました。 Nitobiのビジョンでは、ほとんどのモバイルアプリケーションは間もなくPhoneGapを使用して開発されますが、パフォーマンスの問題や特定のハードウェアにアクセスする方法がないため、開発者は必要に応じてネイティブコードを作成することもできます。
本当にそんなことはありません。何が起こったのかというと、アドビは2011年にNitobiを買収し、オープンソースコアをApache Software Foundationに寄付し、ApacheCordovaのブランドを変更しました。よく遭遇する一般的な例えは、CordovaはPhoneGapであり、WebKitはChromeまたはSafariであるというものです。
明らかに、CordovaとPhoneGapの違いは最初は最小限でした。時間とともに、 Adobe PhoneGap コルドバはオープンソースコミュニティによってサポートされていましたが、現在もサポートされていますが、独自の機能セットを開発しました。このApacheCordovaのレビューとチュートリアルでは、Cordovaアプリの開発について詳しく説明します。その一部は、PhoneGapに適用される場合がありますが、これはPhoneGapチュートリアルと見なすべきではありません。 それ自体 。
本質的に、Cordovaには、ネイティブに開発されたアプリケーションに関して制限はありません。 Cordovaで得られるのは、ネイティブコードのラッパーとして機能し、デバイス間で一貫性のあるJavaScriptAPIです。 Cordovaは、デバイスの画面全体をカバーするWebビューを備えたアプリケーションコンテナーと見なすことができます。 Cordovaで使用されるWebビューは、ネイティブオペレーティングシステムで使用されるWebビューと同じです。 iOSでは、これがデフォルトのObjective-CですUIWebView
またはカスタムWKWebView
クラス; Androidの場合、これはandroid.webkit.WebView
です。
Apache Cordovaには、デバイスのカメラ、GPS、ファイルシステムなどへのアクセスを提供する、事前に開発されたプラグインのセットが付属しています。モバイルデバイスが進化するにつれて、追加のハードウェアのサポートを追加するだけで、新しいプラグインを開発できます。
.hファイルc ++
最後に、Cordovaアプリケーションがインストールされます ネイティブアプリケーションと同じように 。つまり、iOS用にコードをビルドするとIPAファイルが生成され、Android用にAPKファイルが生成され、WindowsPhone用にビルドするとXAPファイルが生成されます。開発プロセスに十分な努力を払うと、ユーザーはネイティブアプリケーションを使用していないことに気付かない可能性があります。
コルドバで開発するときにたどることができる2つの基本的なパスがあります。
プラットフォーム中心の開発への切り替えはかなり簡単なので、通常はクロスプラットフォーム開発ワークフローから始めることをお勧めします。ただし、最初にプラットフォーム中心のワークフローを開始した場合、ビルドプロセスを実行すると、CLIによってカスタマイズが上書きされるため、クロスプラットフォーム開発に切り替えることはできません。
Cordovaに関連するものをインストールして実行する前に、アプリケーションを構築する予定のプラットフォームごとにSDKをインストールする必要があります。この記事では、Androidプラットフォームに焦点を当てます。ただし、他のプラットフォームを含むプロセスも同様です。
見つかったAndroidSDKをダウンロードする必要があります ここに 。 Windowsの場合、SDKはインストーラーとして提供されますが、LinuxおよびOSXの場合、SDKは簡単に抽出できるアーカイブとして提供されます。パッケージを抽出/インストールした後、sdk/tools
を追加する必要がありますおよびsdk/platform-tools
あなたのPATH
へのディレクトリ変数。 PATH
変数は、ビルドプロセスに必要なバイナリを探すためにCordovaによって使用されます。 Javaがインストールされていない場合は、先に進んでAntと一緒にJDKをインストールする必要があります。 ANT_HOME
およびJAVA_HOME
JDKとAntのbinフォルダーに設定する必要があり、Android SDKをインストールした後、ANDROID_HOME
を設定します。 Android/Sdk
への変数。 3つのすべての場所*_HOME
変数もPATH
に含める必要があります変数。
SDKをインストールした後android
コマンドがコマンドラインで使用できるようになります。それを実行してSDKマネージャーを開き、最新のツールとAndroidAPIをインストールします。あなたはおそらく必要になるでしょう Android SDKツール、Android SDKプラットフォームツール、Android SDKビルドツール、SDKプラットフォーム、Google API Intel x86 Atomシステムイメージ、AndroidSDKのソース そして Intel x86エミュレーターアクセラレーター(HAXMインストーラー) 。その後、android avd
を使用してエミュレーターを作成できるようになります。
Cordova CLIはNode.jsとGitクライアントに依存しているため、先に進んでNodeをダウンロードしてインストールします。 nodejs.org 、およびGit from git-scm.com 。 npmを使用してCordovaCLI自体をインストールし、追加のプラグインをインストールします。Cordovaは、必要な依存関係をダウンロードするために、舞台裏でgitを使用します。最後に、実行します
npm install -g cordova
…CordovaCLIをグローバルにインストールする(npm install cordova
だけでは不十分です)。
要約すると、これらはあなたが必要とするパッケージです:
そして、これらの環境変数を更新する必要があります。
PATH
JAVA_HOME
ANT_HOME
ANDROID_HOME
Cordovaが正常にインストールされていれば、Cordovaコマンドラインユーティリティにアクセスできるはずです。ターミナルまたはコマンドラインを開き、最初のCordovaプロジェクトを作成するディレクトリに移動します。アプリケーションをブートストラップするには、次のコマンドを入力します。
cordova create toptal toptal.hello HelloApeeScape
コマンドラインは、コマンドの名前cordova
と、それに続くサブコマンドcreate
で構成されます。サブコマンドは、アプリケーションが配置されるフォルダー、アプリケーションの名前空間、およびその表示名の3つの追加パラメーターを使用して呼び出されます。これにより、次の構造のフォルダーにアプリケーションがブートストラップされます。
toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml
www
フォルダにはアプリケーションコアが含まれています。ここに、すべてのプラットフォームに共通のアプリケーションコードを配置します。
Cordovaを使用すると、さまざまなプラットフォーム用のアプリを簡単に開発できますが、カスタマイズを追加する必要がある場合もあります。複数のプラットフォーム向けに開発する場合、さまざまなplatforms/[platform-name][assets]/www
のソースファイルを変更する必要はありません。ディレクトリは定期的にトップレベルで上書きされるためwww
ファイル。
この時点で、config.xml
を開くこともできます作成者や説明など、アプリケーションのメタデータをファイルして変更します。
以下を使用して最初のプラットフォームを追加します。
cordova platform add android
後で気が変わった場合は、ビルドプロセスからプラットフォームを簡単に削除できます。
cordova platform rm android
プラットフォームディレクトリを調べると、android
に気付くでしょう。その中のフォルダ。追加するプラットフォームごとに、Cordovaはプラットフォームに新しいディレクトリを作成し、www
を複製します。その中のフォルダ。たとえば、Android向けにアプリケーションをカスタマイズする場合は、platforms/android/assets/www
のファイルを変更できます。プラットフォーム固有のシェルツールに切り替えます。
焦点を絞った設計の質問をする方法を学ぶ
ただし、CLI(クロスプラットフォーム開発に使用)を使用してアプリケーションを再構築すると、Cordovaは各プラットフォームに加えた変更を上書きするため、バージョン管理下にあることを確認するか、プラットフォーム固有の変更を行ってください。クロスプラットフォーム開発が終了した後の変更。先に述べたように、クロスプラットフォームからプラットフォーム固有の開発への移行は簡単です。他の方向に移動することはできません。
クロスプラットフォームワークフローを引き続き使用し、プラットフォーム固有のカスタマイズを行う場合は、最上位のマージフォルダーを使用する必要があります。 Cordovaバージョン3.5以降、このフォルダーはデフォルトのアプリケーションテンプレートから削除されましたが、必要に応じて、他のトップレベルディレクトリ(hooks
、platforms
、| _)と一緒に簡単に作成できます。 + _ |、およびplugins
)。
プラットフォーム固有のカスタマイズはwww
に配置され、トップレベルのソースファイルの後に適用されますmerges/[platform-name]
フォルダ。このようにして、特定のプラットフォーム用に新しいソースファイルを追加するか、トップレベルのソースファイル全体をプラットフォーム固有のソースファイルで上書きすることができます。たとえば、次の構造を考えてみましょう。
www
この場合、Androidの出力ファイルにはmerges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js
の両方が含まれます。およびapp.js
ただし、Windows Phone8の出力ファイルにはandroid.js
のみが含まれます。 app.js
にあるファイルmerges/wp8
内のファイル以降のフォルダmerges/[platform]
内のファイルをオーバーライドします。
プラグインディレクトリには、各プラットフォームのプラグインの情報が含まれています。この時点では、www
のみが必要です。次の構造を持つ必要があるファイル:
android.json
アプリケーションをビルドしてAndroidデバイスにデプロイしましょう。必要に応じて、エミュレーターも使用できます。
Cordovaは、アプリを構築および実行するためのいくつかのCLIステップを提供します:{ 'prepare_queue': { 'installed': [], 'uninstalled': [] }, 'config_munge': { 'files': {} }, 'installed_plugins': {}, 'dependent_plugins': {} }
、cordova prepare
、cordova compile
(これは前の2つのショートカットです)、cordova build
およびcordova emulate
(これにはcordova run
が組み込まれており、エミュレーターも実行できます)。ほとんどの場合、エミュレーターでアプリをビルドして実行したいので、これで混乱することはありません。
build
必要に応じて、USBポートを介してデバイスを接続し、USBデバッグモードを有効にして、最初のApacheCordovaアプリケーションを次のコマンドを実行するだけでデバイスに直接デプロイできます。
cordova run --emulator
これにより、すべてのファイルがcordova run
にコピーされます。必要なすべてのタスクを実行します。
アプリケーションをビルドするプラットフォームの名前や特定のエミュレーターを指定することで、ビルドプロセスの範囲を制限できます。例:
platforms/*
または
cordova run android --emulator
Cordovaとそのプラグインの使用法を示す簡単なチュートリアルアプリケーションを作成しましょう。デモ全体はにあります このGitHubリポジトリ ダウンロードして、この短いCordovaチュートリアルと一緒にその一部を確認できるようにします。
作成した初期設定を使用して、コードを追加します。架空のApeeScapeデータベースに新しいプロジェクトを追加し、既存のプロジェクトを表示したいとします。 index.htmlを開き、次の方法で2つのタブを設定します。
cordova run ios --emulator --target='iPhone-8-Plus'
Bootstrapとを追加したことに注意してください jQuery 依存関係としてのモバイル。最新のハイブリッドアプリケーションを構築するために、はるかに優れたソリューションとフレームワークが開発されていることに注意してください。ただし、ほとんどの(すべてではないにしても)Web開発者は、これら2つのライブラリに精通しているため、初心者向けのチュートリアルに使用するのが理にかなっています。必要に応じて、GitHubからスタイルシートをダウンロードするか、独自のスタイルシートを使用できます。
Hello ApeeScape
に移動しましょうファイルを作成し、次のように削除します。
index.js
Cordovaアプリケーションの推奨アーキテクチャは、シングルページアプリケーション(SPA)のセットアップであることを忘れないでください。このように、すべてのリソースはアプリの起動時に1回だけ読み込まれ、アプリケーションが実行されている限りWebビューにとどまることができます。さらに、SPAを使用すると、ネイティブアプリケーションで一般的ではないページのリロードがユーザーに発生しなくなります。そのことを念頭に置いて、2つのタブを切り替える簡単なコントローラーを設定しましょう。
var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener('deviceready', this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();
これまでのところ、コントローラーには2つのメソッドがあります。1つは検索ビューをレンダリングするためのもので、もう1つはプロジェクト後ビューをレンダリングするためのものです。 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }
で初期化しましょう最初にファイルを上部で宣言し、onDeviceReadyメソッドで作成します。
index.js
// top of index.js var controller = null
最後に、// inside onDeviceReady method controller = new Controller();
にスクリプト参照を追加しますindex.html
への参照の上。検索ビューと投稿ビューはGitHubから直接ダウンロードできます。部分ビューはファイルから読み取られるため、Chromeなどの一部のブラウザは、ページをレンダリングしようとしているときに、クロスドメインリクエストについて文句を言います。
ここで考えられる解決策は、たとえばindex.js
を使用してローカル静的サーバーを実行することです。 npmモジュール。また、ここでは、PhoneGapやIonicなどのフレームワークの使用について考え始めることができます。それらはすべて、ブラウザーでのエミュレート、ホットリロード、コード生成(スキャフォールディング)など、さまざまな開発ツールを提供します。
とりあえず、以下を実行してAndroidデバイスにデプロイしましょう。
node-static
この時点で、アプリケーションには2つのタブがあります。最初のタブでは、プロジェクトを検索できます。
2番目のタブでは、新しいプロジェクトを投稿できます。
現在あるのは、Webビュー内で実行される従来のWebアプリケーションだけです。ネイティブ機能は実際には使用していないので、今すぐ使用してみましょう。よくある質問は、データをデバイスにローカルに保存する方法、より正確には、使用するストレージの種類です。行くにはいくつかの方法があります:
LocalStorageは少量のデータを保存するのに問題ありませんが、使用可能なスペースが3〜10 MBであるため、データ集約型のアプリケーションを構築している場合は十分ではありません。この場合、IndexedDBがより良いソリューションになる可能性があります。 WebSQLは非推奨であり、一部のプラットフォームではサポートされていません。最後に、Webサービスを使用してデータをフェッチおよび変更することは、SPAパラダイムにうまく適合しますが、アプリケーションがオフラインになると機能しなくなります。 PWAの手法とサービスワーカーが最近、これを支援するためにコルドバの世界に登場しました。
また、Cordovaのコアのギャップを埋めるために、追加のサードパーティプラグインが多数用意されています。ファイルプラグインは、デバイスのファイルシステムへのアクセスを提供し、ファイルの作成と保存を可能にするため、非常に便利な場合があります。とりあえず、ローカルSQLiteデータベースを提供するSQLitePluginを試してみましょう。次のコマンドを実行して、プロジェクトに追加できます。
sとcの法人の違い
cordova run android
SQLitePluginは、デバイスのSQLiteデータベースにAPIを提供し、真の永続化メカニズムとして機能します。次の方法で簡単なストレージサービスを作成できます。
cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin
GitHubからプロジェクトをフェッチおよび追加するためのコードをダウンロードして、それぞれのプレースホルダーに貼り付けることができます。 Controller.jsの上のindex.htmlファイルにSQLiteStorageService.jsを追加し、コントローラーのinit関数を変更してコントローラーで初期化することを忘れないでください。
SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: 'demo.toptal', location: 'default'}) : window.openDatabase('demo.toptal', '1.0', 'DB para FactAV', 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }
service.addProject()を垣間見ると、navigator.geolocation.getCurrentPosition()メソッドが呼び出されていることがわかります。 Cordovaには、電話の現在地を取得するために使用できるジオロケーションプラグインがあり、navigator.geolocation.watchPosition()メソッドを使用して、ユーザーの位置が変更されたときに更新を受信することもできます。
最後に、データベースにプロジェクトを追加およびデータベースからフェッチするためのコントローラーイベントハンドルを追加しましょう。
initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }
コンソールとダイアログプラグインを追加するには、以下を実行します。
renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $('#tab-content').load('./views/post-project-view.html', function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $('#tab-content').load('./views/search-project-view.html', function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = ' Click to open map '; $div.find('.project-location').html(url); } else { $div.find('.project-location').text('Not specified'); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }
cordova.consoleプラグインは、cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console
を有効にすることで、デバッグを支援します。エミュレーター内で機能します。
これらのどれがサーバー側のWebアプリケーションの保護が難しい理由ではありません
Chromeリモートデバッガーを使用してAndroidアプリケーションを簡単にデバッグできます。デバイスを接続したら、右上隅([X]ボタンの下)にあるドロップダウンメニューをクリックし、[その他のツール]を展開して、[デバイスの検査]をクリックします。リストにデバイスが表示され、デバッグコンソールを開くことができるはずです。
Safariは、USB接続デバイスまたはエミュレーターで実行されるiOSアプリをデバッグするための同じ機能を提供します。 [Safariの設定]> [詳細設定]タブで開発ツールを有効にするだけです。
cordova.dialogsプラグインは、ネイティブ通知を有効にします。一般的な方法は、console.log()
を再定義することです。次の方法でcordova.dialogsAPIを使用するメソッド:
windows.alert
overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback 'ApeeScape', // title 'OK' // buttonName ); }; } }
関数はoverrideBrowserAlert
内で呼び出す必要がありますイベントハンドラ。
これで、データベースから新しいプロジェクトを追加したり、既存のプロジェクトを表示したりできるようになります。 [場所を含める]チェックボックスを選択すると、デバイスはGeolocation APIを呼び出し、現在の場所をプロジェクトに追加します。
アイコンとスプラッシュ画面を設定して、アプリケーションに最後の仕上げを加えましょう。以下をdeviceready
に追加しますファイル:
config.xml
最後に、ロゴ画像をwww/img
に配置しますフォルダ。
Apache Cordovaアプリ開発の基本的な手順を実行し、独自のJavaScriptアーキテクチャを使用して CSSスタイルシート 。このCordovaチュートリアルは、使い慣れたテクノロジを使用してモバイルアプリケーションを開発する手段として、Apache Cordovaの可能性を示し、開発時間と、さまざまなプラットフォーム用に複数のアプリケーションを構築するために必要な労力の両方を削減する試みでした。
ただし、本番環境に移行するアプリケーションを構築する場合は、既存のフレームワークを使用することをお勧めします。事前定義されたアーキテクチャでアプリケーションを構造化することに加えて、これにより、アプリケーションをネイティブのルックアンドフィールに近づけるのに役立つ一連のコンポーネントが提供される場合もあります。注目に値するいくつかのフレームワークは イオン 、 Framework7 、 ウィックス 、 ラチェット 、 Kendo UI 、および Onsen UI 。頑張ってください!
関連: Cordovaフレームワーク:IonicとFramework7Apache Cordovaは、標準のWebテクノロジーを使用してクロスプラットフォームのモバイルアプリを作成するためのフレームワークです。基本的に、これはデバイスの画面全体をカバーするWebビューを備えたアプリケーションコンテナです。
現在、PhoneGapは、ApacheCordovaの上にAdobeによって構築された製品を指します。もともとは、Adobeがそれらを取得してApacheCordovaとしてオープンソース化する前にNitobiによって作成されたフレームワークでした。
AndroidのWebViewとiOSのUIWebViewは、それぞれのオペレーティングシステムがWebページを全画面表示するために使用するクラスです。開発者はそれらを使用してWebブラウザーを構築できます。または、Apache Cordovaの場合は、それらを使用して、ネイティブアプリであるかのようにWebアプリを表示できます。
Apache Cordovaプラグインを使用すると、クロスプラットフォーム機能にさらにアクセスできます。これらは、ジオロケーションなどのハードウェアベースのサービス、またはOSが提供するSQLiteデータベースアクセスなどの純粋なソフトウェアベースの機能です。