More Related Content
Similar to jQuery Mobileカスタマイズ自由自在 (20)
More from yoshikawa_t (20)
jQuery Mobileカスタマイズ自由自在
- 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/
- 4. Agenda
1. jQuery Mobile を使った良良いサイトとは何か?
2. jQuery Mobile のカスタマイズ ー デザイン編 ー
3. jQuery Mobile のカスタマイズ ー 応⽤用編 ー
4. まとめ
- 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>
- 19. ページ
ヘッダー
.ui-‐‑‒header
.ui-‐‑‒page
コンテンツ .ui-‐‑‒content
.ui-‐‑‒dialog
フッター
.ui-‐‑‒footer
- 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;
}
- 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
- 35. オリジナルなUIを作る
• jQuery Mobile の装飾や動作から除外する領領域を作る
✓data-‐‑‒ajax … Ajaxを無効にする
✓data-‐‑‒enhance … 装飾を無効にする
✓keepNative … 装飾を無効にする(JS)
- 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>
- 41. pageinit
• jQuery Mobile が最初に初期化する際に発⽣生す
るイベント
• 同じページを再度度表⽰示する場合は、発⽣生しない
• loadイベントの代わりに利利⽤用するイメージ
$(document).on('pageinit', '#page-id', function(){
/* 動的なDOMの構築など */
});
- 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に関するノウハウの
共有・情報交換
是⾮非、ご参加ください!
- 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/ )