JqueryMobile

2,341 views

Published on

jQueryMobileについて
2011/4/5の勉強会資料

http://jquerymobile.com/blog/

脆弱性については、アップデートにより修正されたみたいですが、そもそも設計自体が危ないという見方があるみたいで、どうなんでしょう。

http://subtech.g.hatena.ne.jp/mala/20110906/1315299416

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

  • Be the first to like this

No Downloads
Views
Total views
2,341
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • つまり、難しいことを考えずに、勝手に優れたUIができあがる。
  • そもそもスマートフォン向けフレームワークというのはデバイスの違いを気にせず、「iOSヒューマンインターフェースガイドライン」に即したスマフォサイトを実現するもの。
  • <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script></head> <body> <div data-role="page"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul></div><!-- /page --></body></html>
  • <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script></head> <body> <div data-role="page"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul></div><!-- /page --></body></html>
  • JqueryMobile

    1. 1. Hazuki wakabayashi 5/4/2011jQuery Mobilehttp://jquerymobile.com/
    2. 2. jQuery Mobileとは? イマ、最も注目されているスマートフォン向けフレームワーク なにができるの?
    3. 3. HTMLを書くだけで.. アップルが規定するガイドラインに沿ったUIのスマートフォン向けサイトを実現できる! なにがすごいの?
    4. 4. アップルが規定するガイドラインとはiOSヒューマンインターフェースガイドラインhttps://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf ユーザー体験を考え抜いたUIの あり方について規定している
    5. 5. つまり、このガイドラインに沿って設計すれば、 天下のアップルが最高と定めた UIが出来上がる!
    6. 6. 最高のUIとは? 直感的説明されなくても、何をすればいいのかがすぐわかる 「ボタン => 押す」 操作感 ユーザーが期待した通りのアクションをする 「指をスライドさせるとページ切り替え」 整合性 ・iOSとの一貫性 ・同じ情報は同じ意味を表してい る 「☓アイコン ⇒ 閉じ る」
    7. 7. そう、HTMLを書くだけで.. アップルが規定するガイドラインに沿ったUIのスマートフォン向けサイトを実現できる! ということは、
    8. 8. 「このボタンちょっと押しにくいよ、もう少し大きくしない?」「あーここもホームに戻るんじゃん、さっきのボタンにはアイコン付いてなかったっけか?」「ん?このリスト、さっきの画面の見せ方と揃えたほうがよくない?あー、でもデザイン崩れるかなー」「あれ、なんか文字サイズおかしいな、こっちの情報の方が目立つようにしなきゃ」「ん、なんでタップしたらこんな動きするの?ちょっと気持ち悪い。画面遷移すると思ったのに」勝手にやってくれるので気にしなくてOK!
    9. 9. アップルということはiphoneだけ? デバイスの違いを吸収してくれる! Iphone Android PCブラウザ WindowsPhoneデバイスの違いを気にせずに開発ができる
    10. 10. でもさぁ、 • iOSヒューマンインターフェースガイドラインに 即して作られている • デバイスの違いを吸収してくれるスマートフォンフレームワークなら当たり前、 jQueryMobieだけじゃないんだよね。 え?
    11. 11. スマートフォン向けフレームワークの 選択肢はいろいろある。 iUi、jQTouch、Sencha .. ではなぜ、jQuery Mobile?
    12. 12. jQuery Mobileの何がいいの? 対応デバイスの多さ http://jquerymobile.com/gbs/ ほぼすべてのスマートフォンに対応している。スマートフォンだけではなく、PCブラウザにも対応
    13. 13. jQuery Mobileの何がいいの? 勝手にユニバーサルデザイン WAI-ARIA規格導入 http://www.w3.org/WAI/intro/aria.phpスクリーンリーダー、音声ブラウザなど、リッチな アクセシビリティを実現できる
    14. 14. jQuery Mobileの何がいいの? 記述の簡単さ jqueryのコンセプト「Write Less Do More.」少ない記述で多くのことを!HTML5でHTMLを書くだけでスマートフォン向けの機能 を 追加できるようになっている。 jsとか一切書かなくていい。
    15. 15. どれだけ簡単なのか、 試しに 項目をフィルタリングできるリストを作ってみ る
    16. 16. ヘッダーでjsライブラリ、スタイルシートを指定する<head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet” href=“/css/jquery.mobile-1.1.0-rc.2.min.css" /> <script src=”/js/jquery-1.7.1.min.js"></script> <script src=”/js/jquery.mobile-1.1.0-rc.2.min.js"></script></head> ヘッダーで Jquery.js (jQueryライブラリ) jquery_mobilejs (jQueryMobileライブラリ) jquery.mobile.css (jQueryMobilesスタイルシート) を指定
    17. 17. カスタムデータ属性でタグの属性を指定する data-role=“page” は1ページを表す<body><div data-role="page"> <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul></div><</body> data-role="listview” data-inset="true” data-filter="true” リストで、デザインは角丸で、フィルターの付いたリストを表 す
    18. 18. はい、完成。HTML5でHTML書いただ け。ほんとにこれだけ。もちろん動作も完璧
    19. 19. ここまでおいしいのは、JQueryMobileだけじゃない?(私感)
    20. 20. これだけじゃない..
    21. 21. ②ダウンロード①ドラッグ&ドロッ プ 5秒でレイアウトできるツール完備!
    22. 22. コード書かない!スーパーイージー!!
    23. 23. デザインテーマのカスタマイズツール完備!
    24. 24. いたれりつくせり。

    ×