これは便利！jQtouchのGUIデザインパターンチートシート
presented by 役に立つかもしれないBlog
「便利！」とか、自分で言ってりゃ世話ないですが。笑 すみません...
現在、iPhoneアプリの開発に勤しんでいる私でありますが、jQtouchのGUIインターフェース研究の中で出来た副産物が、ニーズがありそうなので公開します。 jQtouchのデザインパターン サンプル集です。 おそらく日本初ではないかと。
jQtouchって何？
jQtouchはiPhoneやAndroidなどのスマートフォン向けWebkitブラウザ（iPhone向けだけじゃないですよ）に人気のJavaScriptライブラリ「jQuery」を組み合わせて、Webアプリの開発を簡単にしようという試みで作成されたJavaScriptライブラリです。
主にiPhoneの魅力の一つであるGUIインターフェースとアニメーションのビジュアル化をエミュレートします。 ただ、いかんせん情報源が少ないので英語が分かる人しか手がつかないのが欠点でした。
GUIの組み方だけでも分かる情報が欲しい！
ということで探してみたのですが満足いくものがなかったので、いっそのこと自分で作ってしまおう！ということでjQtouchのCSS部分を解析してパターン化し、サンプルのhtmlを作ってみました。
「チートシート」というには長すぎる巻物みたいになってしまいましたが、jQtouchでいろいろなパターンのGUIが簡単に実現できることが一目で分かってもらえると思います。
スクリーンショットとサンプルhtmlを置いておきますのでjQtouchで開発している方は参考にしてみてください。
jQtouch GUIチートシート
サンプルhtml
ダウンロード：jqtouch_cheet_ui.zip 
関連情報
- iPhone3Gの人、解約違約金から逃れよう！
- レビュー：モバイルユーザビリティ・デザイン 新100の法則
- iPhoneアプリのプロモーションコードを日本でも発行してくれとお願いした。
- PhoneGapとAppleデベロッパーライセンスの同意事項について
- 「Sleep Cycle」を9日分ちゃんとグラフ化してみた
- clickイベントが効かない人への処方箋（iPhone&jQuery）
© 2009-2010 colori all rights reserved.
サンプル、ダウンロードさせてもらいました。スタイルと表示の対応が一目で判り、素晴らしいです。
ただ最初、上手く表示できないのでソースを確認したところ、$.jQTouch();が実行されていないのが原因のようでした。あと、jqueryがjqtouch同梱版ではなく自前の1.4.2を見てるのがつまづきポイントかと。
またcss/base.cssが無いのが気になりました。(無くてもおおむねちゃんと表示されているようでしたが)
くらげさん、ありがとうございました！
ご指摘いただいた箇所を修正させていただきました。