• Like
jQuery Mobileカスタマイズ自由自在
Upcoming SlideShare
Loading in...5
×

jQuery Mobileカスタマイズ自由自在

  • 24,719 views
Uploaded on

9/8に行われたHTML5 Conference 2012での「jQuery Mobileカスタマイズ自由自在」のセッション資料です。

9/8に行われたHTML5 Conference 2012での「jQuery Mobileカスタマイズ自由自在」のセッション資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
24,719
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
148
Comments
3
Likes
53

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Agenda1. 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, #E2F5B80%, #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  のカスタマイズ ー  応⽤用編  ー
  • 33. より⾼高度度なカスタマイズ• オリジナルなUIを作る• ライブラリやツールを利利⽤用する
  • 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/  )