Enviar búsqueda
Cargar
jQuery Mobileカスタマイズ自由自在 v1.2
•
25 recomendaciones
•
4,541 vistas
yoshikawa_t
Seguir
第32回HTML5とか勉強会でのセッション資料です。HTML5 Conference 2012の再演となります。v1.2ということで細部に若干のアップデートをしています。
Leer menos
Leer más
Denunciar
Compartir
Denunciar
Compartir
1 de 51
Descargar ahora
Descargar para leer sin conexión
Recomendados
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
yoshikawa_t
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Recomendados
jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobileバレしないモバイルサイトの作り方
yoshikawa_t
jQuery Mobileカスタマイズ自由自在
jQuery Mobileカスタマイズ自由自在
yoshikawa_t
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Tizen Web UI Frameworkでデザインを組み込んでみた
Tizen Web UI Frameworkでデザインを組み込んでみた
Chihiro Tomita
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
Jqm20120210
Jqm20120210
cmtomoda
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
20120118 titanium
20120118 titanium
Hiroshi Oyamada
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
Más contenido relacionado
Similar a jQuery Mobileカスタマイズ自由自在 v1.2
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
Jqm20120210
Jqm20120210
cmtomoda
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
Yu Ito
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
20120118 titanium
20120118 titanium
Hiroshi Oyamada
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
Similar a jQuery Mobileカスタマイズ自由自在 v1.2
(20)
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Jqm20120210
Jqm20120210
はじめよう Backbone.js
はじめよう Backbone.js
徳島OSS勉強会第四回 シラサギハンズオン 0925
徳島OSS勉強会第四回 シラサギハンズオン 0925
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Head First XML Layout on Android
Head First XML Layout on Android
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
scala+liftで遊ぼう
scala+liftで遊ぼう
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
20120118 titanium
20120118 titanium
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
jQuery Mobile入門
jQuery Mobile入門
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Más de yoshikawa_t
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
yoshikawa_t
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
yoshikawa_t
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
yoshikawa_t
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
yoshikawa_t
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
jQuery Mobile is not dead!
jQuery Mobile is not dead!
yoshikawa_t
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
yoshikawa_t
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
yoshikawa_t
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
yoshikawa_t
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
yoshikawa_t
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
yoshikawa_t
Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
Chrome Apps 概要
Chrome Apps 概要
yoshikawa_t
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Html5概要 & デモ
Html5概要 & デモ
yoshikawa_t
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
yoshikawa_t
Sencha touch vs j query mobile
Sencha touch vs j query mobile
yoshikawa_t
Más de yoshikawa_t
(20)
Ionicで作るTechfeed
Ionicで作るTechfeed
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
TechFeedというテクノロジーキュレーションサービスを作った話
TechFeedというテクノロジーキュレーションサービスを作った話
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
これからのモバイルWebと最新動向
これからのモバイルWebと最新動向
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
jQuery Mobile is not dead!
jQuery Mobile is not dead!
HTML5開発最前線
HTML5開発最前線
Chrome Apps のデバイスAPI
Chrome Apps のデバイスAPI
Chrome Apps & Chromeウェブストア概要
Chrome Apps & Chromeウェブストア概要
Chrome DevTools for beginners v1.2
Chrome DevTools for beginners v1.2
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンス
モバイル時代のWebパフォーマンスTips
モバイル時代のWebパフォーマンスTips
Chrome apps for mobile 概要
Chrome apps for mobile 概要
Chrome Apps 概要
Chrome Apps 概要
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Html5概要 & デモ
Html5概要 & デモ
いまさら聞けないCSSレイアウト入門
いまさら聞けないCSSレイアウト入門
Sencha touch vs j query mobile
Sencha touch vs j query mobile
jQuery Mobileカスタマイズ自由自在 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 ) ※サンプルのダウンロードができます
Descargar ahora