jqm.md

jQuery Mobile 勉強会

• 3/15 リクルートGINZA 8 ビル * 吉川さん

資料公開されました。

• Slide
• Sample

jQuery Mobile 1.1の変更点

ページアニメーションの最適化

• デフォルトでslideからfade inへ変更になっている。
  • 実際には組み合わせてスムーズになっている。
• turnとflowの2つの新しいアニメーションが追加

コンパクトなフォームの追加と各種デザイン変更

• フォーム
  • data-mini属性をtrueに設定
• フリップがイケてる
  • 記述に変更はナシ
• スライダーの(ハイライト)が良くなる

Ajaxローダーのデザインが3種類に。

• テキスト無し(デフォルト)・ローディングメッセージ表示・メッセージのみ表示の3種類

3rd パーティのUIライブラリが利用可能に

• data-enhance="true"のブロックではjqmのUIが適用されない

その他

• ページアニメーションのFxサポート
• $.mobile.touchOverflowEnabledは非推奨
• スライダーにstep属性サポート
• iOSのOrientation Changeのズームバグに対応
• AMD対応
• コンテナへのdata-ajax="false"の有効化

jQuery Mobile Tips

オンラインオーサリングツール

codiqa

• ブラウザ上でD&Dでパーツを配置するだけで、完成版のHTMLがダウンロードできる

プラグイン

ページネーション

• スライドショー

PhotoSwipe

• スワイプで画像がスライド

DateBox

• jqmで使用できるデートピッカー
  • <input type="date">の部分にカレンダーを表示
  • AndroidっぽいUIも。

Simple Dialog

• デフォルトのダイアログの代替。UIのみを表示する

Actionsheet

• ボタンをクリックすると、下から画面中央に飛び出すようなポップアップ

960 Grid on jQuery Mobile

• グリッドレイアウトが作れる。PC用のアレ

Theme Roller

jQuery Mobile Garally

PhoneGap

PhoneGap Build

Responsive Web Design

• Coolapsible が2カラムになったり
  • CSS Media Queryの使用で実現している
  • スタイルでムリヤリ
  • トランジションの切り替え
  • -webkit-animationのdurationを変更して、タブレットに対応なんかも可能

Performance

Page Animation

• link -> data-transition="none"
• data-ajax="false"はバッドノウハウ

Page Cache

• link -> data-dom-cache="true"

Page Prefetch

• link -> data-prefech="true"

Latest Build

• CDNでlatestを指定してあげる

jQuery Mobile Design

jQuery Mobile Tutorial参照

• ライブコーディング
  • レストランを評価するアプリ

Road Map

今月中に1.1正式版をリリース予定

• Download Builder Tool提供予定
• Theme Rollerもアップデート？

春には1.2リリース？

• popup component提供(Simple dialogのようなもの)
• fetch links
  • ajax navi
  • pulled request

Question

抜けまくってます。

ajaxでの画面遷移では、飛び先でのJavaScriptが無視される

• pageCreation()とか使って共通にjsを読み込ませるのがベスト

Mobile Book Mark Builderが使えないー

• ブログあります

head要素にform入れるとiPhoneで崩れる

• 分からない…

格好良いMobileのギャラリー

• jqm gallary参照

実機のデバッグどうすんの？

• winre
• Adobeの最近出たツール
• Chrome for Android

ページ遷移のイベントの効果的な使い方

• GAのトラッキングに使うのにpageShowイベントでurlを渡してあげるとか

ネイティブ or html5？

• 機能要件をHTML5で満たせるか
• Performance重視か

ガラケーからのスマホ

• UTF-8
• dddata-role="page"で切り出し などなど

落とし穴

• Ajax遷移による問題
  • IDの重複
  • Same Origin Policy
  • scriptが上手く読み込めない