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

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

on

  • 6,233 views

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

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

Statistics

Views

Total Views
6,233
Views on SlideShare
6,043
Embed Views
190

Actions

Likes
27
Downloads
69
Comments
0

4 Embeds 190

https://twitter.com 106
http://slide.yoshiday.net 82
http://tweetedtimes.com 1
http://dev.nursejinzaibank.com 1

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カスタマイズ自由自在 v1.2 jQuery Mobileカスタマイズ自由自在 v1.2 Presentation Transcript

    • jQuery  Mobile カスタマイズ⾃自由⾃自在   v1.2 2012/10/23HTML5  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
    • 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>
    • jQuery  Mobileだとバレないようにデフォルトのデザインを上書きし ていきましょう
    • 2.  jQuery  Mobile  のカスタマイズ デザイン編
    • デザインのカスタマイズ1. ThemeRollerで⼤大まかなデザインをカ スタマイズする2. 細かなデザインをスタイルを上書きし てカスタマイズする
    • ThemeRollerで⼤大まかなデザイン • フォント • ページの背景⾊色 • 各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(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.pngicons-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"> <!-- jQuery Mobile free --></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>   <!-- 次ページ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(){ /* ライブラリの利用 */ $(this).find(.flexslider).flexslider(); });});<div data-ajax="false" data-enhance="false"> <!-- スライドショーのマークアップ --> <div class="flexslider"> <ul class="slides" >...</ul> </div></div>
    • 4.  まとめ
    • まとめ• 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-‐‑‒fixed  ) ✓現状の最新版である  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  ) ※サンプルのダウンロードができます