jQuery Mobile 概要

1,822
-1

Published on

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,822
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery Mobile 概要

  1. 1. jQuery Mobile 概要 2012.5.25 Smartphone App Hackathon in Fukui @ichigami
  2. 2. jQuery Mobile でつくったもの
  3. 3. jQuery Mobile
  4. 4. jQuery Mobile Gallery http://www.jqmgallery.com/
  5. 5. ASCII.jp:jQuery Mobileを使った国内スマホサイトまとめ http://ascii.jp/elem/000/000/674/674677/
  6. 6. jQuery Mobile デモページ
  7. 7. jQuery Mobileの特徴
  8. 8. jQuery Mobileの特徴• HTML5のカスタムデータ属性を利用• 充実のUIコンポーネント• クロスプラットフォーム対応• 高いアクセシビリティ性
  9. 9. HTML5のカスタムデータ属性を利用 data-⃝⃝⃝=" "• カスタムデータ属性とは、HTML5の仕様のひとつ で自由に属性を自由に定義できるもの• CSSやJavaScriptを書かかなくてもスマートフォン サイトを制作することができる• その手軽さがjQuery Mobileを使用する最大のメ リットとも言える
  10. 10. 充実のUIコンポーネント• jQuery Mobileでは、スマートフォンに最適化され たレイアウト・UI部品が予め多く揃っているため、 それらを組み合わせるだけで操作性に優れたサイト を制作することができる。
  11. 11. クロスプラットフォーム対応• jQuery Mobileは、デスクトップ、スマートフォン、タブレッ ト、電子書籍プラットフォームの大半を幅広くサポートしてい る。jQuery Mobile公式サイトに、サポートレベルを3つに分 けてプラットフォームの対応状況を掲載している。
  12. 12. アクセシビリティの確保• jQuery Mobileは、セマンティックなHTMLによって、広範囲 のデバイスでページが閲覧できるよう設計されている。• W3Cが定めるWAI-ARIAで規定されているフォーカス管理や キーボードナビゲーション操作に対応させるための技術仕様を カバーし、スクリーンリーダの助けが必要な障害を持つユー ザーにも、最大限のアクセシビリティを提供できる。
  13. 13. アクセシビリティの確保15VISIONのサイトをIE6で表示した場合
  14. 14. アクセシビリティの確保jQuery Mobile DEMOを i-mode で表示した場合
  15. 15. jQuery Mobileの得手・不得手
  16. 16. jQuery Mobileの得意なこと• 操作性を考慮したデザイン• ページアニメーション• ヘッダー・フッターの固定配置
  17. 17. jQuery Mobileの苦手なこと• オリジナルデザイン• 他ライブラリとの連携• アニメーションがスムーズじゃない端末も• セキュリティに関する留意点
  18. 18. まとめjQuery Mobileのできること、 できないことを理解し、 設計時に採用範囲を決める。がっつりカスタマイズしたい場合は最初から使わないほうがいいかも。部分的な利用・モックアップのみで 使うという選択肢も。
  19. 19. がんばりましょー (́ `*)ノ
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×