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

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. Agenda
1. 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, #E2F5B8
0%, #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/ )