Download as PDF, PPTX
Uploaded byyoshikawa_t
jQuery Mobileカスタマイズ自由自在 v1.2
第32回HTML5とか勉強会でのセッション資料です。HTML5 Conference 2012の再演となります。v1.2ということで細部に若干のアップデートをしています。
jQuery Mobileカスタマイズ自由自在 v1.2
- 1. jQuery Mobile カスタマイズ⾃自由⾃自在 v1.2 2012/10/23 HTML5 Conference 2012／第32回HTML5とか勉強会 Toru Yoshikawa ( @yoshikawa_̲t)
- 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t • C.A.Mobile Web先端技術フェロー • html5j.org/HTML5とか勉強会スタッフ • Google API Expert ( Chrome ) • ⽇日本jQuery Mobileユーザー会 • Sublime Text 2 Japan Users Group • allWebクリエイター塾/jQuery Mobile担当講師 • Blog: http://d.hatena.ne.jp/pikotea/
- 3. 「jQuery Mobile パーフェクトガイド」「HTML5ガイドブック 増補改訂版」（共著） http://www.amazon.co.jp/dp/ http://www.amazon.co.jp/dp/ 484433266X 4844332937
- 4. Agenda 1. jQuery Mobile を使った良良いサイトとは何か？ 2. jQuery Mobile のカスタマイズ ー デザイン編 ー 3. jQuery Mobile のカスタマイズ ー 応⽤用編 ー 4. まとめ
- 5. 1. jQuery Mobile を使った 良良いサイトとは何か？ http://www.jqmgallery.com/
- 6.
- 7.
- 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.
- 14. 2. jQuery Mobile のカスタマイズ デザイン編
- 15. デザインのカスタマイズ 1. ThemeRollerで⼤大まかなデザインをカ スタマイズする 2. 細かなデザインをスタイルを上書きし てカスタマイズする
- 16. ThemeRollerで⼤大まかなデザイン • フォント • ページの背景⾊色 • 各UIのカラー • ⾓角丸 http://jquery.mobile.com/themeroller/
- 17. スタイルで細かなデザイン • 個別に適⽤用する⼀一部のUIへのスタイル指定（従来 の⽅方法） • 全体に影響するテンプレートとしてのスタイル指定 .ui-header .ui-title { /* customize */ }
- 18. jQuery Mobile のスタイル構造を知る • jQuery Mobileが⾃自動的に⽣生成した要素に 付与されるクラスをカスタマイズする • デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
- 19. 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
- 20. jQuery Mobile のスタイル構造を知る •デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
- 21.
- 22. ページ ヘッダー .ui-‐‑‒header .ui-‐‑‒page コンテンツ .ui-‐‑‒content .ui-‐‑‒dialog フッター .ui-‐‑‒footer
- 23. Tips 1 ヘッダーとページの背景⾊色を変更更する .ui-header { /* ヘッダー背景 */ background: linear-gradient(top, #fff 0%, #fdfcfc 50%, #f5efef 50%, #ebe1e1 100%); border: 1px solid #bbb; } .ui-content { /* コンテンツ背景 */ background: url(images/bg.gif); } .ui-content { /* 余白 */ padding: 0; }
- 24.
- 25. ボタン .ui-‐‑‒btn .ui-‐‑‒btn-‐‑‒inner .ui-‐‑‒icon ボタン .ui-‐‑‒btn-‐‑‒text
- 26. Tips2 ボタンの⾓角丸、背景⾊色を変更更する .ui-btn-corner-all {/* 角丸 .ui-btn-up-c, .ui-btn-hover-c, */ .ui-btn-down-c { /* 背景 */ border-radius: 0.2em; } border: 1px solid #bbb; background: #fff; .ui-btn-inner { /* ボタンサイズ */ box-shadow: none; font-size: 1em; } padding: 0.6em 20px; } .ui-btn-active { /* 選択時 */ background: #aaa; box-shadow: inherit; text-shadow: inherit; }
- 27.
- 28. リスト .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
- 29. Tips3 リストを整形する .ui-li-thumb { /* サムネイルサイズ */ padding: 10px; max-height: 70px; max-width: 70px; } .ui-li-has-thumb .ui-btn-inner a.ui- link-inherit { /* 左余白・リスト高さ */ min-height: 70px; padding-left: 75px; } .ui-li-heading { /* 見出しフォント */ font-size: 1.1em; }
- 30. Tips4 リストの背景⾊色・⾓角丸を変更更する • 背景⾊色はボタンと同様 • ⾓角丸は各コーナーごとに定義が分かれている .ui-corner-top { /* 角丸 */ .ui-corner-tl { border-top-left-radius: 0.2em; border-top-left-radius: 0.2em; } border-top-right-radius: 0.2em; } .ui-corner-tr { border-top-right-radius: 0.2em; .ui-corner-bottom { border-bottom-left-radius: 0.2em; } .ui-corner-bl { border-bottom-right-radius: 0.2em; } border-bottom-left-radius: 0.2em; } .ui-corner-br { border-bottom-right-radius: 0.2em; }
- 31.
- 32. 共通のスタイルの適⽤用には気を付ける 例例）.ui-‐‑‒header .ui-‐‑‒title
- 33. 3. jQuery Mobile のカスタマイズ ー 応⽤用編 ー
- 34.
- 35.
- 36. より⾼高度度なカスタマイズ • jQuery Mobile の装飾や動作から除外する領領域 を作る ✓data-‐‑‒ajax … Ajaxを無効にする ✓data-‐‑‒enhance … 装飾を無効にする • jQuery Mobile のイベントを知る ✓pageinit … ページの初期化 ✓pageshow … ページの表⽰示
- 37. 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>
- 38. jQuery Mobileのイベントを知る • jQuery Mobile のページ遷移を理理解する • ページ関連のイベント ✓pageinit … ページの初期化 ✓pageshow … ページの表⽰示
- 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(){ /* ライブラリの利用 */ $(this).find('.flexslider').flexslider(); }); }); <div data-ajax="false" data-enhance="false"> <!-- スライドショーのマークアップ --> <div class="flexslider"> <ul class="slides" >...</ul> </div> </div>
- 45.
- 46. まとめ • jQuery Mobile バレしないサイトを⽬目指そう！ ✓⼤大まかなデザインはThemeRollerで、細かなデザ インはスタイルを上書きしていく ✓jQuery Mobileの構造や挙動を知ることによってカ スタマイズがやりやすくなる ✓サードパーティ製のライブラリやツールをうまく 利利⽤用しよう ✓デバッグツールは必須
- 47. 今後のロードマップ • 1.3 2012第4四半期（2012年年10⽉月〜～12⽉月） ✓ レスポンシブデザイン対応（レスポンシブテーブルなど） • 1.4 2013第2四半期（2013年年1⽉月〜～3⽉月） ✓ スクロール領領域とタブの追加 • 1.5 2013第2四半期（2013年年4⽉月〜～6⽉月） ✓ カルーセル追加 • 1.6 2013第3四半期（2013年年7⽉月〜～9⽉月） ✓ マルチパネル対応 • 1.7 2013第4四半期（2013年年10⽉月〜～12⽉月） ✓ コードの最適化・パフォーマンスチューニング
- 48. その他 • セキュリティフィックスなどの情報へのウォッチを ✓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 は問題なし
- 49. ⽇日本 jQuery Mobile ユーザー会 • https://groups.google.com/group/jqm-‐‑‒jp/ • jQuery Mobileに関するノウハウの共有・情報 交換 是⾮非、ご参加ください！
- 50. Thank you!! ( @yoshikawa_̲t )
- 51. Resources • jQuery Mobile 公式サイト ( http://jquerymobile.com/ ) • jQuery Mobile ギャラリー ( http:// www.jqmgallery.com/ ) • ⽇日本 jQuery Mobile ユーザー会 ( https:// groups.google.com/group/jqm-‐‑‒jp/ ) • jQuery Mobileパーフェクトガイド サポートページ ( http:// www.impressjapan.jp/books/3266 ) ※サンプルのダウンロードができます