PhoneGapハジメテミル。

11:06 開始。
本サイトを見てみる。

http://phonegap.com

なかなかかわいいサイトです。

http://phonegap.com/about/features/

こんな機能に対応してるそうです。

下のリリースを読む。

http://www.adobe.com/aboutadobe/pressroom/pressreleases/201110/AdobeAcquiresNitobi.html

adobe acquires nitobi : アドビがニトビを買います。
adobe製品と連携しているのでそっちになれている人は良さそうです。

+ google groups

http://groups.google.com/group/phonegap

ちょうど 1.4 が 1/31にリリースされたようですね。

11:20 start
いちおxcodeを更新しておく。

http://phonegap.com/start

ダウンロードした、callback-phonegap-xxxx の中の lib/PhoneGap-1.4.1.dmg を開く。
PhoneGap-1.4.1.pkgを開いてインストール開始

xcode からPhoneGap-based Applicationを作成
名前を付けて Run するとbuild は成功して www/index.htmlがないよとエラーが表示される。
プロジェクトを作成したディレクトリの中には、wwwティレクトリーがある( index.html phonegap-1.4.1.js が入ってる。)

Next step is IMPORTANT! Drag the www folder into Xcode 4. You can’t just drag the www folder into your app’s folder. It needs to be dragged into Xcode 4!! In my case I would drag it and drop it on HiWorld shown below.

ディレクトリーに入れないでxcode4のプロジェクトに直接ドラッグないと駄目だそうです。

http://wiki.phonegap.com/w/page/39991939/Getting-Started-with-PhoneGap-iOS-using-Xcode-4-%28Template-Version%29

とりあえず、ここまでOK.

□ Android 版
12:06

http://phonegap.com/start#android

・Eclipse Classic 3.7.1 mac 64bitを入れてみる。

・Android SDK

http://developer.android.com/sdk/installing.html#which

android sdk managerを起動してrecommendの3つを入れる。
toolsとandroid 2.1(とりあえず)を入れる。
( ADTを先に入れると完了後、SDKを取りにいってくれました。。。とりあえず入れたディレクトリーを設定)
eclipse – preferences – Android – SDK Locationで変更可

・ADT Plugin

http://developer.android.com/sdk/eclipse-adt.html#installing

eclipseからadtを入れる。

13:30 ダウンロードが遅かったのでニュースとか読んでいたのでこんな時間ですが、作業自体は少ないです。

やっと3 .setup new project
assets/www
libs
を作って
assets/www/phonegap-1.4.1.js
res/xmlをコピー。

libs/phonegap-1.4.1.jar
ライブラリは、追加が必要。

You might experience an error here, where Eclipse can’t find phonegap-1.0.0.jar. In this case, right click on the /libs folder and go to Build Paths/ > Configure Build Paths. Then, in the Libraries tab, add phonegap-1.0.0.jar to the Project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again.

www/index.html に hello world を書いて完了。

Run configurationを追加してRun.

ここまでで環境設定完了。

=========

機能によっては分ける必要あるけど、共通部分は、 www以下は共通で使えるということで良さそう。
titaniumと比べると環境を2つ(作る数だけ)用意しないといけないのが障壁になるのかな?

たぶん、webサービスでコンパイルを提供しているようなので、その辺を使うと?

https://build.phonegap.com/

これを使うとhtml css javascriptだけで、アプリ開発できるようですね。
adobe製品からこの辺が使えるようです。

=========
14:20 時間が過ぎるのは早いです。夕方終わったら髪切りに行こうと思ったけど難しそうですね。

さて、phonegap+jquerymobileのサンプルがあります。

http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile

特に、気にすることはない?と思うので作ってみます。

<link rel=”stylesheet” href=”css/jquery.mobile-1.0.1.min.css” />
cssのところサンプルは href=”/css となっているが / があると駄目でした。

javascriptのconsole.logでデバッグする。

SDKのplatform-tools dab log catを利用。

$ cd ./android-sdk-macosx/platform-tools
$ ./adb logcat
– waiting for device –
D/PhoneGapLog( 223): file:///android_asset/www/phonegap-1.4.1.js: Line 692 : Error in success callback: Network Status1 = TypeError: Result of expression ‘a’ [undefined] is not an object.

こんな感じでエラーがでます。

* ネットワークの確認で、サンプルをみて isReachableして、1.4.1に無いな・・・と思っていたら無かった。
* ドキュメントに新しい方法が載ってた・・・
* http://docs.phonegap.com/en/1.4.1/phonegap_connection_connection.md.html#Connection

document.addEventListener(“deviceready”, onDeviceReady, false);

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
checkConnection();
}

function checkConnection() {
var networkState = navigator.network.connection.type;

var states = {};
states[Connection.UNKNOWN] = ‘Unknown connection';
states[Connection.ETHERNET] = ‘Ethernet connection';
states[Connection.WIFI] = ‘WiFi connection';
states[Connection.CELL_2G] = ‘Cell 2G connection';
states[Connection.CELL_3G] = ‘Cell 3G connection';
states[Connection.CELL_4G] = ‘Cell 4G connection';
states[Connection.NONE] = ‘No network connection';

alert(‘Connection type: ‘ + states[networkState]);
}

* 今回も大活躍 JSON.stringify

console.log( JSON.stringify(PhoneGap.callbacks) );

ちょっと休憩。
17:08

18:01
再開。後は、普通に作るだけだから、あと 1.5時間で出来る範囲の基本機能だけで。

19:50
top → list → item
までデータ表示はできた。とりあえずここまで。

結局3日目にして最初のバージョンをリリースしました。
web api は他のサービスで作っていたのでアプリの内容自体は、置いておいて
3日で、top→list→itemのシンプルなアプリを作ることが出来ました。
jquerymobileを利用したことがあれば、こんな感じになると思います。
androidの機能は使っていないので、これから使ってみてと言うところです。
iPhone版リリースについても近いうちにやります。

This entry was posted on 金曜日, 2月 3rd, 2012 at 2:09 PM and is filed under Android, iOS, PhoneGap, Titanium. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Unityによるゲームを公開しております iOS/Android
https://itunes.apple.com/jp/app/lost-knight-3d-action/id900917032
https://play.google.com/store/apps/details?id=com.groundroad.runknight

各種開発支援・機能開発等小さいお仕事などもお請けしております。
unity開発支援, PHPシステム開発, javascript/html5 フロント開発, titanium mobileアプリ開発
お気軽にお問い合わせください
大崎・五反田近郊での対面でのお打ち合わせはいつでも可能です。