狠狠撸

jQuery ?Mobile

カスタマイズ?自由?自在 ?
v1.2

2012/10/23
HTML5 ?Conference ?2012／第32回HTML5とか勉強会
Toru ?Yoshikawa ?( ?@yoshikawa_?t)

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/

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

Agenda
1. jQuery ?Mobile ?を使った良良いサイトとは何か？

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

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

4. まとめ

1. ?jQuery ?Mobile ?を使った
良良いサイトとは何か？

http://www.jqmgallery.com/

コンセプトに合わせたデザインを

? 中途半端に ?jQuery ?Mobile ?を利利?用する
と…？

? jQuery ?Mobile ?のデザインに引きずられ
てコンセプトが崩れる

? jQuery ?Mobile ?のデザインを塗り替える

デザイン例例

Jeep slideshare Disney

jQuery ?Mobile ?バレしない
サイトを作ろう！

jQuery ?Mobile ?バレしないためには？

jQuery ?Mobileの読み込み
<link rel="stylesheet" href="lib/
jquery.mobile-1.1.1.min.css" />
<script src=/slideshow/jquery-mobile-14844564/14844564/"lib/jquery-1.7.1.min.js"></script>
<script src="lib/jquery.mobile-1.1.1.min.js"></script>

jQuery ?Mobile ?バレしないためには？

jQuery ?Mobileの読み込み
<link rel="stylesheet" href="lib/
hoge-1.1.1.min.css" />
<script src=/slideshow/jquery-mobile-14844564/14844564/"lib/jquery-1.7.1.min.js"></script>
<script src="lib/foo-1.1.1.min.js"></script>

jQuery ?Mobileだとバレないように
デフォルトのデザインを上書きし
ていきましょう

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

デザインのカスタマイズ

1. 罢丑别尘别搁辞濒濒别谤で?大まかなデザインをカ
スタマイズする

2. 細かなデザインをスタイルを上書きし
てカスタマイズする

罢丑别尘别搁辞濒濒别谤で?大まかなデザイン

? フォント
? ページの背景?色
? 各UIのカラー
? ?角丸
http://jquery.mobile.com/themeroller/

スタイルで細かなデザイン
? 個別に適?用する?一部のUIへのスタイル指定（従来
の?方法）

? 全体に影響するテンプレートとしてのスタイル指定
.ui-header .ui-title {
/* customize */
}

jQuery ?Mobile ?のスタイル構造を知る
? jQuery ?Mobileが?自動的に?生成した要素に
付与されるクラスをカスタマイズする

? デザインの主要な部分を占めるもの
? ページ
? ボタン
? リスト

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

jQuery ?Mobile ?のスタイル構造を知る

? デザインの主要な部分を占めるもの
? ページ
? ボタン
? リスト

ページ
ヘッダー
.ui-‐??header

.ui-‐??page
コンテンツ .ui-‐??content
.ui-‐??dialog

フッター
.ui-‐??footer

Tips ?1 ?ヘッダーとページの背景?色を変更更する
.ui-header { /* ヘッダー背景 */
background: linear-gradient(top,
#fff 0%, #fdfcfc 50%, #f5efef 50%,
#ebe1e1 100%);
border: 1px solid #bbb;
}

.ui-content { /* コンテンツ背景 */
background: url(/slideshow/jquery-mobile-14844564/14844564/images/bg.gif);
}

.ui-content { /* 余白 */
padding: 0;
}

ボタン
.ui-‐??btn

.ui-‐??btn-‐??inner
.ui-‐??icon
ボタン

.ui-‐??btn-‐??text

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;
}

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

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;
}

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;
}

Tips5 ?アイコンを変える

icons-18-white.png

icons-36-white.png

共通のスタイルの适?用には気を付ける
例例）.ui-‐??header ?.ui-‐??title

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

より?高度度なカスタマイズ

? オリジナルなUIを作る
? ライブラリやツールを利利?用する

例例えば、よくあるスライドショーのようなもの

（サンプルでは、flexsliderを利用）

より?高度度なカスタマイズ
? jQuery ?Mobile ?の装飾や動作から除外する領領域
を作る

