Your SlideShare is downloading. ×
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
jQuery Mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Mobile

25,143

Published on

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

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

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

No Downloads
Views
Total Views
25,143
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
66
Comments
0
Likes
14
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

Transcript

  • 1. jQuery Mobile 2012/06/12 第30回 HTML5とか勉強会Toru Yoshikawa ( @yoshikawa_t )
  • 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. AgendajQuery Mobileとは?jQuery MobileのメリットとデメリットDemo jQuery Mobileのツールやプラグイン、関連プロジェクトの紹介おわりに
  • 4. jQuery Mobileとは?
  • 5. jQuery Mobileとは?モバイル向けのJavaScriptフレームワークjQueryを利用するデザイナーでもデベロッパーでも簡単にモバイルサイトを作成できるプロジェクトの目的:「すべての一般的なモバイルデバイスでシームレスに動作する統一されたインターフェースを提供する」
  • 6. Eclipse survey 2012 report http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-final
  • 7. Sponsors
  • 8. jQuery Mobileのメリットとデメリット
  • 9. jQuery Mobileのメリット とても簡単 クロスブラウザ対応 活発な開発と情報の多さ
  • 10. jQuery Mobileのデメリット 重厚長大なフレームワーク 凝ったデザインが難しい デバイスによっては遅い
  • 11. jQuery Mobileの使いどころ モックやプロトタイプ、業務アプリなど、 とにかくサクっと作るには最適 オリジナルテーマやデザインを用意してお けば、大体のモバイルサイトに対応できる デザインにこだわりがあったり、ハイパ フォーマンスを求める場合はそれなりのコ ストがかかる
  • 12. セキュリティ上の留意点ページ遷移にデフォルトでajaxを自動的に利用しているので、同一ドメインで信頼できないリソースがある場合はセキュリティに注意 http://d.hatena.ne.jp/pikotea/20120405/1333631161
  • 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. jQuery Mobileのツールやプラグイン、 関連プロジェクトの紹介
  • 15. jQuery Mobile Gallery http://www.jqmgallery.com/
  • 16. jQuery Mobile Galleryhttp://www.slideshare.net/mobile http://m.disneyworld.disney.go.com/
  • 17. Combining Responsive Web Design http://15vision.jp/mobile/
  • 18. ThemeRoller簡単にjQuery Mobileのテーマが作成可能 http://jquerymobile.com/themeroller/
  • 19. Download Builder Tool必要なパーツだけをビルドしてダウンロードする Coming Soon!
  • 20. オンラインオーサリングツール codiqa http://www.codiqa.com/
  • 21. Dreamweaver & Fireworks CS6
  • 22. Third Party Plugin DateBox http://dev.jtsage.com/jQM-DateBox/
  • 23. おわりに
  • 24. おわりにとにかく簡単なので、まずは試してみてくださいjQuery Mobileがマッチするかどうかは案件次第ですが、使いどころは多いと思いますノウハウ(バッドノウハウ含む)の宝庫なので、ウォッチするだけでも役に立つかも
  • 25. Thank you!! ( @yoshikawa_t )
  • 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 )

×