これは便利！jQtouchのGUIデザインパターンチートシート

「便利！」とか、自分で言ってりゃ世話ないですが。笑　すみません...

現在、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

このページに関連のある記事はこちら

コメント(4)

くらげ | 2010年6月26日 13:24 | 返信

サンプル、ダウンロードさせてもらいました。スタイルと表示の対応が一目で判り、素晴らしいです。

ただ最初、上手く表示できないのでソースを確認したところ、$.jQTouch();が実行されていないのが原因のようでした。あと、jqueryがjqtouch同梱版ではなく自前の1.4.2を見てるのがつまづきポイントかと。
またcss/base.cssが無いのが気になりました。(無くてもおおむねちゃんと表示されているようでしたが)

山下こうじからくらげへの返信 | 2010年9月 8日 07:20 | 返信

くらげさん、ありがとうございました！
ご指摘いただいた箇所を修正させていただきました。

？ | 2010年9月10日 10:10 | 返信

このページにあるような、見本の画像みたいになりません。ボタンとかになっていない感じです。
詳しくは分からないのですが、楽しみにしているのでお願いしますm(_ _)m
私だけだったらすいませんです…

匿名から？への返信 | 2010年9月10日 10:32 | 返信

パソコンをお持ちでしたら、PCにSafariブラウザをインストールしてSafariから確認してみてください。
そっくりにはならないですが、ボタンの形など、ほとんど同じ感じで表示されると思いますよ。

改造して自作のhtmlで試されている場合も、まずSafariで確認してちゃんと表示されるようにしてみてはどうでしょうか？