Suche senden
Hochladen
jQuery Mobileバレしないモバイルサイトの作り方
•
58 gefällt mir
•
19,061 views
yoshikawa_t
Folgen
ICT+ABC東北2012のセッション資料です。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 40
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
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
Weitere ähnliche Inhalte
Ähnlich wie 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
Ähnlich wie 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最新動向
Mehr von 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
Mehr von 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
Kürzlich hochgeladen
2024 03 CTEA
2024 03 CTEA
arts yokohama
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
Kürzlich hochgeladen
(12)
2024 03 CTEA
2024 03 CTEA
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
2024 04 minnanoito
2024 04 minnanoito
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
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/ )
Jetzt herunterladen