Your SlideShare is downloading. ×
JqueryMobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JqueryMobile

2,006
views

Published on

jQueryMobileについて …

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,006
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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>
  • Transcript

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