jQuery Mobileカスタマイズ自由自在
Upcoming SlideShare
Loading in...5
×
 

jQuery Mobileカスタマイズ自由自在

on

  • 25,582 views

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

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

Statistics

Views

Total Views
25,582
Views on SlideShare
25,463
Embed Views
119

Actions

Likes
53
Downloads
146
Comments
3

9 Embeds 119

https://twitter.com 74
http://localhost 36
https://ja.twitter.com 2
https://www.google.co.jp 2
http://twitter.com 1
http://pinterest.com 1
http://sc.dotbranch.com 1
http://www.pinterest.com 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Mobileカスタマイズ自由自在 jQuery Mobileカスタマイズ自由自在 Presentation Transcript

  • jQuery  Mobileカスタマイズ⾃自由⾃自在 2012/9/8 HTML5  Conference  2012 Toru  Yoshikawa  (  @yoshikawa_̲t)
  • 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/
  • 「jQuery  Mobile  パーフェクトガイド」を執筆しました! http://www.amazon.co.jp/dp/484433266X
  • Agenda1. jQuery  Mobile  を使った良良いサイトとは何か?2. jQuery  Mobile  のカスタマイズ  ー  デザイン編  ー3. jQuery  Mobile  のカスタマイズ  ー  応⽤用編  ー4. まとめ
  • 1.  jQuery  Mobile  を使った 良良いサイトとは何か? http://www.jqmgallery.com/
  • Not  cool  :(
  • Cool  :)
  • コンセプトに合わせたデザインを• 中途半端に  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="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="lib/jquery-1.7.1.min.js"></script><script src="lib/foo-1.1.1.min.js"></script>
  • 2.  jQuery  Mobile  のカスタマイズ デザイン編
  • デザインのカスタマイズ1. ThemeRollerで⼤大まかなデザインをカ スタマイズする2. 細かなデザインをスタイルを上書きし てカスタマイズする
  • ThemeRollerで⼤大まかなデザイン • フォント • ページの背景⾊色 • 各UIのカラー • ⾓角丸http://jquery.mobile.com/themeroller/
  • スタイルで細かなデザイン• 個別に適⽤用する⼀一部のUIへのスタイル指定(従来 の⽅方法)• 全体に影響するテンプレートとしてのスタイル指定.ui-header .ui-title { /* customize */}
  • jQuery  Mobile  のスタイル構造を知る• デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
  • ページ
  • ページ ヘッダー .ui-‐‑‒header .ui-‐‑‒page コンテンツ .ui-‐‑‒content.ui-‐‑‒dialog フッター .ui-‐‑‒footer
  • ページ• .ui-‐‑‒header ✓ヘッダーにロゴを利利⽤用したい• .ui-‐‑‒page,  .ui-‐‑‒content ✓ページの背景⾊色を変更更したい• .ui-‐‑‒content ✓コンテンツの余⽩白を調整したい• etc...
  • ページヘッダーの背景⾊色.ui-header { background: url(images/logo.gif);}コンテンツの余⽩白.ui-content { padding: 0;}
  • ボタン
  • ボタン .ui-‐‑‒btn .ui-‐‑‒btn-‐‑‒inner.ui-‐‑‒icon ボタン .ui-‐‑‒btn-‐‑‒text
  • ボタン• .ui-‐‑‒btn ✓ボタンの背景を変えたい• .ui-‐‑‒btn-‐‑‒inner ✓ボタンの⼤大きさを変えたい• .ui-‐‑‒btn-‐‑‒text ✓ボタンのフォントを変えたい ✓余⽩白を調整したい• etc...
  • ボタンボタンの背景⾊色.ui-btn { background-image: linear-gradient(to bottom, #E2F5B80%, #fff 100%);}ボタンの⼤大きさ.ui-btn-inner { padding: 0.8em 30px;}
  • リスト
  • リスト.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
  • リスト• 構成的にはボタンとほぼ同じ• .ui-‐‑‒link-‐‑‒inherit ✓リストアイテムの⼤大きさを変えたい ✓リストアイテムの余⽩白を変えたい• .ui-‐‑‒li-‐‑‒heading,  .ui-‐‑‒li-‐‑‒desc ✓テキストのフォントを変えたい• .ui-‐‑‒li-‐‑‒thumb ✓サムネイルの⼤大きさを変えたい• etc...
  • リストサムネイルの⼤大きさ.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;}
  • 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
  • 共通のスタイルの適⽤用には気を付ける 例例).ui-‐‑‒header  .ui-‐‑‒title
  • 3.  jQuery  Mobile  のカスタマイズ ー  応⽤用編  ー
  • より⾼高度度なカスタマイズ• オリジナルなUIを作る• ライブラリやツールを利利⽤用する
  • 例例えば、よくあるスライドショーのようなもの Jeep (  http://m.jeep.com/en/mobile/  )
  • オリジナルなUIを作る• jQuery  Mobile  の装飾や動作から除外する領領域を作る ✓data-‐‑‒ajax  …  Ajaxを無効にする ✓data-‐‑‒enhance  …  装飾を無効にする ✓keepNative  …  装飾を無効にする(JS)
  • 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>
  • jQuery  Mobile  の装飾や動作から除外する領領域を作るセレクターで指定する⽅方法$(document).on(mobileinit, function(){ $.page.prototype.options.keepNative = .no-enhance;});
  • ライブラリやツールを利利⽤用する• jQuery  Mobile  のページ遷移を理理解する• jQuery  Mobile  のイベントを知る
  • ページ遷移の挙動を理理解する 次ページ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>
  • 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回だけ初期化を⾏行行う場合もキャッシュ が消えたあとに再度度表⽰示すると正常に動作しない$(document).on(pageinit, #page-id, function(){ $(this).one(pageshow, function(){ /* 一度しか必要のないライブラリの初期化 */ });});
  • 例例)スライドショーを作成するケース$(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>
  • 4.  まとめ
  • まとめ• jQuery  Mobile  バレしないサイトを⽬目指そう ✓⼤大まかなデザインはThemeRollerで、細かなデ ザインはスタイルを上書きしていく ✓サードパーティ製のライブラリやツールをうま く利利⽤用しよう ✓jQuery  Mobileの構造や挙動を知ることによっ てカスタマイズがやりやすくなる ✓デバッグツールは必須
  • その他• セキュリティフィックスなどの情報へのウォッチを ✓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  は問 題なし
  • ⽇日本  jQuery  Mobile  ユーザー会を発⾜足! https://groups.google.com/group/jqm-‐‑‒jp/ • 共同管理理⼈人に「jQuery  Mobile  スマ ートフォンアプリ開発」の著者であ る岡本  隆史さん • jQuery  Mobileに関するノウハウの 共有・情報交換 是⾮非、ご参加ください!
  • Thank  you!! (  @yoshikawa_̲t  )
  • 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/  )