Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Tablet View of COOKPAD Website
Search
Keisuke Tada
November 29, 2012
0
220
Tablet View of COOKPAD Website
Keisuke Tada
November 29, 2012
Tweet
Share
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
320
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
12k
Non-Designer's Design
tdksk
3
520
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
What the flash - Photography Introduction
edds
67
11k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
What's in a price? How to price your products and services
michaelherold
242
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
A better future with KSS
kneath
235
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
Automating Front-end Workflow
addyosmani
1365
200k
The Language of Interfaces
destraynor
153
23k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Transcript
ΠϯλʔϯγοϓՌใࠂ JO$00,1"% ,FJTVLF5"%" ଟాܓ༎
0VUMJOF ɾ#BDLHSPVOE ɾ4PMVUJPO
#BDLHSPVOE
λϒϨοτͷීٴ 1$ͱͷڥքͷᐆດԽ
λϒϨοτ๚ ݄ؒ
1$WTλϒϨοτ ๚ 4FDSFU
Ͱ 1$༻ϖʔδͷ··ͰݟΒΕΔ
Ͱ 1$༻ϖʔδͷ··ͰݟΒΕΔ 1$ͱλϒϨοτผ
λϒϨοτݻ༗ͷಛੑ ɾΟϯυαΠζ ɾλονૢ࡞ ɾωοτϫʔΫڥ
λϒϨοτݻ༗ͷಛੑ ɾΟϯυαΠζ ɾλονૢ࡞ ɾωοτϫʔΫڥ ͪΖΜେࣄ͚ͩͲ ຊ࣭త͡Όͳ͍
λϒϨοτʹΑΔϢʔβମݧ ɾར༻γʔϯ ɾར༻త ɾϢʔβ͕ظ͍ͯ͠Δ͜ͱ
λϒϨοτʹΑΔϢʔβମݧ ɾར༻γʔϯ ɾར༻త ɾϢʔβ͕ظ͍ͯ͠Δ͜ͱ
ํ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ
ํ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ ͖ͬ͞1$ͱλϒϨοτผͬͯ ݴͬͨͷʹʜʁ
ɾར༻γʔϯ ɾར༻త ɾϢʔβ͕ظ͍ͯ͠Δ͜ͱ λϒϨοτʹΑΔϢʔβମݧ ɾϢʔβ͕ظ͍ͯ͠Δ͜ͱ
λϒϨοτϢʔβͷظ λϒϨοτ͔Β 1$൛ϖʔδ͕ݟΒΕΔͣ
λϒϨοτϢʔβͷظ λϒϨοτ͔Β 1$൛ϖʔδ͕ݟΒΕΔͣ 1$൛ͱಉ͡ใྔΛظ
ํ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ
ํ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ ՃͰ$44ͱ+4Λద༻ )5.-ͦͷ··Ͱ
બࢶ ɾ$44ͷΓସ͑ ɹσόΠεͷछྨ 6" ɹΟϯυͷ෯ .FEJB2VFSJFT
બࢶ ɾ$44ͷΓସ͑ ɹσόΠεͷछྨ 6" ɹΟϯυͷ෯ .FEJB2VFSJFT
ࠓճ྆ํ༻͍Δ
બࢶ ɾ$44ͷΓସ͑ ɹσόΠεͷछྨ 6" ɹΟϯυͷ෯ .FEJB2VFSJFT
λονσόΠε࠷దԽ σόΠεαΠζ࠷దԽ
Γସ͑ͷྲྀΕ ɾαʔόαΠυͰରԠϖʔδʹͷΈ ɹCPEZλάʹDMBTT໊͚ͭΔ ɾ+4Ͱ6"্Ͱ͚ͭͨDMBTT໊͔Β ɹCPEZλάʹDMBTT໊͚ͭΔ ɹλϒϨοτ༻ͷ+4Λ࣮ߦ͢Δ
ɾ্Ͱ͚ͭͨDMBTT໊ͷ࣌ͷΈελΠϧΛ ɹద༻͢ΔΑ͏ͳ$44ΛಡΈࠐΜͰ͓͘
Γସ͑ͷྲྀΕ ɾ$44Ͱ.FEJB2VFSJFTΛ༻͍ͯ ɹͷαΠζ ݱࡏͷ͖ͷ෯ ʹΑͬͯ ɹద༻͢ΔελΠϧΛม͑Δ $break_point =
800px; // スタイルを切り替える幅 @media screen and (max-width: $break_point) { ... // 端末幅が $break_point 以下の場合 } @media screen and (min-width: $break_point+1) { ... // 端末幅が $break_point 以上の場合 }
4PMVUJPO
ʮ୳͢ʯ ʮ࡞Δʯ
ʮ୳͢ʯPOιϑΝ
ʮ୳͢ʯPOιϑΝ ωοταʔϑΟϯ ࢮޠ
ਓؾͷΩʔϫʔυΛଟ͘දࣔ จࣈೖྗͷͮ͠Β͞Λճආ
ݕࡧ݁ՌΛબ͘͢͠ ϒϩοΫશମΛλοϓՄೳʹ )5.-ม͑ͣʹ$44ͱ+4ͷΈͰ
.:ϑΥϧμʹՃ͘͢͠
.:ϑΥϧμʹՃ͘͢͠ #FGPSF "GUFS
.:ϑΥϧμʹՃ͘͢͠
#FGPSF "GUFS .:ϑΥϧμʹՃ͘͢͠
ʮ୳͢ʯGPSྉཧ
ʮ୳͢ʯGPSྉཧ ͍͍ͨࡐྉ͕͋Δ
ݕࡧόʔΛ͘
ϑΝʔετϏϡʔͰࡐྉ͔Δ
ϑΝʔετϏϡʔͰࡐྉ͔Δ
ʮ࡞ΔʯJOΩονϯ
ʮ࡞ΔʯJOΩονϯ ࡐྉͱ࡞Γํಉ࣌ʹݟ͍ͨ ྉཧதεΫϩʔϧͮ͠Β͍
ࡐྉͱ࡞ΓํΛಉ࣌ʹݟΒΕΔ 5BQ
ࡐྉͱ࡞ΓํΛಉ࣌ʹݟΒΕΔ 0QFO
༙͍ͯ͘Δٙ ɾ͜ͷϘλϯؾ͔ͮͳ͍Μ͡Όʁ ɾࡐྉͭ͋Δͷࠞཚ͠ͳ͍ʁ
WFS 4DSPMM
WFS εΫϩʔϧʹ ߹Θͤͯै
WFS
WFS Ұݟྑͦ͞͏ʹݟ͑Δ͕ʜ
ɾࡐྉ͍ͱԼͷํݟ͑ͳ͍ ɾ࣮Εͯै͢ΔͷͰअຐ ɹJ04ϒϥβͰͷٕज़తͳ੍
WFS 4DSPMM
WFS 'BEFPVU
WFS 'BEFJO
WFS 0QFO
ɾϑΣʔυΞτ͢Δͷ͕͏͍͟ ɾϑΣʔυΠϯ͢Δͷ͏͍͟
ࢥ͍ͱͲ·ͬͯ ͔Βߟ͑͢
Α͘Α͘ߟ͑ͯΈΕ ɾྉཧ͢Δ࣌ʹ͚ͩؾ͚ͮྑ͍ ɾϢʔβ͕ࠞཚ͠ͳ͚Εྑ͍
WFSʹΔ ݟͤํ͕ؾʹͳΔ ػೳͷઆ໌ͬΆ͍ʜ
WFS ɾతͬΆ͍χϡΞϯεʹมߋ ɾʮ֬ೝʯͱ͍͏ݴ༿Ͱಉ͡༰ ɹͭ͋Δ͜ͱͷҧײͷܰݮ
WFS 'JYFE ɾతͬΆ͍χϡΞϯεʹมߋ ɾʮ֬ೝʯͱ͍͏ݴ༿Ͱಉ͡༰ ɹͭ͋Δ͜ͱͷҧײͷܰݮ
ʮࡐྉΛ͜͜ʹදࣔʯϘλϯɺ J1BEϢʔβʔͱͯ͠ͱͯศརʹͬͯ·͢ɻ ख͕ೞΕͯΔ࣌εϫΠϓ͕ग़དྷͳ͔ͬͨͷͰ εΫϦʔϯͰ༰͕֬ೝग़དྷΔͷͰָʹͳΓ ·ͨ͠ɻ͋Γ͕ͱ͏͍͟͝·͢ʂ Ϣʔβ͔Βͷ͝ҙݟ
5JQTεέʔϧௐ #FGPSF
5JQTεέʔϧௐ த్ͳ༨ന
5JQTεέʔϧௐ transform: scale() σόΠεͷ෯ʹ߹Θͤͯ ίϯςϯπΛ֦େ
5JQTεέʔϧௐ # CoffeeScript scale = ... # 拡大率を計算
originX = ... # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )
# CoffeeScript scale = ... # 拡大率を計算 originX = ...
# どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ ) 5JQTεέʔϧௐ ֦େޙʹදࣔ ݩͷ$44Ͱhidden
5JQTεέʔϧௐ "GUFS
5JQTεέʔϧௐ 0,
ͦͷଞͬͨ͜ͱ ɾϑολΛλϒϨοτ༻ͷγϯϓϧͳͷʹ ɾλϒϨοτ༻ͷϑΥʔϜΛ࡞ ɾߜΓࠐΈݕࡧϝχϡʔͷϨΠΞτௐ ɾϖʔδωʔγϣϯΛλονσόΠε͚ʹ ɾ͖Λม͑ͨ࣌ʹ֦େ͕มΘΔόάͷରॲ ɾςετίʔυॻ͘ ɾจࣈαΠζɺ༨നͷௐ
ɾطଘͷϖʔδͷमਖ਼
๚ͷมԽ ϦϦʔε
ࠓޙ ΕΔͳΒ Γ͍ͨ͜ͱ ɾλϒϨοτʹ࠷దԽ͞Εͨࠂ ɾଞͷͷରԠ ɹ ΄΅͜ͷ··ͰରԠͰ͖Δͣ
5IBOL:PV