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

2010-03-28

jqtouch_cheet_ui.png

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

現在、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チートシート

jqtouch_cheet_ui.png

サンプルhtml

Creative Commons License

ダウンロード:jqtouch_cheet_ui.zip

4 件のコメント

  • くらげ より:

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

  • 山下こうじ より:

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

  • より:

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

  • 匿名 より:

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

くらげ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

2010-03-28