More Related Content
Similar to jQuery Mobileカスタマイズ自由自在 v1.2 (20)
More from yoshikawa_t (20)
jQuery Mobileカスタマイズ自由自在 v1.2
- 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. まとめ
- 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. 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
- 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;
}
- 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;
}
- 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;
}
- 36. より⾼高度度なカスタマイズ
• jQuery Mobile の装飾や動作から除外する領領域
を作る
✓data-‐‑‒ajax … Ajaxを無効にする
✓data-‐‑‒enhance … 装飾を無効にする
• 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>
- 41. pageinit
• jQuery Mobile が最初に初期化する際に発⽣生す
るイベント
• 同じページを再度度表⽰示する場合は、発⽣生しない
• loadイベントの代わりに利利⽤用する
$(document).on('pageinit', '#page-id', function(){
/* 動的なDOMの構築など */
});
- 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>
- 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に関するノウハウの共有・情報
交換
是⾮非、ご参加ください!
- 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 )
※サンプルのダウンロードができます