jQuery  Mobile カスタマイズ⾃自由⾃自在                       v1.2                                      2012/10/23HTML5  Conference  2...
Who?吉川  徹  /  Toru  Yoshikawa@yoshikawa_̲t•   C.A.Mobile  Web先端技術フェロー•   html5j.org/HTML5とか勉強会スタッフ•   Google  API  Expert ...
「jQuery Mobile パーフェクトガイド」 「HTML5ガイドブック 増補改訂版」(共著) http://www.amazon.co.jp/dp/   http://www.amazon.co.jp/dp/          48443...
Agenda1. jQuery  Mobile  を使った良良いサイトとは何か?2. jQuery  Mobile  のカスタマイズ  ー  デザイン編  ー3. jQuery  Mobile  のカスタマイズ  ー  応⽤用編  ー4. まとめ
1.  jQuery  Mobile  を使った  良良いサイトとは何か?      http://www.jqmgallery.com/
Not  cool  :(
Cool  :)
コンセプトに合わせたデザインを• 中途半端に  jQuery  Mobile  を利利⽤用する と…?• jQuery  Mobile  のデザインに引きずられ てコンセプトが崩れる• jQuery  Mobile  のデザインを塗り替える
デザイン例例Jeep    slideshare   Disney
jQuery  Mobile  バレしない   サイトを作ろう!
jQuery  Mobile  バレしないためには?jQuery  Mobileの読み込み<link rel="stylesheet" href="lib/jquery.mobile-1.1.1.min.css" /><script src="...
jQuery  Mobile  バレしないためには?jQuery  Mobileの読み込み<link rel="stylesheet" href="lib/hoge-1.1.1.min.css"   /><script src="lib/jqu...
jQuery  Mobileだとバレないようにデフォルトのデザインを上書きし      ていきましょう
2.  jQuery  Mobile  のカスタマイズ            デザイン編
デザインのカスタマイズ1. ThemeRollerで⼤大まかなデザインをカ   スタマイズする2. 細かなデザインをスタイルを上書きし   てカスタマイズする
ThemeRollerで⼤大まかなデザイン                                        • フォント                                        • ページの背景⾊色     ...
スタイルで細かなデザイン• 個別に適⽤用する⼀一部のUIへのスタイル指定(従来  の⽅方法)• 全体に影響するテンプレートとしてのスタイル指定.ui-header .ui-title {  /* customize */}
jQuery  Mobile  のスタイル構造を知る • jQuery  Mobileが⾃自動的に⽣生成した要素に  付与されるクラスをカスタマイズする • デザインの主要な部分を占めるもの  ✓ ページ  ✓ ボタン  ✓ リスト
jQuery  Mobile  のスタイルの変化を知る• テーマによるスタイルの変化 -‐‑‒ .ui-‐‑‒body-‐‑‒a  〜~  .ui-‐‑‒body-‐‑‒e• 状態によるスタイルの変化 -‐‑‒ .ui-‐‑‒btn-‐‑‒up...
jQuery  Mobile  のスタイル構造を知る• デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
ページ
ページ                ヘッダー                        .ui-‐‑‒header .ui-‐‑‒page                コンテンツ   .ui-‐‑‒content.ui-‐‑‒dialo...
Tips  1  ヘッダーとページの背景⾊色を変更更する            .ui-header { /* ヘッダー背景 */              background: linear-gradient(top,           ...
ボタン
ボタン                                         .ui-‐‑‒btn                                .ui-‐‑‒btn-‐‑‒inner.ui-‐‑‒icon      ...
Tips2  ボタンの⾓角丸、背景⾊色を変更更する.ui-btn-corner-all { /* 角丸     .ui-btn-up-c,                               .ui-btn-hover-c,*/    ...
リスト
リスト.ui-‐‑‒listview                                                                              .ui-‐‑‒li-‐‑‒has-‐‑‒thumb ...
Tips3  リストを整形する     .ui-li-thumb { /* サムネイルサイズ */         padding: 10px;         max-height: 70px;         max-width: 70px...
Tips4  リストの背景⾊色・⾓角丸を変更更する   • 背景⾊色はボタンと同様   • ⾓角丸は各コーナーごとに定義が分かれている.ui-corner-top { /* 角丸 */              .ui-corner-tl { ...
Tips5  アイコンを変えるicons-18-white.pngicons-36-white.png
共通のスタイルの適⽤用には気を付ける   例例).ui-‐‑‒header  .ui-‐‑‒title
3.  jQuery  Mobile  のカスタマイズ            ー  応⽤用編  ー
より⾼高度度なカスタマイズ• オリジナルなUIを作る• ライブラリやツールを利利⽤用する
例例えば、よくあるスライドショーのようなもの(サンプルでは、flexsliderを利用)
より⾼高度度なカスタマイズ• jQuery  Mobile  の装飾や動作から除外する領領域  を作る ✓data-‐‑‒ajax  …  Ajaxを無効にする ✓data-‐‑‒enhance  …  装飾を無効にする• jQuery  Mo...
jQuery  Mobile  の装飾や動作から除外する領領域を作るJSで設定を有効化$(document).on(mobileinit, function(){  $.mobile.ignoreContentEnabled = true;})...
jQuery  Mobileのイベントを知る• jQuery  Mobile  のページ遷移を理理解する• ページ関連のイベント ✓pageinit  …  ページの初期化 ✓pageshow  …  ページの表⽰示
ページ遷移の挙動を理理解する                                                 次ページ1最初のページ                                                ...
2つの覚えておくべきイベント• pageinit  …  ページの初期時に発⽣生• pageshow  …  ページの表⽰示時に発⽣生
pageinit• jQuery  Mobile  が最初に初期化する際に発⽣生す  るイベント• 同じページを再度度表⽰示する場合は、発⽣生しない• loadイベントの代わりに利利⽤用する$(document).on(pageinit, #p...
pageshow• ページを表⽰示するたびに発⽣生するイベント• Google  Analytics  などのページビューをカウン  トするようなツールに利利⽤用する• 座標計算やサイズ計算などを⾏行行うライブラリの  初期化に利利⽤用する$(...
ライブラリを利利⽤用する際の注意点• 座標計算やサイズ計算などがあるライブラリだと pageinitでは正常に動作しない(イベント発⽣生時点で 要素がまだ⾮非表⽰示のため)• pageshowで1回だけ初期化を⾏行行う$(document).o...
例例)スライドショーを作成するケース(完成形)$(document).on(mobileinit, function(){  $.mobile.ignoreContentEnabled = true;});$(document).on(page...
4.  まとめ
まとめ• jQuery  Mobile  バレしないサイトを⽬目指そう! ✓⼤大まかなデザインはThemeRollerで、細かなデザ   インはスタイルを上書きしていく ✓jQuery  Mobileの構造や挙動を知ることによってカ   スタマ...
今後のロードマップ•   1.3  2012第4四半期(2012年年10⽉月〜~12⽉月)    ✓ レスポンシブデザイン対応(レスポンシブテーブルなど)•   1.4  2013第2四半期(2013年年1⽉月〜~3⽉月)    ✓ スクロール...
その他•   セキュリティフィックスなどの情報へのウォッチを    ✓jQuery  Mobile  alpha版には脆弱性    ✓jQuery  Mobile  1.1.1には、location.hrefに起因するバグの      問題があ...
⽇日本  jQuery  Mobile  ユーザー会• https://groups.google.com/group/jqm-‐‑‒jp/• jQuery  Mobileに関するノウハウの共有・情報  交換    是⾮非、ご参加ください!
Thank  you!!  (  @yoshikawa_̲t  )
Resources•   jQuery  Mobile  公式サイト  (  http://jquerymobile.com/  )•   jQuery  Mobile  ギャラリー  (  http://    www.jqmgallery....
Upcoming SlideShare
Loading in...5
×

jQuery Mobileカスタマイズ自由自在 v1.2

6,053

Published on

第32回HTML5とか勉強会でのセッション資料です。HTML5 Conference 2012の再演となります。v1.2ということで細部に若干のアップデートをしています。

0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,053
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
73
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

jQuery Mobileカスタマイズ自由自在 v1.2

  1. 1. jQuery  Mobile カスタマイズ⾃自由⾃自在   v1.2 2012/10/23HTML5  Conference  2012/第32回HTML5とか勉強会 Toru  Yoshikawa  (  @yoshikawa_̲t)
  2. 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. 3. 「jQuery Mobile パーフェクトガイド」 「HTML5ガイドブック 増補改訂版」(共著) http://www.amazon.co.jp/dp/ http://www.amazon.co.jp/dp/ 484433266X 4844332937
  4. 4. Agenda1. jQuery  Mobile  を使った良良いサイトとは何か?2. jQuery  Mobile  のカスタマイズ  ー  デザイン編  ー3. jQuery  Mobile  のカスタマイズ  ー  応⽤用編  ー4. まとめ
  5. 5. 1.  jQuery  Mobile  を使った 良良いサイトとは何か? http://www.jqmgallery.com/
  6. 6. Not  cool  :(
  7. 7. Cool  :)
  8. 8. コンセプトに合わせたデザインを• 中途半端に  jQuery  Mobile  を利利⽤用する と…?• jQuery  Mobile  のデザインに引きずられ てコンセプトが崩れる• jQuery  Mobile  のデザインを塗り替える
  9. 9. デザイン例例Jeep slideshare Disney
  10. 10. jQuery  Mobile  バレしない サイトを作ろう!
  11. 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. 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. 13. jQuery  Mobileだとバレないようにデフォルトのデザインを上書きし ていきましょう
  14. 14. 2.  jQuery  Mobile  のカスタマイズ デザイン編
  15. 15. デザインのカスタマイズ1. ThemeRollerで⼤大まかなデザインをカ スタマイズする2. 細かなデザインをスタイルを上書きし てカスタマイズする
  16. 16. ThemeRollerで⼤大まかなデザイン • フォント • ページの背景⾊色 • 各UIのカラー • ⾓角丸http://jquery.mobile.com/themeroller/
  17. 17. スタイルで細かなデザイン• 個別に適⽤用する⼀一部のUIへのスタイル指定(従来 の⽅方法)• 全体に影響するテンプレートとしてのスタイル指定.ui-header .ui-title { /* customize */}
  18. 18. jQuery  Mobile  のスタイル構造を知る • jQuery  Mobileが⾃自動的に⽣生成した要素に 付与されるクラスをカスタマイズする • デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
  19. 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. 20. jQuery  Mobile  のスタイル構造を知る• デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
  21. 21. ページ
  22. 22. ページ ヘッダー .ui-‐‑‒header .ui-‐‑‒page コンテンツ .ui-‐‑‒content.ui-‐‑‒dialog フッター .ui-‐‑‒footer
  23. 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. 24. ボタン
  25. 25. ボタン .ui-‐‑‒btn .ui-‐‑‒btn-‐‑‒inner.ui-‐‑‒icon ボタン .ui-‐‑‒btn-‐‑‒text
  26. 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. 27. リスト
  28. 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. 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. 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. 31. Tips5  アイコンを変えるicons-18-white.pngicons-36-white.png
  32. 32. 共通のスタイルの適⽤用には気を付ける 例例).ui-‐‑‒header  .ui-‐‑‒title
  33. 33. 3.  jQuery  Mobile  のカスタマイズ ー  応⽤用編  ー
  34. 34. より⾼高度度なカスタマイズ• オリジナルなUIを作る• ライブラリやツールを利利⽤用する
  35. 35. 例例えば、よくあるスライドショーのようなもの(サンプルでは、flexsliderを利用)
  36. 36. より⾼高度度なカスタマイズ• jQuery  Mobile  の装飾や動作から除外する領領域 を作る ✓data-‐‑‒ajax  …  Ajaxを無効にする ✓data-‐‑‒enhance  …  装飾を無効にする• jQuery  Mobile  のイベントを知る ✓pageinit  …  ページの初期化 ✓pageshow  …  ページの表⽰示
  37. 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. 38. jQuery  Mobileのイベントを知る• jQuery  Mobile  のページ遷移を理理解する• ページ関連のイベント ✓pageinit  …  ページの初期化 ✓pageshow  …  ページの表⽰示
  39. 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. 40. 2つの覚えておくべきイベント• pageinit  …  ページの初期時に発⽣生• pageshow  …  ページの表⽰示時に発⽣生
  41. 41. pageinit• jQuery  Mobile  が最初に初期化する際に発⽣生す るイベント• 同じページを再度度表⽰示する場合は、発⽣生しない• loadイベントの代わりに利利⽤用する$(document).on(pageinit, #page-id, function(){ /* 動的なDOMの構築など */});
  42. 42. pageshow• ページを表⽰示するたびに発⽣生するイベント• Google  Analytics  などのページビューをカウン トするようなツールに利利⽤用する• 座標計算やサイズ計算などを⾏行行うライブラリの 初期化に利利⽤用する$(document).on(pageshow, #page-id, function(){ /* ページが表示される際に行う初期化など */});
  43. 43. ライブラリを利利⽤用する際の注意点• 座標計算やサイズ計算などがあるライブラリだと pageinitでは正常に動作しない(イベント発⽣生時点で 要素がまだ⾮非表⽰示のため)• pageshowで1回だけ初期化を⾏行行う$(document).on(pageinit, #page-id, function(){ $(this).one(pageshow, function(){ /* ライブラリの初期化 */ });});
  44. 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. 45. 4.  まとめ
  46. 46. まとめ• jQuery  Mobile  バレしないサイトを⽬目指そう! ✓⼤大まかなデザインはThemeRollerで、細かなデザ インはスタイルを上書きしていく ✓jQuery  Mobileの構造や挙動を知ることによってカ スタマイズがやりやすくなる ✓サードパーティ製のライブラリやツールをうまく 利利⽤用しよう ✓デバッグツールは必須
  47. 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. 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. 49. ⽇日本  jQuery  Mobile  ユーザー会• https://groups.google.com/group/jqm-‐‑‒jp/• jQuery  Mobileに関するノウハウの共有・情報 交換 是⾮非、ご参加ください!
  50. 50. Thank  you!! (  @yoshikawa_̲t  )
  51. 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  ) ※サンプルのダウンロードができます
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×