?data-‐??ajax ?… ?Ajaxを無効にする
?data-‐??enhance ?… ?装飾を無効にする
? jQuery ?Mobile ?のイベントを知る
?pageinit ?… ?ページの初期化
?pageshow ?… ?ページの表?示

jQuery ?Mobile ?の装飾や動作から除外する領領域を作る

JSで設定を有効化
$(document).on('mobileinit', function(){
$.mobile.ignoreContentEnabled = true;
});

data-‐??ajaxとdata-‐??enhanceの設定
<div data-ajax="false" data-enhance="false">

</div>

jQuery ?Mobileのイベントを知る
? jQuery ?Mobile ?のページ遷移を理理解する
? ページ関連のイベント
?pageinit ?… ?ページの初期化
?pageshow ?… ?ページの表?示

ページ迁移の挙动を理理解する
次ページ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> ?
 </html>

<div data-role="page" id="next1">...</div>

次ページ2

<html>
<div data-role="page" id="next2">...</div> ? <head>...</head>
? <body> Ajax
? ? <div data-role="page"
? </body> ? id="next2">...</div>
</html> ? </body> ?
</html>

2つの覚えておくべきイベント

? pageinit ?… ?ページの初期時に発?生
? pageshow ?… ?ページの表?示時に発?生

pageinit
? jQuery ?Mobile ?が最初に初期化する際に発?生す
るイベント

? 同じページを再度度表?示する場合は、発?生しない
? loadイベントの代わりに利利?用する
$(document).on('pageinit', '#page-id', function(){
/* 動的なDOMの構築など */
});

pageshow
? ページを表?示するたびに発?生するイベント
? Google ?Analytics ?などのページビューをカウン
トするようなツールに利利?用する

? 座標計算やサイズ計算などを?行行うライブラリの
初期化に利利?用する
$(document).on('pageshow', '#page-id', function(){
/* ページが表示される際に行う初期化など */
});

ライブラリを利利?用する際の注意点

? 座標計算やサイズ計算などがあるライブラリだと
pageinitでは正常に動作しない（イベント発?生時点で
要素がまだ?非表?示のため）

? pageshowで1回だけ初期化を?行行う
$(this).one('pageshow', function(){
/* ライブラリの初期化 */
});
});

例例）スライドショーを作成するケース（完成形）
$(document).on('mobileinit', function(){
$.mobile.ignoreContentEnabled = true;
});
$(this).one('pageshow', function(){
/* ライブラリの利用 */
$(this).find('.flexslider').flexslider();
});
});

<div data-ajax="false" data-enhance="false">

<div class="flexslider">
<ul class="slides" >...</ul>
</div>
</div>

まとめ
? jQuery ?Mobile ?バレしないサイトを?目指そう！
??大まかなデザインはThemeRollerで、細かなデザ
インはスタイルを上書きしていく

?jQuery ?Mobileの構造や挙動を知ることによってカ
スタマイズがやりやすくなる

?サードパーティ製のライブラリやツールをうまく
利利?用しよう

?デバッグツールは必須

今後のロードマップ
? 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?月）

? コードの最適化?パフォーマンスチューニング

その他
? セキュリティフィックスなどの情報へのウォッチを

?jQuery ?Mobile ?alpha版には脆弱性
?jQuery ?Mobile ?1.1.1には、location.hrefに起因するバグの
問題がある ?( ?修正版 ?https://github.com/pikotea/jquery-‐??
mobile-‐??1.1.1-‐??issue-‐??4787-‐???xed ?)

?現状の最新版である ?jQuery ?Mobile ?1.2 ?は問題なし

?日本 ?jQuery ?Mobile ?ユーザー会
? https://groups.google.com/group/jqm-‐??jp/
? jQuery ?Mobileに関するノウハウの共有?情報
交換

是?非、ご参加ください！

Thank ?you!!
( ?@yoshikawa_?t ?)

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 ?)

※サンプルのダウンロードができます

狠狠撸

jQuery Mobileカスタマイズ自由自在 v1.2

Recommended

More Related Content

Similar to jQuery Mobileカスタマイズ自由自在 v1.2 (20)

More from yoshikawa_t (20)

jQuery Mobileカスタマイズ自由自在 v1.2