Androidフォンを取得した後、 brainexer Webサイトからモバイルアプリケーションを作成するという課題が生じました。 選択肢はjQuery MobileとPhoneGapにありました 。 これまでは、モバイル開発の分野での知識がなかったため、新しい情報の層を実現する必要がありました。そこからスクイーズを共有したいと思います。 その結果、この記事は小さなクイックスタート-htmlファイルのパックからGoogle Playに公開されたアプリケーションを取得する方法です。
jQuery Mobile
まず、余分なもの（メニュー、フッターなど）をすべて削除し、メインコンテンツをdata-role = "content"の標準テンプレートに配置します。
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1></h1> </div> <div data-role="content"> <p></p> </div> </div> </body> </html>
ビルドする前に、jsファイルとcssファイルをローカルバージョンに変更することを忘れないでください。
メニューは、collapsible-setとlistviewで構成されるアコーディオンの形式で、index.htmlの開始ページに配置できます。
<div data-role="collapsible-set" data-theme="b"> <div data-role="collapsible"> <h3> 1</h3> <ul data-role="listview"> <li><a href="page1.html"> 1</a></li> <li><a href="page2.html"> 2</a></li> </ul> </div> <div data-role="collapsible"> <h3> 2</h3> <ul data-role="listview"> <li><a href="page3.html"> 3</a></li> </ul> </div> </div>
JQuery Mobileには、いくつかのトピック[ae]と、使用したい指定したdata-theme属性があります。 「B」は青です。
サイトがモーダルダイアログを使用する場合、次のように実装できます。 ブロックはページに配置されます
<div id="dialog1" data-role="page"> <div data-role="header"> <h1> </h1> </div> <div data-role="content"> <p> </p> </div> </div>
ビューリンク、
<a data-rel="dialog" href="#dialog1"> </a>
ダイアログをクリックして開きます。
ページに追加のメニューが必要な場合は、右側のヘッダーに配置できます。 この場合、タイトル自体を左にシフトする必要があります。そうしないと、ボタンがタイトルの上に表示されます。
<div data-role="header"> <h1 style="text-align:left;margin-left:15px;"></h1> <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right"> <a data-rel="dialog" data-iconpos="notext" data-icon="gear" data-role="button" href="#dialog1"></a> <a data-rel="dialog" data-iconpos="notext" data-icon="bars" data-role="button" href="#dialog2"></a> </div> </div>
ここでは、テキストdata-iconpos = "notext"なしでアイコンdata-icon = "gear"を使用するボタンコントロールdata-role = "button"を使用します。
実際、これはアプリケーションに必要な全体の基礎です。 他のすべてのコントロールは、Webサイトで見つけることができます。
view.jquerymobile.com/1.3.2/dist/demos
Phonegap
次のステップは、apkで発生したすべてをパックすることです。
まず、 phonegap自体がインストールされた後、 nodejs.orgがインストールされます
npm install -g phonegap
HelloWorldアプリの作成
phonegap create MyApp
すべてのhtmlファイルは、wwwフォルダーのindex.htmlスタートページに配置されます。
アプリケーションを構築するには2つのオプションがあります。
1）Android SDKをダウンロードし、phonegapビルドを実行すると、ローカル環境が使用されます。 SDKをインストールする主な利点は、Androidエミュレーターを使用できることですが、マイナスもあり、非常にブレーキがかかります。
2）サービスbuild.phonegap.comを使用します-その主なタスクは、開発者がさまざまなプラットフォーム用にアセンブリの環境を構成する必要がないようにすることです。 つまり、sdk Android、Windows Phoneをインストールせずに、apk、xapなどをビルドできます。 唯一の質問は、それらをテストする対象です。 複数のアプリケーションがある場合、このオプションのマイナスが表示されます。 1つのプライベートプロジェクトのアセンブリのみが無料で利用できるため。
build.phonegap.comを使用してアプリケーションをビルドするには、実行します
phonegap remote build android
プラグイン
カメラやファイルシステムへのアクセスなど、電話から直接何かが必要な場合は、特別なコマンドを使用してこれを報告する必要があります。 たとえば、私の音声はhtmlオーディオを使用して再生されますが、Androidには問題があります。そのため、ユーザーロケールを取得してインターフェイス言語を選択するためにMediaプラグインを使用する必要がありました。グローバリゼーションプラグインが必要です。
Cordovaをインストールする
npm install -g cordova
それに応じて、アプリケーションフォルダーでコマンドを実行します
cordova plugin add org.apache.cordova.media cordova plugin add org.apache.cordova.globalization
インストールされたプラグインのリストは、コマンドで取得できます
cordova plugin list [ 'org.apache.cordova.globalization', 'org.apache.cordova.media' ]
HTMLにcordova.jsへのリンクを追加します
<script src="cordova.js"></script>
これで、たとえば、ロケールを取得できます。 APIへのアクセスは、devicereadyイベントの後に行う必要があります。
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.globalization.getLocaleName( function (locale) { alert(locale.value); }, function (error) { alert(error); }); }
アイコンとスクリーンセーバー
フォルダ「www \ res \ icon \ android \」「www \ res \ screen \ android \」には、それぞれアイコンとスクリーンセーバーがあります。 デフォルトでは、PhoneGapのロゴが付いた写真がありますので、それらを自分のものに置き換えてください。 また、www \にある一般的なデフォルトアイコンはicon.pngと呼ばれます
構成ファイル
config.xmlファイルはwwwフォルダーにあります。アプリケーションID、アプリケーションバージョン、名前、説明、作成者を指定する必要があります。
<widget id="com.phonegap.helloworld" version="1.0.0"> <name>HelloWorld</name> <description> Hello World sample application that responds to the deviceready event. </description> <author email="support@phonegap.com" href="http://phonegap.com"> PhoneGap Team </author> </widget>
リリース版
Google Playで公開できるapkのバージョンをビルドするには、JDKのkeytool.exeユーティリティを使用してキーストアファイルを作成し、build.phonegap.comにアップロードする必要があります。 再構築を実行してTestApp-release.apkを取得します
Google Play
最後のステップは、 play.google.com / apps / publish / signupでサインアップすることです。
アプリケーションを作成し、説明を入力し、ロゴとスクリーンショットをアップロードします。 apkに入力し、[公開]をクリックします。 すべて、アプリケーションの準備ができました。
クロスプラットフォーム
最後に、主なボーナスに言及することができます。 Androidバージョンに加えて、サポートされている他のすべてのプラットフォーム用の既製のアプリケーションがありますが、最も人気のあるものはiOSとWindows Phoneですが、Androidとは異なり、テストする機能がそれほど単純ではないため、これまでのところこのボーナスは使用していません。