Your SlideShare is downloading. ×
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,095

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,095
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 )

×