JqueryMobile
Download as PPTX, PDF0 likes1,057 views
jQueryMobileについて 2011/4/5の勉強会資料 http://jquerymobile.com/blog/ 脆弱性については、アップデートにより修正されたみたいですが、そもそも設計自体が危ないという見方があるみたいで、どうなんでしょう。 http://subtech.g.hatena.ne.jp/mala/20110906/1315299416
JqueryMobile
- 1. Hazuki wakabayashi 5/4/2011 jQuery Mobile http://jquerymobile.com/
- 2. jQuery Mobileとは？ イマ、最も注目されている スマートフォン向けフレームワーク なにができるの？
- 4. アップルが規定するガイドラインとは iOSヒューマンインターフェースガイドライン https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf ユーザー体験を考え抜いたUIの あり方について規定している
- 5. つまり、 このガイドラインに沿って設計すれば、 天下のアップルが最高と定めた UIが出来上がる！
- 6. 最高のUIとは？ 直感的 説明されなくても、何をすればいいのかがすぐわかる 「ボタン => 押す」 操作感 ユーザーが期待した通りのアクションをする 「指をスライドさせるとページ切り替え」 整合性 ・iOSとの一貫性 ・同じ情報は同じ意味を表してい る 「☓アイコン ⇒ 閉じ る」
- 9. アップルということはiphoneだけ？ デバイスの違いを吸収してくれる！ Iphone Android PCブラウザ WindowsPhone デバイスの違いを気にせずに開発ができる
- 10. でもさぁ、 • iOSヒューマンインターフェースガイドラインに 即して作られている • デバイスの違いを吸収してくれる スマートフォンフレームワークなら当たり前、 ｊQueryMobieだけじゃないんだよね。 え？
- 11. スマートフォン向けフレームワークの 選択肢はいろいろある。 iUi、jQTouch、Sencha .. ではなぜ、jQuery Mobile？
- 12. ｊQuery Mobileの何がいいの？ 対応デバイスの多さ http://jquerymobile.com/gbs/ ほぼすべてのスマートフォンに対応している。 スマートフォンだけではなく、PCブラウザにも対応
- 13. ｊQuery Mobileの何がいいの？ 勝手にユニバーサルデザイン WAI-ARIA規格導入 http://www.w3.org/WAI/intro/aria.php スクリーンリーダー、音声ブラウザなど、リッチな アクセシビリティを実現できる
- 14. ｊQuery Mobileの何がいいの？ 記述の簡単さ jqueryのコンセプト「Write Less Do More.」少ない記述で多くのことを！ HTML5でHTMLを書くだけでスマートフォン向けの機能 を 追加できるようになっている。 ｊｓとか一切書かなくていい。
- 15. どれだけ簡単なのか、 試しに 項目をフィルタリング できるリストを作ってみ る
- 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. カスタムデータ属性でタグの属性を指定する 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. はい、完成。 HTML5でHTML書いただ け。 ほんとにこれだけ。 もちろん動作も完璧
- 20. これだけじゃない..
- 21. ②ダウンロード ①ドラッグ&ドロッ プ 5秒でレイアウトできるツール完備！
- 24. いたれりつくせり。
Editor's Notes
- #7: つまり、難しいことを考えずに、勝手に優れたUIができあがる。
- #12: そもそもスマートフォン向けフレームワークというのはデバイスの違いを気にせず、「iOSヒューマンインターフェースガイドライン」に即したスマフォサイトを実現するもの。
- #16: <!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>
- #18: <!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>