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
230
Tablet View of COOKPAD Website
Keisuke Tada
November 29, 2012
Tweet
Share
More Decks by Keisuke Tada
See All by Keisuke Tada
少人数スタートアップでどうやって素早くユーザに価値を届けるか
tdksk
0
360
Haptic Feedback による効果的なマイクロインタラクション
tdksk
4
14k
Non-Designer's Design
tdksk
3
530
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Six Lessons from altMBA
skipperchong
28
3.8k
Bash Introduction
62gerente
614
210k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Done Done
chrislema
184
16k
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