ozeppi@三次元出張所

Webアプリケーションエンジニアとして三次元に長期出張中なのでそのへんについての話題を書くところです

qooxdoo mobileのチュートリアルでつくったサンプルをPhoneGapでiOSアプリとして動かす

まえがき

iOSアプリをつくることになったんですが、同じものをAndroidでもつくる必要があるのでPhoneGapとかかなぁって話になってます。
あとはネイティブアプリっぽいUIを実現するためのライブラリどうしようってところで、同じチームのある人がqooxdooいいよって言っていて、彼が他に挙げていたJavaScript UIライブラリのまとめを実機3つ(Galaxy S2 Android 2.3とiPhone 4 iOS5とiPhone 4S iOS6)で試してみたのだけど、やはりqooxdooの動作が軽快でよさげだったのでひとまずqooxdooのチュートリアルをやってみました。

一応他に挙げられていたもので僕が実機で調べたものも残しておきます。 他にもsenchaをはじめ5、6個くらいあったのですが彼のコメントから実機で試すまでもなさそうな感じだったので調べていません。

  • w2ui
    • Galaxy S2でdemoを見たら縦スクロールが発生するページで全て縦スクロールができなかった
  • jQuery Mobile
    • デモのページが途中から(ListViewとか)CSS効いていないページがあって大丈夫か…という気持ちになる
    • iOS5なiPhone 4でスクロールに違和感(反応が遅れる、文字のレンダリングが一瞬遅れる)があってきつそう
  • kendo UI
    • Safariのステータスバー(一番上の時刻表示あたり)をtapすると一番上に戻るアニメーションが発生するけど戻らない…

事前にやっておくといいこと

qooxdooでつくったWebアプリをPhoneGapでiOSアプリとして動かすにはそれぞれのチュートリアルでできたファイルを一つのディレクトリに混ぜることになるので、それぞれのチュートリアルをやっておくといいです。

qooxdooのチュートリアル

  1. Getting Started with qooxdoo qx.Mobile
  2. Tutorial: Creating a Twitter Client with qooxdoo mobile

チュートリアルで書いたコードはこれ
https://github.com/ozeppi/qooxdoo-Mobile-Twitter-Client-Tutorial

PhoneGapのチュートリアル

http://docs.phonegap.com/en/2.8.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS

qooxdooチュートリアルで作ったサンプルをPhoneGapをつかってiPhoneアプリにする

http://manual.qooxdoo.org/current/pages/mobile/deployment.html
PhoneGapのディレクトリがassets/www/ではなくwww/なのを読み替えるくらい。

./generate.py buildするとbuild-iosってディレクトリができるのでそれをPhoneGapのディレクトリのwww/に上書き。

qooxdooのチュートリアルで書いたコードをPhonegapのprojectに混ぜるとこうなる。
https://github.com/ozeppi/sample-qooxdoo-mobile-and-PhoneGap

参考

http://demo.qooxdoo.org/current/playground/#Hello%20World-mobile