Your SlideShare is downloading. ×
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

25,500

Published on

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

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

Published in: Technology
3 Comments
55 Likes
Statistics
Notes
No Downloads
Views
Total Views
25,500
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
155
Comments
3
Likes
55
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/  )

×