jQuery Mobileカスタマイズ自由自在
54 likes14,321 views
9/8に行われたHTML5 Conference 2012での「jQuery Mobileカスタマイズ自由自在」のセッション資料です。
jQuery Mobileカスタマイズ自由自在
- 1. jQuery Mobile カスタマイズ⾃自由⾃自在 2012/9/8 HTML5 Conference 2012 Toru Yoshikawa ( @yoshikawa_̲t)
- 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t • C.A.Mobile Web先端技術フェロー • html5j.org/HTML5とか勉強会スタッフ • Google API Expert ( Chrome ) • Sublime Text 2 Japan Users Group 管理理⼈人 • allWebクリエイター塾/jQuery Mobile担当講師 • Blog: http://d.hatena.ne.jp/pikotea/
- 3. 「jQuery Mobile パーフェクトガイド」を執筆しました！ http://www.amazon.co.jp/dp/484433266X
- 4. Agenda 1. jQuery Mobile を使った良良いサイトとは何か？ 2. jQuery Mobile のカスタマイズ ー デザイン編 ー 3. jQuery Mobile のカスタマイズ ー 応⽤用編 ー 4. まとめ
- 5. 1. jQuery Mobile を使った 良良いサイトとは何か？ http://www.jqmgallery.com/
- 6. Not cool :(
- 7. Cool :)
- 8. コンセプトに合わせたデザインを • 中途半端に jQuery Mobile を利利⽤用する と…？ • jQuery Mobile のデザインに引きずられ てコンセプトが崩れる • jQuery Mobile のデザインを塗り替える
- 9. デザイン例例 Jeep slideshare Disney
- 10. jQuery Mobile バレしない サイトを作ろう！
- 11. jQuery Mobile バレしないためには？ jQuery Mobileの読み込み <link rel="stylesheet" href="lib/ jquery.mobile-1.1.1.min.css" /> <script src="lib/jquery-1.7.1.min.js"></script> <script src="lib/jquery.mobile-1.1.1.min.js"></script>
- 12. jQuery Mobile バレしないためには？ jQuery Mobileの読み込み <link rel="stylesheet" href="lib/ hoge-1.1.1.min.css" /> <script src="lib/jquery-1.7.1.min.js"></script> <script src="lib/foo-1.1.1.min.js"></script>
- 13. 2. jQuery Mobile のカスタマイズ デザイン編
- 14. デザインのカスタマイズ 1. ThemeRollerで⼤大まかなデザインをカ スタマイズする 2. 細かなデザインをスタイルを上書きし てカスタマイズする
- 15. ThemeRollerで⼤大まかなデザイン • フォント • ページの背景⾊色 • 各UIのカラー • ⾓角丸 http://jquery.mobile.com/themeroller/
- 16. スタイルで細かなデザイン • 個別に適⽤用する⼀一部のUIへのスタイル指定（従来 の⽅方法） • 全体に影響するテンプレートとしてのスタイル指定 .ui-header .ui-title { /* customize */ }
- 17. jQuery Mobile のスタイル構造を知る • デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
- 18. ページ
- 19. ページ ヘッダー .ui-‐‑‒header .ui-‐‑‒page コンテンツ .ui-‐‑‒content .ui-‐‑‒dialog フッター .ui-‐‑‒footer
- 20. ページ • .ui-‐‑‒header ✓ヘッダーにロゴを利利⽤用したい • .ui-‐‑‒page, .ui-‐‑‒content ✓ページの背景⾊色を変更更したい • .ui-‐‑‒content ✓コンテンツの余⽩白を調整したい • etc...
- 21. ページ ヘッダーの背景⾊色 .ui-header { background: url(images/logo.gif); } コンテンツの余⽩白 .ui-content { padding: 0; }
- 22. ボタン
- 23. ボタン .ui-‐‑‒btn .ui-‐‑‒btn-‐‑‒inner .ui-‐‑‒icon ボタン .ui-‐‑‒btn-‐‑‒text
- 24. ボタン • .ui-‐‑‒btn ✓ボタンの背景を変えたい • .ui-‐‑‒btn-‐‑‒inner ✓ボタンの⼤大きさを変えたい • .ui-‐‑‒btn-‐‑‒text ✓ボタンのフォントを変えたい ✓余⽩白を調整したい • etc...
- 25. ボタン ボタンの背景⾊色 .ui-btn { background-image: linear-gradient(to bottom, #E2F5B8 0%, #fff 100%); } ボタンの⼤大きさ .ui-btn-inner { padding: 0.8em 30px; }
- 26. リスト
- 27. リスト .ui-‐‑‒listview .ui-‐‑‒li-‐‑‒has-‐‑‒thumb .ui-‐‑‒li .ui-‐‑‒btn-‐‑‒inner .ui-‐‑‒btn-‐‑‒text .ui-‐‑‒btn .ui-‐‑‒li-‐‑‒heading .ui-‐‑‒link-‐‑‒inherit .ui-‐‑‒icon .ui-‐‑‒li-‐‑‒desc .ui-‐‑‒li-‐‑‒thumb
- 28. リスト • 構成的にはボタンとほぼ同じ • .ui-‐‑‒link-‐‑‒inherit ✓リストアイテムの⼤大きさを変えたい ✓リストアイテムの余⽩白を変えたい • .ui-‐‑‒li-‐‑‒heading, .ui-‐‑‒li-‐‑‒desc ✓テキストのフォントを変えたい • .ui-‐‑‒li-‐‑‒thumb ✓サムネイルの⼤大きさを変えたい • etc...
- 29. リスト サムネイルの⼤大きさ .ui-li-thumb { max-height: 100px; max-width: 100px; } リストの余⽩白やテキストの位置 .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit { min-height: 80px; padding-left: 120px; }
- 30. jQuery Mobile のスタイルの変化を知る • テーマによるスタイルの変化 -‐‑‒ .ui-‐‑‒body-‐‑‒a 〜～ .ui-‐‑‒body-‐‑‒e • 状態によるスタイルの変化 -‐‑‒ .ui-‐‑‒btn-‐‑‒up-‐‑‒c, .ui-‐‑‒btn-‐‑‒hover-‐‑‒c, .ui-‐‑‒btn-‐‑‒ down-‐‑‒c • 機能によるスタイルの変化 -‐‑‒ .ui-‐‑‒corner-‐‑‒all, .ui-‐‑‒shadow, .ui-‐‑‒li-‐‑‒has-‐‑‒thumb
- 31. 共通のスタイルの適⽤用には気を付ける 例例）.ui-‐‑‒header .ui-‐‑‒title
- 32. 3. jQuery Mobile のカスタマイズ ー 応⽤用編 ー
- 34. 例例えば、よくあるスライドショーのようなもの Jeep ( http://m.jeep.com/en/mobile/ )
- 35. オリジナルなUIを作る • jQuery Mobile の装飾や動作から除外する領領域を作る ✓data-‐‑‒ajax … Ajaxを無効にする ✓data-‐‑‒enhance … 装飾を無効にする ✓keepNative … 装飾を無効にする(JS)
- 36. jQuery Mobile の装飾や動作から除外する領領域を作る JSで設定を有効化 $(document).on('mobileinit', function(){ $.mobile.ignoreContentEnabled = true; }); data-‐‑‒ajaxとdata-‐‑‒enhanceの設定 <div data-ajax="false" data-enhance="false"> <!-- jQuery Mobile free --> </div>
- 37. jQuery Mobile の装飾や動作から除外する領領域を作る セレクターで指定する⽅方法 $(document).on('mobileinit', function(){ $.page.prototype.options.keepNative = '.no-enhance'; });
- 38. ライブラリやツールを利利⽤用する • jQuery Mobile のページ遷移を理理解する • jQuery Mobile のイベントを知る
- 39. ページ遷移の挙動を理理解する 次ページ1 最初のページ <html> <html> <head>...</head> <head>...</head> <body> <body> <div data-role="page" Ajax <div data-role="page" id="main">...</div> id="next1">...</div> </body> <!-- 次ページ1 --> </html> <div data-role="page" id="next1">...</div> 次ページ2 <!-- 次ページ2 --> <html> <div data-role="page" id="next2">...</div> <head>...</head> <body> Ajax <div data-role="page" </body> id="next2">...</div> </html> </body> </html>
- 40. 2つの覚えておくべきイベント • pageinit … ページの初期時に発⽣生 • pageshow … ページの表⽰示時に発⽣生
- 41. pageinit • jQuery Mobile が最初に初期化する際に発⽣生す るイベント • 同じページを再度度表⽰示する場合は、発⽣生しない • loadイベントの代わりに利利⽤用するイメージ $(document).on('pageinit', '#page-id', function(){ /* 動的なDOMの構築など */ });
- 42. pageshow • ページを表⽰示するたびに発⽣生するイベント • Google Analytics などのページビューをカウン トするようなツールに利利⽤用する • 座標計算やサイズ計算などを⾏行行うライブラリの 初期化に利利⽤用する $(document).on('pageshow', '#page-id', function(){ /* ページが表示される際に行う初期化など */ });
- 43. ライブラリを利利⽤用する際の注意点 • 座標計算やサイズ計算などがあるライブラリだと pageinitでは正常に動作しない • pageshowで1回だけ初期化を⾏行行う場合もキャッシュ が消えたあとに再度度表⽰示すると正常に動作しない $(document).on('pageinit', '#page-id', function(){ $(this).one('pageshow', function(){ /* 一度しか必要のないライブラリの初期化 */ }); });
- 44. 例例）スライドショーを作成するケース $(document).on('mobileinit', function(){ $.mobile.ignoreContentEnabled = true; }); $(document).on('pageinit', '#page-id', function(){ $(this).one('pageshow', function(){ /* スライドショーの初期化 */ }); }); <div data-ajax="false" data-enhance="false"> <!-- スライドショーのマークアップ --> </div>
- 45. 4. まとめ
- 46. まとめ • jQuery Mobile バレしないサイトを⽬目指そう ✓⼤大まかなデザインはThemeRollerで、細かなデ ザインはスタイルを上書きしていく ✓サードパーティ製のライブラリやツールをうま く利利⽤用しよう ✓jQuery Mobileの構造や挙動を知ることによっ てカスタマイズがやりやすくなる ✓デバッグツールは必須
- 47. その他 • セキュリティフィックスなどの情報へのウォッチを ✓jQuery Mobile alpha版には脆弱性 ✓jQuery Mobile 1.1.1には、location.hrefに起因す るバグの問題がある ( 修正版 https://github.com/ pikotea/jquery-‐‑‒mobile-‐‑‒1.1.1-‐‑‒issue-‐‑‒4787-‐‑‒fixed ) ✓現状の最新版である jQuery Mobile 1.2 beta は問 題なし
- 48. ⽇日本 jQuery Mobile ユーザー会を発⾜足！ https://groups.google.com/group/jqm-‐‑‒jp/ • 共同管理理⼈人に「jQuery Mobile スマ ートフォンアプリ開発」の著者であ る岡本 隆史さん • jQuery Mobileに関するノウハウの 共有・情報交換 是⾮非、ご参加ください！
- 49. Thank you!! ( @yoshikawa_̲t )
- 50. Resources • jQuery Mobile 公式サイト ( http://jquerymobile.com/ ) • jQuery Mobile ギャラリー ( http://www.jqmgallery.com/ ) • jQuery Mobileのlocation.hrefのバグに起因するXSSへの対応 をjQuery Mobile 1.1.1に適⽤用したビルドを作りました ( http://d.hatena.ne.jp/pikotea/20120810 ) • ⽇日本 jQuery Mobile ユーザー会 ( https:// groups.google.com/group/jqm-‐‑‒jp/ )