jQuery Mobile

26,505 views
26,457 views

Published on

第30回HTML5とか勉強会のjQuery Mobileの紹介セッションの資料です。

0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
26,505
On SlideShare
0
From Embeds
0
Number of Embeds
17,119
Actions
Shares
0
Downloads
66
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

jQuery Mobile

  1. 1. jQuery Mobile 2012/06/12 第30回 HTML5とか勉強会Toru Yoshikawa ( @yoshikawa_t )
  2. 2. Who?吉川 徹/Toru Yoshikawa C.A.Mobile Web先端技術フェロー html5j.org/HTML5とか勉強会スタッフ Google API Expert (Chrome)/Chrome API Developers JP Sublime Text 2 Japan Users Group allWebクリエイター塾/jQuery Mobile担当講師(6/23開催) Twitter: @yoshikawa_t Blog: http://d.hatena.ne.jp/pikotea/
  3. 3. AgendajQuery Mobileとは?jQuery MobileのメリットとデメリットDemo jQuery Mobileのツールやプラグイン、関連プロジェクトの紹介おわりに
  4. 4. jQuery Mobileとは?
  5. 5. jQuery Mobileとは?モバイル向けのJavaScriptフレームワークjQueryを利用するデザイナーでもデベロッパーでも簡単にモバイルサイトを作成できるプロジェクトの目的:「すべての一般的なモバイルデバイスでシームレスに動作する統一されたインターフェースを提供する」
  6. 6. Eclipse survey 2012 report http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-final
  7. 7. Sponsors
  8. 8. jQuery Mobileのメリットとデメリット
  9. 9. jQuery Mobileのメリット とても簡単 クロスブラウザ対応 活発な開発と情報の多さ
  10. 10. jQuery Mobileのデメリット 重厚長大なフレームワーク 凝ったデザインが難しい デバイスによっては遅い
  11. 11. jQuery Mobileの使いどころ モックやプロトタイプ、業務アプリなど、 とにかくサクっと作るには最適 オリジナルテーマやデザインを用意してお けば、大体のモバイルサイトに対応できる デザインにこだわりがあったり、ハイパ フォーマンスを求める場合はそれなりのコ ストがかかる
  12. 12. セキュリティ上の留意点ページ遷移にデフォルトでajaxを自動的に利用しているので、同一ドメインで信頼できないリソースがある場合はセキュリティに注意 http://d.hatena.ne.jp/pikotea/20120405/1333631161
  13. 13. <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initical-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> <title>Demo</title></head> Demo<body> <section data-role="page"> <header data-role="header"> <h1>ヘッダー</h1> </header> <article data-role="content"> コンテンツ </article> <footer data-role="footer"> <h4>フッター</h4> </footer> </section></body></html>
  14. 14. jQuery Mobileのツールやプラグイン、 関連プロジェクトの紹介
  15. 15. jQuery Mobile Gallery http://www.jqmgallery.com/
  16. 16. jQuery Mobile Galleryhttp://www.slideshare.net/mobile http://m.disneyworld.disney.go.com/
  17. 17. Combining Responsive Web Design http://15vision.jp/mobile/
  18. 18. ThemeRoller簡単にjQuery Mobileのテーマが作成可能 http://jquerymobile.com/themeroller/
  19. 19. Download Builder Tool必要なパーツだけをビルドしてダウンロードする Coming Soon!
  20. 20. オンラインオーサリングツール codiqa http://www.codiqa.com/
  21. 21. Dreamweaver & Fireworks CS6
  22. 22. Third Party Plugin DateBox http://dev.jtsage.com/jQM-DateBox/
  23. 23. おわりに
  24. 24. おわりにとにかく簡単なので、まずは試してみてくださいjQuery Mobileがマッチするかどうかは案件次第ですが、使いどころは多いと思いますノウハウ(バッドノウハウ含む)の宝庫なので、ウォッチするだけでも役に立つかも
  25. 25. Thank you!! ( @yoshikawa_t )
  26. 26. ResourcesそろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか ( http://d.hatena.ne.jp/pikotea/20120405/1333631161 )jQuery Mobileではじめるモバイルサイト/アプリ制作( http://www.slideshare.net/yoshikawa_t/jquery-mobile-10578175 )jQuery Mobile 最新情報 & Tips ( http://www.slideshare.net/yoshikawa_t/jquery-mobile-tips )

×