jQuery Mobile 概要


             2012.5.25
  Smartphone App Hackathon in Fukui
             @ichigami
jQuery Mobile でつくったもの
jQuery Mobile
jQuery Mobile Gallery
   http://www.jqmgallery.com/
ASCII.jp:jQuery Mobileを使った国内スマホサイトまとめ
       http://ascii.jp/elem/000/000/674/674677/
jQuery Mobile デモページ
jQuery Mobileの特徴
jQuery Mobileの特徴



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

   data-⃝⃝⃝="             "

• カスタムデータ属性とは、HTML5の仕様のひとつ
  で自由に属性を自由に定義できるもの
• CSSやJavaScriptを書かかなくてもスマートフォン
  サイトを制作することができる
• その手軽さがjQuery Mobileを使用する最大のメ
  リットとも言える
充実のUIコンポーネント
• jQuery Mobileでは、スマートフォンに最適化され
  たレイアウト・UI部品が予め多く揃っているため、
 それらを組み合わせるだけで操作性に優れたサイト
 を制作することができる。
クロスプラットフォーム対応
•   jQuery Mobileは、デスクトップ、スマートフォン、タブレッ
    ト、電子書籍プラットフォームの大半を幅広くサポートしてい
    る。jQuery Mobile公式サイトに、サポートレベルを3つに分
    けてプラットフォームの対応状況を掲載している。
アクセシビリティの確保
•   jQuery Mobileは、セマンティックなHTMLによって、広範囲
    のデバイスでページが閲覧できるよう設計されている。

•   W3Cが定めるWAI-ARIAで規定されているフォーカス管理や
    キーボードナビゲーション操作に対応させるための技術仕様を
    カバーし、スクリーンリーダの助けが必要な障害を持つユー
    ザーにも、最大限のアクセシビリティを提供できる。
アクセシビリティの確保
15VISIONのサイトをIE6で表示した場合
アクセシビリティの確保
jQuery Mobile DEMOを i-mode で表示した場合
jQuery Mobileの得手・不得手
jQuery Mobileの得意なこと



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


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

jQuery Mobileのできること、
   できないことを理解し、
 設計時に採用範囲を決める。

がっつりカスタマイズしたい場合は
最初から使わないほうがいいかも。

部分的な利用・モックアップのみで
   使うという選択肢も。
がんばりましょー (́ `*)ノ

jQuery Mobile 概要