View
31
Download
4
Category
Preview:
DESCRIPTION
第30回HTML5とか勉強会のjQuery Mobileの紹介セッションの資料です。
Citation preview
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
Demo
<!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><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 Gallery
http://www.slideshare.net/mobile http://m.disneyworld.disney.go.com/
Combining Responsive Web Design
http://15vision.jp/mobile/
ThemeRoller
http://jquerymobile.com/themeroller/
簡単にjQuery Mobileのテーマが作成可能
Download Builder Tool必要なパーツだけをビルドしてダウンロードする
Coming Soon!
Dreamweaver & Fireworks CS6
Third Party PluginDateBox
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 )
Recommended