Tablet View of COOKPAD Website

Πϯλʔϯγοϓ੒Ռใࠂ 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

ࠓճ͸྆ํ༻͍Δ

λονσόΠε࠷దԽ σόΠεαΠζ࠷దԽ

੾Γସ͑ͷྲྀΕ ɾαʔόαΠυͰରԠϖʔδʹͷΈ ɹ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 Ұݟྑͦ͞͏ʹݟ͑Δ͕ʜ

໰୊఺ ɾࡐྉ௕͍ͱԼͷํݟ͑ͳ͍ ɾ࣮͸஗Εͯ௥ै͢ΔͷͰअຐ ɹ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

Tablet View of COOKPAD Website

Tablet View of COOKPAD Website

More Decks by Keisuke Tada

Featured

Transcript