【JQueryMobileとPhoneGap】 Phone Gapを実装したActivityを終了させる編

前回の続き
Androidの機能を全部JQueryMobileとPhoneGapで作成って実際イメージつかないですよね？
そして、私の場合は
AndroidのActivityからPhone　Gapを実装したActivityへ遷移後、バックキーではないボタンイベント操作でAndroidのActivityへ戻りたい時を考える事があります。
そんなときのために、
Phone　Gap側のメソッドでPhoneGapを実装したActivityを終了させるためのメモです。

ベースは、前回の環境とします。

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus
JQueryMobileとPhoneGapの環境構築済みとする。
【１．JQueryMobileとPhoneGapの注意点】
・PhoneGap側に用意されているバックキーイベント扱いについての個人的な注意点
PhoneGap側に用意されているバックキーイベントを取得する処理は、JQueryMobileを使っている限り、使わない方が無難です。

初めて、PhoneGapのバックキーイベント処理をゴニョゴニョいじった時、困ったことが起きました。

PhoneGap側でバックキーイベントを取得する処理を追加した場合、従来のJQueryMobileで画面遷移をし、その後元の画面に遷移した時に
「PhoneGap側で最初に登録したバックキーイベント取得用コールバック関数」でやっている処理がUIに反映されない現象になったからです。

未だに良く分からないです。。。
私の現在のPhoneGapとJQueryMobileを使う上での注意点は、
バックキーのイベント等「PhoneGapとJQueryMobile同士がかぶる」機能は、実装しないほうが無難です。別の方法で実装することをまず考えたほうが、幸せになれると思います。
【２．ボタン押下後の変更】
下記のようにPhoneGapのメソッドである「navigator.app.exitApp();」を呼び出します。






 以上で、Phone　Gapを実装したActivityを終了させることができました。

【JQueryMobileとPhoneGap】 PhoneGapでUAを変更する編

前回の続き
UAを変えたいってことありますよね？
そんなときのために、
Phone　GapでUAを変更するためのメモです。
ベースは、前回の環境とします。

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus
JQueryMobileとPhoneGapの環境構築済みとする。
【UAの変更】
１．DroidGapを継承したActivityで下記のようにオーバラードします。
UAをhohoと書き換えています。






 以上で、PhoneGapでUA変更が完了した。

【JQueryMobileとPhoneGap】 PhoneGapプラグイン作成編

前回の続き

Phone　GapのToast用プラグイン作成を行う方法のメモ。
ベースは、前回の環境とします。

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus
JQueryMobileとPhoneGapの環境構築済みとする。
【手順】
１．せっかくなので、ライブラリAndroidプロジェクトでプラグイン構築を試みてみる。
Dev Guideによると

• Library projects cannot include raw assets
  The tools do not support the use of raw asset files (saved in the assets/ directory) in a library project. Any asset resources used by an application must be stored in the assets/ directory of the application project itself. However, resource files saved in the res/ directory are supported.

どうやら、assetsフォルダ内部の リソースは
ライブラリプロジェクトでは、サポートしていないようです。
うむ・・・・この時点でライブラリプロジェクトを使用するメリットが無い・・・・・

ということで、ライブラリプロジェクトでプラグインの試みは終了～

 まじめにプロジェクト内部でプラグイン定義をしていく。
２．プロジェクト内部でプラグイン定義をしていく手順
１．javaファイル、javascript、XMLフォルダにplugins.xmlの記載を行う。




2．端末へインストールする。

main画面

Toastを確認した画面

 以上で、PhoneGap用のToastプラグイン作成が完了した。

【JQueryMobileとPhoneGap】 画面遷移編

前回の続き

画面遷移を行う方法のメモ。

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus
JQueryMobileとPhoneGapの環境構築済みとする。
【手順】
１．index.htmlにpageを追加する。 

2．端末へインストールする。

遷移前の初期画面、リストをタップする。

遷移後の画面

 以上で、画面遷移の設定が完了した。

【JQueryMobileとPhoneGap】 デフォルト画像表示編

前回の続き
 前回、JQueryMobileのcssファイルとｊｓファイルをコピペしただけだった。
これだと、アイコン画像が読み込まれません。
なので、読み込まれるようにしたいと思います。

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus
JQueryMobileとPhoneGapの環境構築済みとする。
【手順】
１．JQueryMobileでダウンロードしたフォルダのimagesフォルダをコピペしてasetes/www/
配下に持ってくる。

２．index.htmlにリストを追加する。 

3．端末へインストールする。

矢印のアイコン等が表示された。

4.imagesフォルダの設定をしなかった場合

矢印が表示されない。

 以上で、デフォルト画像の設定が完了した。

【JQueryMobileとPhoneGap】 環境構築編

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus

【手順】
JQueryMobileとPhoneGapで、初期設定をまとめる。 
手順としては、JqueryMobileを移植→PhoneGap移植→ザックリ表示
です。

1.現在の安定版であるJquery　mobile 1.0.1　をダウンロードする。


２．解凍する。

解凍したファイル

３．とりあえず、Androidプロジェクトのassetes/www/にindex.html
を作成する。

４． JQueryMobileでいくつかプラグインがありますが、とりあえずdemosファルダにある下記ファイルをindex.htmlと同階層にコピペする。
・jquery.js
・jquery.mobile-1.0.1.min.css
・jquery.mobile-1.0.1.min.js


5．現在リリースされているPhone Gap１．５をダウンロードする。

6．解凍する。

7．とりあえず、lib\androidへ移動する

８．まず、xmlフォルダをコッピペし、Androidプロジェクトのresファルダ配下に貼り付ける。
→これによって、PhoneGapプラグインの読み込み設定完了。

９．AndroidManifestをいじる。
・ まずは、マルチディスプレイ対応のため、下記を追加


・次に、Phone Gapのルール？みたいで、端末を縦横切り替えをした時に、onCreateが走らないように設定をする。


１０．libsフォルダを作成

１１．cordova-1.5.0.jarをlibsフォルダにコピペし、ビルドパスを通す。
さらに、cordova-1.5.0.jsをassets/www/
配下に置く。（今回、PhoneGap機能は使っていないので、詳しい説明はあとで・・かな？）

１２．こんどは、PhoneGapをActivityへ実装する。

１３．端末にインストールしてみる。

インストールができた画面

以上で、環境構築が完了した。