・ このブログの記事(テキスト・画像)について

2012年3月28日水曜日

【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 をダウンロードする。


2.解凍する。

解凍したファイル













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




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


5.現在リリースされているPhone Gap1.5をダウンロードする。

6.解凍する。

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

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


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


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


10.libsフォルダを作成

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



12.こんどは、PhoneGapをActivityへ実装する。

13.端末にインストールしてみる。

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

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

0 件のコメント:

コメントを投稿