Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tablet View of COOKPAD Website

D10c346cbd9d9f10b37fee2fee007ee1?s=47 Keisuke Tada
November 29, 2012
130

Tablet View of COOKPAD Website

D10c346cbd9d9f10b37fee2fee007ee1?s=128

Keisuke Tada

November 29, 2012
Tweet

Transcript

  1. Πϯλʔϯγοϓ੒Ռใࠂ JO$00,1"%  ,FJTVLF5"%" ଟాܓ༎

  2.   

  3.    0VUMJOF ɾ#BDLHSPVOE ɾ4PMVUJPO

  4.    #BDLHSPVOE

  5.    λϒϨοτ୺຤ͷීٴ 1$ͱͷڥքͷᐆດԽ

  6.    λϒϨοτ๚໰਺ ݄ؒ   

  7.    1$WTλϒϨοτ ๚໰਺   4FDSFU

  8. Ͱ΋ 1$༻ϖʔδͷ··ͰݟΒΕΔ

  9. Ͱ΋ 1$༻ϖʔδͷ··ͰݟΒΕΔ 1$ͱλϒϨοτ͸ผ෺

  10.    λϒϨοτݻ༗ͷಛੑ ɾ΢Οϯυ΢αΠζ ɾλονૢ࡞ ɾωοτϫʔΫ؀ڥ

  11.    λϒϨοτݻ༗ͷಛੑ ɾ΢Οϯυ΢αΠζ ɾλονૢ࡞ ɾωοτϫʔΫ؀ڥ ΋ͪΖΜେࣄ͚ͩͲ ຊ࣭త͡Όͳ͍

  12.    λϒϨοτʹΑΔϢʔβମݧ ɾར༻γʔϯ ɾར༻໨త ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ

  13.    λϒϨοτʹΑΔϢʔβମݧ ɾར༻γʔϯ ɾར༻໨త ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ

  14.    ํ਑ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ

  15.    ํ਑ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ ͖ͬ͞1$ͱλϒϨοτ͸ผ෺ͬͯ ݴͬͨͷʹʜʁ

  16. ɾར༻γʔϯ ɾར༻໨త ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ    λϒϨοτʹΑΔϢʔβମݧ    ɾϢʔβ͕ظ଴͍ͯ͠Δ͜ͱ

  17.    λϒϨοτϢʔβͷظ଴ λϒϨοτ͔Β͸ 1$൛ϖʔδ͕ݟΒΕΔ͸ͣ

  18.    λϒϨοτϢʔβͷظ଴ λϒϨοτ͔Β͸ 1$൛ϖʔδ͕ݟΒΕΔ͸ͣ 1$൛ͱಉ͡৘ใྔΛظ଴

  19.    ํ਑ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ

  20.    ํ਑ 1$༻ϖʔδΛݩʹ λϒϨοτ༻ʹ࠷దԽ͢Δ ௥ՃͰ$44ͱ+4Λద༻ )5.-͸ͦͷ··Ͱ

  21.    બ୒ࢶ ɾ$44ͷ੾Γସ͑ ɹσόΠεͷछྨ 6"  ɹ΢Οϯυ΢ͷ෯ .FEJB2VFSJFT 

  22.    બ୒ࢶ ɾ$44ͷ੾Γସ͑ ɹσόΠεͷछྨ 6"  ɹ΢Οϯυ΢ͷ෯ .FEJB2VFSJFT 

    ࠓճ͸྆ํ༻͍Δ
  23.    બ୒ࢶ ɾ$44ͷ੾Γସ͑ ɹσόΠεͷछྨ 6"  ɹ΢Οϯυ΢ͷ෯ .FEJB2VFSJFT 

    λονσόΠε࠷దԽ σόΠεαΠζ࠷దԽ
  24.    ੾Γସ͑ͷྲྀΕ ɾαʔόαΠυͰରԠϖʔδʹͷΈ ɹCPEZλάʹDMBTT໊͚ͭΔ  ɾ+4Ͱ6"΍্Ͱ͚ͭͨDMBTT໊͔Β ɹCPEZλάʹDMBTT໊͚ͭΔ ɹλϒϨοτ༻ͷ+4Λ࣮ߦ͢Δ 

    ɾ্Ͱ͚ͭͨDMBTT໊ͷ࣌ͷΈελΠϧΛ ɹద༻͢ΔΑ͏ͳ$44ΛಡΈࠐΜͰ͓͘
  25.    ੾Γସ͑ͷྲྀΕ ɾ$44Ͱ͸.FEJB2VFSJFTΛ༻͍ͯ ɹ୺຤ͷαΠζ ݱࡏͷ޲͖ͷ෯ ʹΑͬͯ ɹద༻͢ΔελΠϧΛม͑Δ $break_point =

    800px; // スタイルを切り替える幅 @media screen and (max-width: $break_point) { ... // 端末幅が $break_point 以下の場合 } @media screen and (min-width: $break_point+1) { ... // 端末幅が $break_point 以上の場合 }
  26.    4PMVUJPO

  27.    ʮ୳͢ʯ ʮ࡞Δʯ

  28.    ʮ୳͢ʯPOιϑΝ

  29.    ʮ୳͢ʯPOιϑΝ    ωοταʔϑΟϯ ࢮޠ 

  30.    ਓؾͷΩʔϫʔυΛଟ͘දࣔ    จࣈೖྗͷͮ͠Β͞Λճආ

  31.    ݕࡧ݁ՌΛબ୒͠΍͘͢    ϒϩοΫશମΛλοϓՄೳʹ )5.-ม͑ͣʹ$44ͱ+4ͷΈͰ 

  32.    .:ϑΥϧμʹ௥Ճ͠΍͘͢

  33.    .:ϑΥϧμʹ௥Ճ͠΍͘͢ #FGPSF "GUFS

  34.    .:ϑΥϧμʹ௥Ճ͠΍͘͢

  35.    #FGPSF "GUFS .:ϑΥϧμʹ௥Ճ͠΍͘͢

  36.    ʮ୳͢ʯGPSྉཧ

  37.    ʮ୳͢ʯGPSྉཧ    ࢖͍͍ͨࡐྉ͕͋Δ

  38.    ݕࡧόʔΛ޿͘

  39.    ϑΝʔετϏϡʔͰࡐྉ෼͔Δ

  40.    ϑΝʔετϏϡʔͰࡐྉ෼͔Δ

  41.    ʮ࡞ΔʯJOΩονϯ

  42.    ʮ࡞ΔʯJOΩονϯ    ࡐྉͱ࡞Γํಉ࣌ʹݟ͍ͨ    ྉཧத͸εΫϩʔϧͮ͠Β͍

  43.    ࡐྉͱ࡞ΓํΛಉ࣌ʹݟΒΕΔ 5BQ

  44.    ࡐྉͱ࡞ΓํΛಉ࣌ʹݟΒΕΔ 0QFO

  45.    ༙͍ͯ͘Δٙ໰ ɾ͜ͷϘλϯؾ͔ͮͳ͍Μ͡Όʁ ɾࡐྉͭ͋Δͷࠞཚ͠ͳ͍ʁ

  46.    WFS 4DSPMM

  47.    WFS εΫϩʔϧʹ ߹Θͤͯ௥ै

  48.    WFS

  49.    WFS    Ұݟྑͦ͞͏ʹݟ͑Δ͕ʜ

  50.    ໰୊఺ ɾࡐྉ௕͍ͱԼͷํݟ͑ͳ͍ ɾ࣮͸஗Εͯ௥ै͢ΔͷͰअຐ ɹJ04ϒϥ΢βͰͷٕज़తͳ੍໿

  51.    WFS 4DSPMM

  52.    WFS 'BEFPVU

  53.    WFS 'BEFJO

  54.    WFS 0QFO

  55.    ໰୊఺ ɾϑΣʔυΞ΢τ͢Δͷ͕͏͍͟ ɾϑΣʔυΠϯ͢Δͷ΋͏͍͟

  56. ࢥ͍ͱͲ·ͬͯ ͔Βߟ͑௚͢

  57.    Α͘Α͘ߟ͑ͯΈΕ͹ ɾྉཧ͢Δ࣌ʹ͚ͩؾ͚ͮ͹ྑ͍ ɾϢʔβ͕ࠞཚ͠ͳ͚Ε͹ྑ͍

  58.    WFSʹ໭Δ ݟͤํ͕ؾʹͳΔ ػೳͷઆ໌ͬΆ͍ʜ 

  59.    WFS ɾ໨తͬΆ͍χϡΞϯεʹมߋ ɾʮ֬ೝʯͱ͍͏ݴ༿Ͱಉ͡಺༰ ɹͭ͋Δ͜ͱͷҧ࿨ײͷܰݮ

  60.    WFS    'JYFE ɾ໨తͬΆ͍χϡΞϯεʹมߋ ɾʮ֬ೝʯͱ͍͏ݴ༿Ͱಉ͡಺༰ ɹͭ͋Δ͜ͱͷҧ࿨ײͷܰݮ

  61. ʮࡐྉΛ͜͜ʹදࣔʯϘλϯɺ J1BEϢʔβʔͱͯ͠ͱͯ΋ศརʹ࢖ͬͯ·͢ɻ ख͕ೞΕͯΔ࣌౳εϫΠϓ͕ग़དྷͳ͔ͬͨͷͰ εΫϦʔϯ಺Ͱ಺༰͕֬ೝग़དྷΔͷͰָʹͳΓ ·ͨ͠ɻ͋Γ͕ͱ͏͍͟͝·͢ʂ    Ϣʔβ͔Βͷ͝ҙݟ

  62.    5JQTεέʔϧௐ੔ #FGPSF

  63.    5JQTεέʔϧௐ੔    த్൒୺ͳ༨ന

  64.    5JQTεέʔϧௐ੔ transform: scale() σόΠεͷ෯ʹ߹Θͤͯ ίϯςϯπΛ֦େ

  65.    5JQTεέʔϧௐ੔ # CoffeeScript scale = ... # 拡大率を計算

    originX = ... # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )
  66. # CoffeeScript scale = ... # 拡大率を計算 originX = ...

    # どこを起点に拡大するか計算 $(‘$main’).css( ‘-webkit-transform’: “scale(#{scale})” ‘-webkit-transform-origin’: “#{originX} 0” ‘visibility’: ‘visible’ )    5JQTεέʔϧௐ੔ ֦େޙʹදࣔ ݩͷ$44Ͱ͸hidden 
  67.    5JQTεέʔϧௐ੔ "GUFS

  68.    5JQTεέʔϧௐ੔    0,

  69.    ͦͷଞ΍ͬͨ͜ͱ ɾϑολΛλϒϨοτ༻ͷγϯϓϧͳ΋ͷʹ ɾλϒϨοτ༻ͷϑΥʔϜΛ࡞੒ ɾߜΓࠐΈݕࡧϝχϡʔͷϨΠΞ΢τௐ੔ ɾϖʔδωʔγϣϯΛλονσόΠε޲͚ʹ ɾ޲͖Λม͑ͨ࣌ʹ֦େ཰͕มΘΔόάͷରॲ ɾςετίʔυॻ͘ ɾจࣈαΠζɺ༨നͷௐ੔

     ɾطଘͷϖʔδͷमਖ਼
  70.    ๚໰਺ͷมԽ ϦϦʔε

  71.    ࠓޙ ΍ΕΔͳΒ ΍Γ͍ͨ͜ͱ ɾλϒϨοτʹ࠷దԽ͞Εͨ޿ࠂ ɾଞͷ୺຤΁ͷରԠ ɹ ΄΅͜ͷ··ͰରԠͰ͖Δ͸ͣ 

  72. 5IBOL:PV