1. jQuery Mobile 概要
2012.5.25
Smartphone App Hackathon in Fukui
@ichigami

2. jQuery Mobile でつくったもの

8. jQuery Mobile

10. jQuery Mobile Gallery
http://www.jqmgallery.com/

11. ASCII.jp：jQuery Mobileを使った国内スマホサイトまとめ
http://ascii.jp/elem/000/000/674/674677/

13. jQuery Mobile デモページ

17. jQuery Mobileの特徴

18. jQuery Mobileの特徴
• HTML5のカスタムデータ属性を利用
• 充実のUIコンポーネント
• クロスプラットフォーム対応
• 高いアクセシビリティ性

19. HTML5のカスタムデータ属性を利用
data-⃝⃝⃝=" "
• カスタムデータ属性とは、HTML5の仕様のひとつ
で自由に属性を自由に定義できるもの
• CSSやJavaScriptを書かかなくてもスマートフォン
サイトを制作することができる
• その手軽さがjQuery Mobileを使用する最大のメ
リットとも言える

20. 充実のUIコンポーネント
• jQuery Mobileでは、スマートフォンに最適化され
たレイアウト・UI部品が予め多く揃っているため、
それらを組み合わせるだけで操作性に優れたサイト
を制作することができる。

21. クロスプラットフォーム対応
• jQuery Mobileは、デスクトップ、スマートフォン、タブレッ
ト、電子書籍プラットフォームの大半を幅広くサポートしてい
る。jQuery Mobile公式サイトに、サポートレベルを3つに分
けてプラットフォームの対応状況を掲載している。

22. アクセシビリティの確保
• jQuery Mobileは、セマンティックなHTMLによって、広範囲
のデバイスでページが閲覧できるよう設計されている。
• W3Cが定めるWAI-ARIAで規定されているフォーカス管理や
キーボードナビゲーション操作に対応させるための技術仕様を
カバーし、スクリーンリーダの助けが必要な障害を持つユー
ザーにも、最大限のアクセシビリティを提供できる。

23. アクセシビリティの確保
15VISIONのサイトをIE6で表示した場合

24. アクセシビリティの確保
jQuery Mobile DEMOを i-mode で表示した場合

25. jQuery Mobileの得手・不得手

26. jQuery Mobileの得意なこと
• 操作性を考慮したデザイン
• ページアニメーション
• ヘッダー・フッターの固定配置

27. jQuery Mobileの苦手なこと
• オリジナルデザイン
• 他ライブラリとの連携
• アニメーションがスムーズじゃない端末も
• セキュリティに関する留意点

28. まとめ
jQuery Mobileのできること、
できないことを理解し、
設計時に採用範囲を決める。
がっつりカスタマイズしたい場合は
最初から使わないほうがいいかも。
部分的な利用・モックアップのみで
使うという選択肢も。

29. がんばりましょー (́ ｀*)ﾉ