989WORKS - iPhoneApp Produce Team -

開発 iPhone WebApp

最近は会社の仕事仲間たちで集まって、iPhoneやiPadのApplication開発を細々とやっています。「989WORKS」という名前で活動していますが、ようやくWebサイトができました！
http://989works.com/

開発Applicationは「ESTAP」というのと、「PinBoo」というまだ２つです。どちらもAppleに申請中ですので、AppStoreに並んだらまた紹介しようと思います。
というわけで、今回は989WorksのiPhone用サイトのjQTouchのカスタマイズについて。

jQTouchのカスタマイズ（989Works for iPhone）

iPhone用のサイトは私が全面的に担当することになり、相変わらずのjQTouchを使って作成しました。
ぜひぜひiPhoneのホーム画面に登録してみて下さい。
http://989works.com/iphone/

以前、Quun.Shop.Bankというお店検索サイトのiPhone用WebAppを構築する際にもjQTouchを使用しましたが、その時よりも何かプラスできればと思いながら今回の「989Works for iPhone」を作成しました。
（Sencha Touchを使っていないのは、後々のメンテナンスが誰でも簡単にできるようにというのと、自分の勉強がまだまだだからです…）

WebApplicationとはいえ、よりネイティブのようなイメージに作りたかったので、jQTouchをカスタマイズして独自にタブバーを構築しました。
通常、Mobile SafariではCSSでいう「position:fixed」が使用できず、Windowに対してオブジェクトを固定して表示することができないため、その辺の処理をどのようにするかでかなり悩みました。

989Works for iPhoneには下部にタブバーが設置してありますが、スクロール時に消えて、スクロール後にまた出現するようにしてあります。
これは、タブバーをWindowの一定位置に固定できないため、スクロールのたびにpositionを変えてやる必要があるためです。
スクロールしたときにもっとリアルタイムにpositionを変えれば、固定されているように見ることができるとも考えられるのですが、iPhoneの処理スピードではどうしても滑らかな表示ができなくなるため、より不快感を感じないように工夫した結果、スクロール時に消えて、スクロール後（positionを変えて）フェードインするという方法に落ち着きました。

正確には、Windowに対してのスクロールイベントは、慣性スクロール以外の場合（指でシュッってやらずに、動かしてから指を止めて離した場合）ではイベントが作動せず、スクロール時以外にTapStart, TapMove, TapEndあたりのイベントも使って構築しています。
スクロール時にたまにぎこちなく動いてしまう場合もありますが、まずまずの仕上がりになったのではないかと思います（iPhone 3Gの場合はカクカクかもしれないけれど…）。

また、タブバーのイメージアイコンや見出しの背景などはできるだけCSS3を使って画像ファイルを極力なくしました。
（タブバーのアイコンはマスク画像だけ用意し、グラデーションの背景を切替えることで再現。Senchaとかもそうしていると思う）

画像点数は少なくしたのですが、逆に画像一個一個の容量は大きくしました。
というのも、通常の解像度の画像ではiPhone4のRetinaディスプレイで見たときに粗く見えてしまうため、倍の解像度の画像を用意し、縦横幅の指定で縮めて表示しているからです。
おかげでiPhone4で見てもすごくキレイに見えるようになりました。
これはもしかしたら常識かもしれませんが、普通に使えるテクニックなので覚えておくと良いです。

Applicationの実際の画面を紹介する部分には、以前自分で作った「jCarousel」というjQueryプラグインを使いました。
（jCarouselについては、以前紹介した記事を参照してください）


やるやると言っているSencha Touchも依然としてヤルヤル詐欺状態になっている私ですが、これからもiPhone WebApplicationについては研究していこうと思います。
そのうちjQuery Mobileがリリースされてしまうかもしれませんが、そうなったら益々Senchaから離れて行ってしまいそうだなぁ…。