「jQueryモバイルで簡単！スマートフォンサイト作成」に参加してきた。

イベント内容

http://atnd.org/events/12241
SwapSkills さん主催のフリーイベント、初めてのフリーイベント（という事であってるかな）、これから月に一回ぐらい実施されるような事を告知されてました。楽しみですね。

会場とか

実は東京に来て３年経ちましたが Apple Store 銀座は初めてだったのでいきなり裏口から入ろうとして警備員に止められたりしました。。ビル名と階だけだったからまさか Apple Store 店内から入るとは思わなかったんです。。

開始10分ぐらい前に着きましたが、既に椅子は埋まっていて、サイドの壁際もビッシリ、仕方なくエレベータ前の２列目の端に陣取りました。実際何人ぐらいいたんだろ、100人以上居たのかな。

よく考えたらターゲットは。。

たぶんメインのターゲットは Webクリエイター（自分で書いててどういう属性か良く分かってないですが）さん何ですよね、なんか聴衆層が明らかに男女比もおかしいし放つオーラも違う気がしました。ちょっとしたアウェー感。

jQueryモバイル導入編 (吉川徹さん)

かなり網羅的な jQuery Mobile の解説。
http://yst.web.infoseek.co.jp/jquerymobile/#1

jQuery Mobile の特徴

Markup Driven (JS で UI を構築するのではなく、マークアップで)
Progressive Enhancement (より最新のブラウザでは良い見栄え、機能を提供。JS がオフでもある程度閲覧できるように。)
WAI-ARIA (より良いアクセシビリティのためのセマンティクスを。)
12KBと軽量 (画像よりも CSS3 を使って表現。)

Markup Driven なのはマークアッパーだけでなく、多くの Web Developer にも取っ付きやすいんじゃないかなと思う。実際 Sencha とjQuery Mobile 両方使ってみたが jQuery Mobile は学習コストが極端に低い。よほど学習意欲旺盛な開発者が揃っていない限りは jQuery Mobile のが採用されやすい気がする。
WAI-ARIA は初めて聞いた単語だった。いろいろあるものだ。
12KB が軽量かというと、結局 jQuery 本体も必要なのでそこそこのサイズにはなる。ただ、jQuery Mobile の作り的に一度しか読み込む必要は無いので、他のライブラリに比べて軽量と言えるか。

その他のモバイル向け JS フレームワーク

jQTouch (開発者が Sencha に流れてどうなるか。。)
Sencha Touch (Ext.js 派生)
Cinco (37signals が開発。オープンソースになるらしい。)

もう Cinco が話題に出てくるのは驚き。やはり Rails 出してる企業って事で 37signals は注目されてるのかな。個人的にも Cinco はすごい興味ある。

API 解説

解説に仕様されていたデモページは以下。
http://yst.web.infoseek.co.jp/jquerymobile/sample.html

基本的には画面見ながらどう実装してるかの解説。以下自分が気になった部分だけ列挙。

data-role の対象は div に限らない。html5 のsectionとか使ってもいい。(てっきり div だけかと思ってた。サンプルもたいてい div だし。)
限らないけど、html5 のタグは未サポートのブラウザもあるから div にした方がいい。(iPhone, android 以外も対象にするケースであり得るのかな。)
ページ間で同一の data-id を指定すると固定できる。(知らなかった！)
ui-gird-{a|b|c|d|e} でグリッドの等分指定ができるよ。a が２等分でそこから増えてくよ。（知らなかった！）
data-icon="mail" は ui-icon-mail の css を見る、みたいなルールだよ。（あまり意識しなかったが注意してみてみよう。）
data-direction="reverse" でエフェクトを逆にかけられるよ。（マジですか。）
テーマの自作やスタイルのいじり方に関して。（全然知りませんでした。。。。。）

自分がいかにドキュメントをちゃんと読んでないかを思い知りますね。かなり勉強になりました。

jQueryモバイル実践編 (白石俊平さん)

時間がかなり押していて１５分ぐらいのライブコーディングとなりました。

雑感

基本的には吉川さんのセッションをなぞる感じでライブコーディングが行われました。
最後にサーバーサイドからどうやってデータをリストに流し込むかの解説がありました。開発の人間としては、どちらかというとサーバーとのやり取りの部分の実践的な話を聞きたかったので残念と言えば残念。

感想

以前自分で作成した時は、ASP.NET MVC 2.0 と組み合わせて実装したけれど、その時は ASP.NET MVC の各ページに遷移するという形を取った。つまり、通常 jQuery Mobile は一つの HTML に全ページ収まる訳だけれどそれとは異なる。（最後の質疑応答で別ページから読み込む事も可能である事は触れていた。）
ただ、実際には jQuery Mobile は別ページの遷移といいつつ一つのページ内に次々に取り込んでいく形を取っているので結果は変わらない。（つまり別ページの body の中を非同期で取得しているだけ、なので head に何を書いても無視されてしまう。）
取り込んだデータのライフサイクル的な部分をよく考えたら押さえていなかったのでちゃんと調べないとなーと感じたり。

■

JS の開発者を多く要するチームは HTML5+JS で書いたり、Sencha みたいな JS でガンガン書いていくフレームワークの方が効率のいいコードを書けるのかもしれない。ただ、うちみたいに ASP.NET の枠組みでいつも作っているような現場の場合は jQuery Mobile みたいな UI フレームワークはやり方を大きく変える必要は無いからとても良いのではないかと思った。（もちろん要件次第だとは思うけど）
何より、こういう勉強会が開かれるという事はデザイナとの協業も極めてやりやすいと言う事の証でもある。

正式版はまだ数ヶ月先になりそうだが、是非採用へ持っていきたいところだ。

とても有意義な勉強会でした。発表者の方、SwapSkills の方、ありがとうございました！