jQuery Mobile 概要

2012.5.25Smartphone App Hackathon in Fukui

@ichigami

jQuery Mobile でつくったもの

jQuery Mobile

jQuery Mobile Galleryhttp://www.jqmgallery.com/

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

jQuery Mobile デモページ

jQuery Mobileの特徴

jQuery Mobileの特徴

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

HTML5のカスタムデータ属性を利用

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

data-◯◯◯="× × ×"

充実の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のできること、できないことを理解し、設計時に採用範囲を決める。

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

部分的な利用・モックアップのみで使うという選択肢も。

まとめ

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