Submit Search
Upload
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
•
86 likes
•
20,021 views
Shumpei Shiraishi
Follow
HTML5 Conrerence 2012
Read less
Read more
Report
Share
Report
Share
1 of 49
Download Now
Download to read offline
Recommended
WebIntentsにより拓かれる次のWeb
WebIntentsにより拓かれる次のWeb
Kensaku Komatsu
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-ela...
Shotaro Suzuki
無料で始めるアプリのバックエンド開発
無料で始めるアプリのバックエンド開発
Shoichi Takagi
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
building HTML hybrid app with ionic
building HTML hybrid app with ionic
Nakano Kyohei
More Related Content
What's hot
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
TomomitsuKusaba
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
PowerShellでFunction Appしよう!
PowerShellでFunction Appしよう!
Tsubasa Yoshino
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Yuki Okamoto
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
9th nov2012 kof2012
9th nov2012 kof2012
Kensaku Komatsu
App Service の DevOps と Visual Studio Team Services 最新アップデート
App Service の DevOps と Visual Studio Team Services 最新アップデート
Microsoft Azure Japan
Web API を気軽に使えるツールやサービスのご紹介
Web API を気軽に使えるツールやサービスのご紹介
CData Software Japan
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
Firebase analytics for_android _ i_os
Firebase analytics for_android _ i_os
baroqueworksdev
開発スタイルのこれから for Backbone (powerd by Yeoman)
開発スタイルのこれから for Backbone (powerd by Yeoman)
Fumio SAGAWA
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
DevTakas
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018
Ryu Shindo
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
Daizen Ikehara
Cognitive serviceのすゝめ
Cognitive serviceのすゝめ
Tsubasa Yoshino
Sl study 20150804-soft-layer-apibasic-shibata
Sl study 20150804-soft-layer-apibasic-shibata
Naoki Shibata
What's hot
(20)
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
PowerShellでFunction Appしよう!
PowerShellでFunction Appしよう!
5分で分かるmonaca pressproject(草案)
5分で分かるmonaca pressproject(草案)
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
9th nov2012 kof2012
9th nov2012 kof2012
App Service の DevOps と Visual Studio Team Services 最新アップデート
App Service の DevOps と Visual Studio Team Services 最新アップデート
Web API を気軽に使えるツールやサービスのご紹介
Web API を気軽に使えるツールやサービスのご紹介
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Firebase analytics for_android _ i_os
Firebase analytics for_android _ i_os
開発スタイルのこれから for Backbone (powerd by Yeoman)
開発スタイルのこれから for Backbone (powerd by Yeoman)
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
Azure ADアプリケーションを使用した認証のあれやこれ ASP.NET Core編
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
Cognitive serviceのすゝめ
Cognitive serviceのすゝめ
Sl study 20150804-soft-layer-apibasic-shibata
Sl study 20150804-soft-layer-apibasic-shibata
Similar to パララックスでレスポンシブでJ query mobileなサイトのつくりかた
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
ssuserd60633
About rails 3
About rails 3
issei126
Movable typeseminar 20120925
Movable typeseminar 20120925
Six Apart
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
Kunihiko Miyanaga
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
Similar to パララックスでレスポンシブでJ query mobileなサイトのつくりかた
(20)
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
About rails 3
About rails 3
Movable typeseminar 20120925
Movable typeseminar 20120925
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Mvc conf session_5_isami
Mvc conf session_5_isami
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Web制作勉強会 #2
Web制作勉強会 #2
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
More from Shumpei Shiraishi
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
漫☆画太郎論
漫☆画太郎論
Shumpei Shiraishi
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
More from Shumpei Shiraishi
(20)
俺的GEB概論(前半)
俺的GEB概論(前半)
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Angular2実践入門
Angular2実践入門
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
変身×フランツ・カフカ
変身×フランツ・カフカ
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
漫☆画太郎論
漫☆画太郎論
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
20130921レジュメ2
20130921レジュメ2
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
1.
パララックスでレスポンシブで jQuery Mobileなサイトのつくりかた
2012/9/8 株式会社シーエー・モバイル Web先端技術フェロー 白石俊平
2.
自己紹介 •
白石 俊平(しらいし しゅんぺい) • html5j.org 管理人 • HTML5とか勉強会 主催 • Web先端技術味見部 部長 • 読書するエンジニアの会 主催 • Google API Expert (HTML5) • Microsoft Most Valuable Professional (IE9) • Twitter: @Shumpei
3.
今Webは、変わろうとしている レスポンシブ
アプリケーション化
4.
www.gravitatedesign.com
5.
clearairchallenge.com
6.
TRON LEGACY
7.
Mercedes-Benz
8.
一足お先にチャレンジしました。
9.
www.camobile.com
10.
死にかけました
11.
ぼくらが直面した「課題」 1.
パララックススクロールをモバイルでも実現したい 2. レスポンシブで動きまくるサイトを作らなくてはならない 3. レスポンシブで画像満載のサイトを作らなくてはならない 4. jQuery Mobileを使うべきだろうか? 5. 定形タスクを自動化したい
12.
1. パララックススクロールを
モバイルでも実現したい
13.
様々なライブラリが利用可能、だが・・
14.
最終的なパ・・インスパイア元
Nike Air Jordan 2012
15.
ゼロから書き起こして公開しました。
ScrollTween.js
16.
つかいかた // スクロール部分を作成 var container
= ScrollTween.container(containerDiv); // アニメーションさせる部品を追加 container.add('#index_scene_intro', function(tween) { // 0-200の間は中央に、その後右に消えていく tween .range(0, 200, tween.styles().middle()) .to(600, tween.styles().rightOut()); }); … container.play();
17.
2. レスポンシブで動きまくる サイトを作らねばならない
18.
レスポンシブWebデザインの基礎 • Fluid Grid •
Fluid Image • CSS Media Queries
19.
レスポンシブWebデザインの基礎 • Fluid Grid
– 幅をパーセント指定するグリッドレイアウト • Fluid Image – 画像の幅をパーセント指定する • CSS Media Queries – デバイスの要件に応じてCSSを切り替え
20.
LESS/SASSは必須ツール • Fluid Gridの実装には、変数・計算・ミッ
クスインなどがとても便利。 // 変数 @grid-hcount: 16; // 計算 @grid-cell-width: 100% / @grid-hcount; // ミックスイン .gwidth(@count) { width: @grid-cell-width * @count; } #logo { .gwidth(2); // ミックスインの使用 }
21.
メディアクエリは控えめに • 全ブレークポイント内でスタイルの上書
きが発生するため、すぐに肥大化する – 「巨大なswitch-case」化 • 要件にもよるが、Fluid Layoutを補う形で 使用する程度が望ましいように思える。
22.
セマンティックなマークアップ メディアクエリ=CSSの切り替え 単一のマークアップ&異なるCSSという構造 「揺らがない」マークアップが必要だ!
23.
セマンティックを深く考えぬかれ たコンテンツは、変更に強い!
24.
インタラクティブなコードでは、 「UIの状態」を意識しよう。 #dialogのdisplayを
ダイアログを閉じる noneにする #messageの ノーマルメッセージを colorをgreen、 表示する displayをblockにする ぼくらが変更したいのは、 「CSSプロパティ」じゃなくて「状態」で す。
25.
「状態変化」を意識した
コーディング • CSSプロパティを直接JavaScriptで書き換 えるのをやめる • UIの状態はクラスで表すと良い jQueryでいうと、 • css()やエフェクト系メソッドの使用を控える • addClass(),removeClass()を中心に
26.
「状態変化」を意識した
コーディング Before: $('#msg').hide(); After: $('#msg').addClass('hidden'); #msg.hidden { display: none; }
27.
状態変化にエフェクトを
用いるよう変更する #msg.hidden { display: none; } 変更箇所がCSSに集中し、 #msg { 保守性が向上する opacity: 1; transition: opacity 1s ease-in; } #msg.hidden { opacity: 0; }
28.
3. レスポンシブで画像満載の サイトを作らねばならない
29.
レスポンシブイメージ • スクリーンサイズに応じて、異なるサイ
ズの画像を読み込みたい。 PC Tablet Smartphone
30.
Riloadr • レスポンシブイメージを実現するフレー
ムワーク • JSによるセットアップさえ済ませれば、 あとはマークアップのみ。 <img class="responsive" data-src="img.png"> <!-- 以下は省略可能 --> <noscript> <img src="img-small.png"> </noscript>
31.
レスポンシブイメージをめぐる仕様も <picture>
OperaのBlues Lawsonさん <source media="…" src=""> が提案 <source src=""> </picture> <img srcset="a.png 1x a-hd.png 2x"> WHATWGが支持 <picture> 折衷案。コミュニティグルー <source media="…" srcset=""> プによる仕様が存在 <source srcset=""> </picture>
32.
CSSスプライトアニメーション • 手の画像は、すべてCSSスプライトアニ
メーションで実現
33.
CSSスプライトアニメーション • スプライト画像をbackgroundに指定し、
background-positionをずらしていく – 「覗き穴」を横にずらしていくイメージ。 • Android 2.3標準ブラウザには、ひとコマ目が残り続け るというバグがあるので、ひとコマ目は透明画像を指 定。
34.
4. jQuery Mobileを 使うべきだろうか?
35.
Framework
36.
作業を枠にはめ、 生産性を向上させる Framework
Creativity
37.
死の妥協
38.
「制約」から見た
jQuery Mobile 1. 型に従ったマークアップ 2. フレームワークにHTMLを「いじられる」 3. デザインにこだわるならカスタマイズが 必須 4. カスタマイズが面倒 5. パフォーマンス上のハンデを背負う
39.
「利点」から見た
jQuery Mobile 1. 慣れればとにかく簡単 2. マルチプラットフォーム 現在の想い: 3. 全ページが一意なURLを持つ クリエイティブなページ以外 4. ではバンバン使おう。 ページ分割・読み込みが容易
40.
5. 定型タスクを自動化したい
41.
なんだか定型タスクが増えた •
JavaScriptのミニファイ • CSSのミニファイ • ファイルの結合とファイル名生成 • LESSのコンパイル • 異なるサイズの画像生成
42.
grunt.js • Nodeで動作する、タスク自動化ツール
43.
grunt.jsで定型化した作業
LESSをCSSにコンパイル JavaScript/CSSをミニファイ JavaScript/CSSを結合 ファイル名をハッシュ値から生成 結合したファイルは本番時にのみ使用 (サーバサイドで切り替え)
44.
まとめ
45.
苦しかった・・・
46.
けど
47.
なんだろう、このワクワク感
48.
新しいWeb開発を楽しもう!
@Shumpei
49.
アンケートへのご協力をお願いします! URL: http://bit.ly/html5j2012q 参加したセッションに関するアンケートに 答えて受付に行くと、素敵な景品が!
Download Now