jQuery Mobile

jQuery Mobile 2012/06/12 第30回 HTML5とか勉強会Toru Yoshikawa ( @yoshikawa_t )

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/

AgendajQuery Mobileとは？jQuery MobileのメリットとデメリットDemo jQuery Mobileのツールやプラグイン、関連プロジェクトの紹介おわりに

jQuery Mobileとは？

jQuery Mobileとは？モバイル向けのJavaScriptフレームワークjQueryを利用するデザイナーでもデベロッパーでも簡単にモバイルサイトを作成できるプロジェクトの目的:「すべての一般的なモバイルデバイスでシームレスに動作する統一されたインターフェースを提供する」

Eclipse survey 2012 report http://www.slideshare.net/IanSkerrett/eclipse-survey-2012-report-final

Sponsors

jQuery Mobileのメリットとデメリット

jQuery Mobileのメリットとても簡単クロスブラウザ対応活発な開発と情報の多さ

jQuery Mobileのデメリット重厚長大なフレームワーク凝ったデザインが難しいデバイスによっては遅い

jQuery Mobileの使いどころモックやプロトタイプ、業務アプリなど、とにかくサクっと作るには最適オリジナルテーマやデザインを用意しておけば、大体のモバイルサイトに対応できるデザインにこだわりがあったり、ハイパフォーマンスを求める場合はそれなりのコストがかかる

セキュリティ上の留意点ページ遷移にデフォルトでajaxを自動的に利用しているので、同一ドメインで信頼できないリソースがある場合はセキュリティに注意 http://d.hatena.ne.jp/pikotea/20120405/1333631161

<!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>

jQuery Mobileのツールやプラグイン、関連プロジェクトの紹介

jQuery Mobile Gallery http://www.jqmgallery.com/

jQuery Mobile Galleryhttp://www.slideshare.net/mobile http://m.disneyworld.disney.go.com/

Combining Responsive Web Design http://15vision.jp/mobile/

ThemeRoller簡単にjQuery Mobileのテーマが作成可能 http://jquerymobile.com/themeroller/

Download Builder Tool必要なパーツだけをビルドしてダウンロードする Coming Soon!

オンラインオーサリングツール codiqa http://www.codiqa.com/

Dreamweaver & Fireworks CS6

Third Party Plugin DateBox http://dev.jtsage.com/jQM-DateBox/

おわりに

おわりにとにかく簡単なので、まずは試してみてくださいjQuery Mobileがマッチするかどうかは案件次第ですが、使いどころは多いと思いますノウハウ（バッドノウハウ含む）の宝庫なので、ウォッチするだけでも役に立つかも

Thank you!! ( @yoshikawa_t )

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 )

http://www.atmarkit.co.jp	10949
http://w3q.jp	212
http://v5.managerdev.merkutio.com	151
http://10.68.132.136	33
http://aitcms-w.atmarkit.co.jp	33
http://andand.posterous.com	23
http://webcache.googleusercontent.com	11
http://merkutio1.merkutiosite.com	4
http://www.twylah.com	3
http://us-w1.rockmelt.com	2
http://html555.jp	2
https://twitter.com	2
http://s.deeeki.com	1
http://dev39_test2.merkutiosite.com	1
http://www.excite-cache.jp	1
http://cache.yahoofs.jp	1
http://wiki.onakasuita.org	1

jQuery Mobile

by yoshikawa_t on Jun 12, 2012

Accessibility

Upload Details

Usage Rights

17 Embeds 11,430

Statistics

jQuery Mobile Presentation Transcript