jQuery mobile のイケてる実装

@Takazudo

なぜjQuery mobileはかったるいか

• 素敵な見栄えとか別にいらん
• なんか素敵な遷移するらしいけどめんどそう
• いじるの大変そう
• スクラッチで作る時に使うとかったるそう

でもjQuery mobileはなかなかイケてると思う

• モバイルでつまづくことの解決策がjQuery mobileのコードに結構書いてある
• ちゃんとコンポーネントごとにコードが整理されてる
• ダウンロードビルダーで必要なものだけ使える
• ドキュメントにモバイルでの罠が色々書いてある

勉強にも実用にもかなりイイ

今日紹介するやつ

• touchイベント
• scrollイベント
• loader widget
• navigation

めんどくさいtouch系イベント

• 非touch deviceではmouse events
• touch deviceではtouch events
• これをnormalizeするのがpointer events
• でもpointer eventsはまだこれから

要するにtouchイベント周りはめんどい

vmouseイベント

mouse と touch をnormalizeした virtual mouseイベント

• vmouseover / vmouseout
• mousemove
• vmousedown vmouseup
• vclick
• vmousecancel

見てみる

• デモ

touchイベント

vmouseの上にのっかってくるのがjQuery mobileのtouchイベント

• tap - いわゆるクリック
• taphold - 触ってしばらくすると
• swipe - 触って30px動かす
• swiperight - 右方向にswipe
• swipeleft - 左方向にswipe

vmouseベースなのでPCでも動く

見てみる

• デモ

scrollイベント

• scrollstart
• scrollstop

なぜこのイベントは必要か？

iOSのscrollイベント起こらない問題

それをnormailzeしたのがこのイベント

見てみる

• デモ

orientationchangeイベント

• landscape とか portrait で教えてくれる
• 非対応環境もpolyfill的にカバーしてくれる

デモ

イベントまとめ

イベント系は自分で実装するのが手間 しかし場合によっては避けて通れない

jQuery mobileの資産を有効利用しましょう

Loading widget

真ん中でくるくるするアレ

• position:fixed対応がめんどいけどうまいことやってくれる
• loader自体はjQuery ui widgetベースでできてる
• $.mobile.loading に loaderのインスタンスが生えてる

こういうのやりたいことあるので地味に便利かも

使い方カンタン

$.mobile.loading('show', {
    text: 'message'
    textVisible: true
});

$.mobile.loading('hide');

カスタムのHTMLも出せる

見てみる

• デモ

navigation

これは何か

• デモ

pushState is hell

pushStateで普通に遷移しているように見せるにはどうするか？

• ページの断片ajax、DOMを更新？
• しかし非対応環境には...
• そう考えると各ページは普通のHTMLである必要がある
• HTMLを取得して必要な部分だけ正規表現でとってくる→ それを元にページを更新

いろいろと面倒

navigationの素敵な実装1

• 同じドメインか
• POST/GET
• transitionsと方向
• loading表示
• title変更

などなど色々とよく作られてる

navigationの素敵な実装2

• pushStateが利用できない→ hashchangeで同じ事をしてくれる
• 実はhashchangeで遷移→ hisory.replaceStateでpushState遷移に見せてる
• 気の利いたイベント多数
• プラグインとしてURLルーターも導入可能 (参考）

mobileだけではもったいないほどのよくできた感

まとめ

• なかなかヘビーな土台となるものの
• 一つ一つが作りこまれていて
• コンポーネント毎にちゃんと独立している
• つまり jQuery mobile の実装はイケてる

続く（かも）