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 が入ってる。)
ディレクトリーに入れないで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
ライブラリは、追加が必要。
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を利用。
$ ./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
// 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
ちょっと休憩。
17:08
18:01
再開。後は、普通に作るだけだから、あと 1.5時間で出来る範囲の基本機能だけで。
19:50
top → list → item
までデータ表示はできた。とりあえずここまで。
結局3日目にして最初のバージョンをリリースしました。
web api は他のサービスで作っていたのでアプリの内容自体は、置いておいて
3日で、top→list→itemのシンプルなアプリを作ることが出来ました。
jquerymobileを利用したことがあれば、こんな感じになると思います。
androidの機能は使っていないので、これから使ってみてと言うところです。
iPhone版リリースについても近いうちにやります。