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

1. jQuery Mobile
カスタマイズ⾃自由⾃自在
v1.2
2012/10/23
HTML5 Conference 2012／第32回HTML5とか勉強会
Toru Yoshikawa ( @yoshikawa_̲t)

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. 「jQuery Mobile パーフェクトガイド」 「HTML5ガイドブック 増補改訂版」（共著）
http://www.amazon.co.jp/dp/ http://www.amazon.co.jp/dp/
484433266X 4844332937

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. jQuery Mobileだとバレないように
デフォルトのデザインを上書きし
ていきましょう

14. 2. jQuery Mobile のカスタマイズ
デザイン編

15. デザインのカスタマイズ
1. ThemeRollerで⼤大まかなデザインをカ
スタマイズする
2. 細かなデザインをスタイルを上書きし
てカスタマイズする

16. ThemeRollerで⼤大まかなデザイン
• フォント
• ページの背景⾊色
• 各UIのカラー
• ⾓角丸
http://jquery.mobile.com/themeroller/

17. スタイルで細かなデザイン
• 個別に適⽤用する⼀一部のUIへのスタイル指定（従来
の⽅方法）
• 全体に影響するテンプレートとしてのスタイル指定
.ui-header .ui-title {
/* customize */
}

18. jQuery Mobile のスタイル構造を知る
• jQuery Mobileが⾃自動的に⽣生成した要素に
付与されるクラスをカスタマイズする
• デザインの主要な部分を占めるもの
✓ ページ
✓ ボタン
✓ リスト

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. jQuery Mobile のスタイル構造を知る
• デザインの主要な部分を占めるもの
✓ ページ
✓ ボタン
✓ リスト

21. ページ

22. ページ
ヘッダー
.ui-‐‑‒header
.ui-‐‑‒page
コンテンツ .ui-‐‑‒content
.ui-‐‑‒dialog
フッター
.ui-‐‑‒footer

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. ボタン

25. ボタン
.ui-‐‑‒btn
.ui-‐‑‒btn-‐‑‒inner
.ui-‐‑‒icon
ボタン
.ui-‐‑‒btn-‐‑‒text

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. リスト

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. 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. 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. Tips5 アイコンを変える
icons-18-white.png
icons-36-white.png

32. 共通のスタイルの適⽤用には気を付ける
例例）.ui-‐‑‒header .ui-‐‑‒title

33. 3. jQuery Mobile のカスタマイズ
ー 応⽤用編 ー

34. より⾼高度度なカスタマイズ
• オリジナルなUIを作る
• ライブラリやツールを利利⽤用する

35. 例例えば、よくあるスライドショーのようなもの
（サンプルでは、flexsliderを利用）

36. より⾼高度度なカスタマイズ
• jQuery Mobile の装飾や動作から除外する領領域
を作る
✓data-‐‑‒ajax … Ajaxを無効にする
✓data-‐‑‒enhance … 装飾を無効にする
• jQuery Mobile のイベントを知る
✓pageinit … ページの初期化
✓pageshow … ページの表⽰示

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. jQuery Mobileのイベントを知る
• jQuery Mobile のページ遷移を理理解する
• ページ関連のイベント
✓pageinit … ページの初期化
✓pageshow … ページの表⽰示

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(){
/* ライブラリの利用 */
$(this).find('.flexslider').flexslider();
});
});
<div data-ajax="false" data-enhance="false">
<!-- スライドショーのマークアップ -->
<div class="flexslider">
<ul class="slides" >...</ul>
</div>
</div>

45. 4. まとめ

46. まとめ
• jQuery Mobile バレしないサイトを⽬目指そう！
✓⼤大まかなデザインはThemeRollerで、細かなデザ
インはスタイルを上書きしていく
✓jQuery Mobileの構造や挙動を知ることによってカ
スタマイズがやりやすくなる
✓サードパーティ製のライブラリやツールをうまく
利利⽤用しよう
✓デバッグツールは必須

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. その他
• セキュリティフィックスなどの情報へのウォッチを
✓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. ⽇日本 jQuery Mobile ユーザー会
• https://groups.google.com/group/jqm-‐‑‒jp/
• jQuery Mobileに関するノウハウの共有・情報
交換
是⾮非、ご参加ください！

50. Thank you!!
( @yoshikawa_̲t )

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 )
※サンプルのダウンロードができます