azmr

かの有名なjQueryをモバイル向けに最適化するプロジェクト「jQuery Mobile」プロジェクトが発表され、Sencha Touch、SproutCore(MobileMeで使用されているフレームワーク)、jQuery MobileといったようにHTML5+CSS3なフレームワークが出揃いモバイル系Webアプリ開発も含めて、いよいよHTML5+CSS3の幕開けな感じがします。

jQuery Mobile

それで最初はSencha TouchでiPhoneサイト作ろうかなぁ、でもExt JSの書き方慣れないんだよなぁと思ってるときにjQuery Mobileのα版がリリースされたので、勉強もかねてiPhone用サイトを作ってみました。
iPhone用サイトを作るって言ってもなんら難しいことはなく、jQuery Mobileの文法に則って記述するだけで、スライド表現やリスト、グリッドデザインを簡単に実装できます。
もちろん、今までのjQueryの記述が使えますし、外部ページ読み込みのAjax処理は標準でサポートしています。すごいね！data-role=”page”の属性が付いた要素を1ページとして表示するので、data-role=”page”を複数書いて、ハッシュで画面遷移できるのがいいところ。データ量にもよるけど、簡単なページであればAjaxとかせず一回で全部読み込んじゃってハッシュでページ内遷移させちゃえばいいと思います。
α2ではタップやスワイプなどのイベントが追加されたのでこちらも機会があれば使ってみたいところ。

こんな感じでボタンのグループ化やサムネイル付きリストもさくっと実装できます。アイコンも標準で用意されてるのもいいです。

バグっぽい挙動はあるけれど…

今回はとりあえずjQuery Mobileの書き方になれるという感じでJavascript部分はほとんど触ってないので（ってかブログとかは触る必要はほとんどない…）、jQuery Mobile + α的に勉強していけたらと思います。localStorage使ったり、1ページの情報の最適化を行ったり、イベント処理をちゃんとして操作体系の最適化を行ったり。

まぁしかし突貫工事的な部分は直さないといけない。。