Submit Search
Upload
jQuery Mobileバレしないモバイルサイトの作り方
•
58 likes
•
19,069 views
yoshikawa_t
Follow
ICT+ABC東北2012のセッション資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 40
Download now
Download to read offline
Recommended
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
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
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
Recommended
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
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
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
20120118 titanium
20120118 titanium
Hiroshi Oyamada
JqueryMobile
JqueryMobile
Hazuki Wakabayashi
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
IBDesignable / IBInspectable で UIプロトタイピンガブル
IBDesignable / IBInspectable で UIプロトタイピンガブル
Masaki Oshikawa
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
Akihiko Horiuchi
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
Ionicで作るTechfeed
Ionicで作るTechfeed
yoshikawa_t
困った時のDev toolsの使い方(初心者向け)
困った時のDev toolsの使い方(初心者向け)
yoshikawa_t
More Related Content
Similar to jQuery Mobileバレしないモバイルサイトの作り方
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
Head First XML Layout on Android
Head First XML Layout on Android
Yuki Anzai
20120118 titanium
20120118 titanium
Hiroshi Oyamada
JqueryMobile
JqueryMobile
Hazuki Wakabayashi
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
「その他」のUI Framework 3選
「その他」のUI Framework 3選
Shumpei Shiraishi
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
アシアル株式会社
IBDesignable / IBInspectable で UIプロトタイピンガブル
IBDesignable / IBInspectable で UIプロトタイピンガブル
Masaki Oshikawa
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
ninomy
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Nakazawa Yuichi
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
Akihiko Horiuchi
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
Similar to jQuery Mobileバレしないモバイルサイトの作り方
(20)
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Css nite(2010.09.23)
Css nite(2010.09.23)
jQuery Mobile入門
jQuery Mobile入門
Head First XML Layout on Android
Head First XML Layout on Android
20120118 titanium
20120118 titanium
JqueryMobile
JqueryMobile
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
「その他」のUI Framework 3選
「その他」のUI Framework 3選
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
Monaca公式ガイドブック発売記念全国キャラバン
IBDesignable / IBInspectable で UIプロトタイピンガブル
IBDesignable / IBInspectable で UIプロトタイピンガブル
MediaWiki Tips for saveMLAK - wikibana
MediaWiki Tips for saveMLAK - wikibana
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Djangoによるスマホアプリバックエンドの実装
Djangoによるスマホアプリバックエンドの実装
Ginとbindataで作るシングルバイナリWebApp
Ginとbindataで作るシングルバイナリWebApp
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
HTML5最新動向
HTML5最新動向
More from 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
More from 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
Recently uploaded
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Recently uploaded
(9)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
jQuery Mobileバレしないモバイルサイトの作り方
1.
jQuery Mobileバレしない モバイルサイトの作り方
2012/10/20 ICT ERA + ABC 2012 東北 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.
jQuery Mobile バレしない
サイトを作ろう!
10.
2. jQuery Mobile
のデザイン をカスタマイズする
11.
デザインのカスタマイズ 1. ThemeRollerで大まかなデザインをカスタ
マイズする 2. 細かなデザインをスタイルを上書きしてカス タマイズする
12.
ThemeRollerで大まかなデザイン
フォント ページの背景色 各UIのカラー 角丸 http://jquery.mobile.com/themeroller/
13.
スタイルで細かなデザイン 個別に適用する一部のUIへのスタイル指定(従来
の方法) 全体に影響するテンプレートとしてのスタイル指定 .ui-header .ui-title { /* customize */ }
14.
jQuery Mobile のスタイル構造を知る
jQuery Mobileが自動的に生成した要素に付与 されるクラスをカスタマイズする デザインの主要な部分を占めるもの ✓ ページ ✓ ボタン ✓ リスト
15.
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
16.
ページ
17.
ページの構造
ヘッダー .ui-‐‑‒header .ui-‐‑‒page コンテンツ .ui-‐‑‒content .ui-‐‑‒dialog フッター .ui-‐‑‒footer
18.
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); }
19.
ボタン
20.
ボタンの構造
.ui-‐‑‒btn .ui-‐‑‒btn-‐‑‒inner .ui-‐‑‒icon ボタン .ui-‐‑‒btn-‐‑‒text
21.
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; }
22.
リスト
23.
リストの構造 .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
24.
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; }
25.
Tips4 アイコンを変える icons-18-white.png icons-36-white.png
26.
Tips 5 ページ遷移アニメーションを利利⽤用しない $(document).on('mobileinit', function(){
$.mobile.defaultPageTransition = 'none'; }); ページ遷移アニメーションは、Android 2.x は強制的にfadeにフォールバックされる 端末によってはチラついたりすることがある ので、いっそのこと利用しないのも手
27.
3. jQuery Mobile
以外の ライブラリを利用する
28.
例例えば、よくあるスライドショーのようなもの (サンプルでは、flexsliderを利用)
29.
より高度なカスタマイズ jQuery Mobile の装飾や動作から除外する領域を作る ✓
data-ajax … Ajaxを無効にする ✓ data-enhance … 装飾を無効にする jQuery Mobile のイベントを知る ✓ pageinit … ページの初期化 ✓ pageshow … ページの表示
30.
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>
31.
イベント: pageinit • jQuery
Mobile が最初に初期化する際に発⽣生す るイベント • 同じページを再度度表⽰示する場合は、発⽣生しない • loadイベントの代わりに利利⽤用するイメージ $(document).on('pageinit', '#page-id', function(){ /* 動的なDOMの構築など */ });
32.
イベント: pageshow • ページを表⽰示するたびに発⽣生するイベント •
Google Analytics などのページビューをカウン トするようなツールに利利⽤用する • 座標計算やサイズ計算などを⾏行行うライブラリの 初期化に利利⽤用する $(document).on('pageshow', '#page-id', function(){ /* ページが表示される際に行う初期化など */ });
33.
ライブラリを利用する際の注意点 • 座標計算やサイズ計算などがあるライブラリだと pageinitでは正常に動作しない •
pageshowで1回だけ初期化を⾏行行うように次のように 記述する $(document).on('pageinit', '#page-id', function(){ $(this).one('pageshow', function(){ /* 一度しか必要のないライブラリの初期化 */ }); });
34.
例)スライドショーを作成するケース(完成形) $(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>...</ul> </div> </div>
35.
4. まとめ
36.
まとめ jQuery Mobile バレしないサイトを目指そう ✓
大まかなデザインはThemeRollerで、細かなデザインはス タイルを上書きしていく ✓ jQuery Mobileの構造や挙動を知ることによってカスタマ イズがやりやすくなる ✓ サードパーティ製のライブラリやツールをうまく利用しよう ✓ デバッグツールは必須
37.
今後のロードマップ 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月) ✓ コードの最適化・パフォーマンスチューニング
38.
日本 jQuery Mobile
ユーザー会 https://groups.google.com/group/jqm-jp/ jQuery Mobileに関するノウハウの共有・情報交換 是⾮非、ご参加ください!
39.
Thank you!! (
@yoshikawa_t )
40.
Resources jQuery Mobile 公式サイト
( http://jquerymobile.com/ ) jQuery Mobile ギャラリー ( http://www.jqmgallery.com/ ) jQuery Mobileパーフェクトガイド ( http:// www.impressjapan.jp/books/3266 ) ※サンプルのダウンロード ができます 日本 jQuery Mobile ユーザー会 ( https:// groups.google.com/group/jqm-jp/ )
Download now