レスポンシブデザインに見受けられる４つの段階 ~実現のためのZurb Foundation~

CSS Talk vol.1での発表内容です

Transcript

1. Ϩεϙϯγϒɺ໨ࢦ͢΂͖̐ͭͷஈ֊ ʙ࣮ݱͷͨΊͷZurb Foundationʙ 2016/10/29ɹCSS Talk vol.1 @ TAM Coworking
2. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ※࠷ۙɺ΄ͱΜͲιʔείʔυΛॻ͍ͯ·ͤΜ
3. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ concrete5Ҋ݅͹͔Γ΍ͬͯ·͢ 10% 90% concrete5 ͦͷଞ
4. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ϑϦʔϥϯεͷάϥϑΟοΫσβΠφʔ →ςϨϏہͷCGσβΠφʔ →ϑϦʔϥϯεͰWeb&ө૾ͷσβΠφʔ →๏ਓԽʴconcrete5ΠϯςάϨʔτύʔτφʔ →ݱ৬ͷձࣾʹJOIN ܦྺ concrete5Ҋ݅͹͔Γ΍ͬͯ·͢ झຯɿమಓɾϐΞϊ
5. ࣗݾ঺հ ͔ͨ͜͠͏͖ גࣜձࣾND&I ϓϥϯφʔ ϑϦʔϥϯεͷάϥϑΟοΫσβΠφʔ →ςϨϏہͷCGσβΠφʔ →ϑϦʔϥϯεͰWeb&ө૾ͷσβΠφʔ →๏ਓԽʴconcrete5ΠϯςάϨʔτύʔτφʔ →ݱ৬ͷձࣾʹJOIN ܦྺ concrete5Ҋ݅͹͔Γ΍ͬͯ·͢ ࠷ۙɺ݁ࠗ͠·ͨ͠ ࠺͔Β͸ʮϫΠ͘Μʯͱݺ͹Εͯ·͢ झຯɿమಓɾϐΞϊ
6. ΞδΣϯμ ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ Zurb Foundationʹ͍ͭͯ
7. ࠓ೔͓࿩͢Δ͜ͱͷલఏ WebαΠτʢ΄͒Ή΃͐͡ʣ Λલఏʹ࿩͠·͢ɻ SPAͱ͔ɺ WebγεςϜͷ࿩Ͱ͸͋Γ·ͤΜɻ ͦ͏͍͏ͷΛظ଴͞Ε͍ͯͨํɺ ΰϝϯφαΠ
8. ࠓ೔͓࿩͢Δ͜ͱͷલఏ WebαΠτʢ΄͒Ή΃͐͡ʣ Λલఏʹ࿩͠·͢ɻ ͋ͱɺͪΐͬͱJSͷ࿩΋ೖΓ·͢ɻ Pure CSS͡Όͳͯ͘ɺΰϝϯͶʂ
9. ϨεϙϯγϒσβΠϯͬͯʁ • ʮαΠτΛεϚϗରԠ͢ΔͨΊͷٕज़ʯ • ʮϫϯιʔεɾϚϧνϢʔεͰ޻਺࡟ݮͰ͖Δʯ • ʮϝσΟΞΫΤϦΛͨ͘͞Μ࡞Ε͹ɺ ɹεϚϗ͚ͩ͡Όͳ͘ɺλϒϨοτʹ΋ରԠͰ͖Δʯ • ʮGoogle͕ਪ঑ͯ͠ΔΜͩΑͶʯ • ʮͦͷҰํͰɺσβΠϯʹ੍໿͕…ʯ • ʮιʔεͷංେԽ͕…ʯ
10. ϨεϙϯγϒσβΠϯɺ͜͜Ͱͷఆٛ 
    8FCαΠτΛ
    
    εϚϗରԠͤ͞ΔͨΊͷΞϓϩʔνٕज़ 2. CSSϝσΟΞΫΤϦΛ֩ͱ͢Δ 3. ϫϯιʔεɾϚϧνϢʔε
11. εϚϗରԠ΁ͷΞϓϩʔνٕज़ • UA෼ذ • αʔόʔαΠυ • ϛυϧ΢ΣΞͰߦ͏ ʢPHP΍Rubyʣ • WebαʔόʔͰߦ͏ ʢ.htaccess౳ʣ • ΫϥΠΞϯταΠυʢJSʣ • Ϩεϙϯγϒʢը໘෯ʣ Ί ͬ ͪ Ό ͍ ͬ ͺ ͍ ͋ Δ Ͷ ʂ ࠓ೔͸΋ͪΖΜͬͪ͜ͷ࿩ʂ
12. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ2 ϑΣʔζ3 ϑΣʔζ4
13. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ2 ϑΣʔζ3 ϑΣʔζ4 μϝϙϯγϒ
14. μϝϙϯγϒͷಛ௃ • ίϯςϯπ͕ը໘͔Β͸Έग़͢ɻϨΠΞ΢τ͔Β͸Έग़͢ɻ • ίϯςϯπಉ͕࢜ॏͳΔɻݟ͑ͳ͍෦෼͕ੜ͡Δ • ίϯςϯπ΍ը૾ͷαΠζ͕ෆࣗવʹେ͖͘ͳͬͨΓখ͘͞ͳͬͨΓ͢Δ • ίϯςϯπ΍ը૾ͷΞεϖΫτൺ͕ਖ਼͘͠࠶ݱ͞Εͳ͍
15. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩
    "NB[POฤ ެ։೔ɿ
     ,PILJ ෆମࡋ
16. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩
    "NB[POฤ ެ։೔ɿ
     ,PILJ ळɺͦΕ͸ొࢁͷقઅɻ෋࢜ࢁʹ௅ઓ͠Α͏ͱ ͢Δʹ͸ɺͪΐ͏Ͳ͍͍قઅͰ͢ΑͶɻࠓ೔ ͸ɺ෋࢜ࢁʹΞλοΫ͢ΔͨΊʹඞཁͳಓ۩Λ Amazon͚ͩͰἧ͑Δ͜ͱʹνϟϨϯδͯ͠Έ· ͠ΐ͏ʂɹωοτͰ΋ҙ֎ͱἧ͑Δ͜ͱ͕ग़དྷ ΔΜͰ͢Αʂ ෆମࡋ
17. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩
    "NB[POฤ ެ։೔ɿ
     ,PILJ ෆମࡋ
18. ෋࢜ࢁʹొΔͨ Ίʹඞཁͳͷ ಓ۩
    "NB[POฤ ެ։೔ɿ
     ,PILJ ෆମࡋ
19. μϝϙϯγϒͷಛ௃ wJNQPSUBOUͷཛྷ wܧঝ͕ͱͬͪΒ͔ͬͯ͠·͍ɺ ϝϯςφϏϦςΟ͕ۃ୺ʹѱ͍ɻ
20. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ3 ϑΣʔζ4 μϝϙϯγϒ΍΍ϙϯγϒ ϑΣʔζ2
21. ΍΍ϙϯγϒͷಛ௃ •ॎʹ߲໨͕௕͍άϩφϏ •̐֊૚ɺ.֊૚ͱԣʹ௕͘ͳΔύϯͣ͘Ϧετ •ͦ΋ͦ΋߲໨਺ͷଟ͍ɺ αΠτϚοϓతͳϑολʔάϩφϏɻ
22. αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ Ωϟϯϖʔϯ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ΞΫηε ࠾༻৘ใ 06-1234-5678 ฏ೔9:00~18:00
23. αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ΞΫηε ࠾༻৘ใ 06-1234-5678 ฏ೔9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ 06-1234-5678 ฏ೔9:00~18:00
24. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ4 μϝϙϯγϒ ϑΣʔζ2 ΍΍ϙϯγϒ ϑΣʔζ3 ΄΅ϙϯγϒ
25. ΍΍ϙϯγϒͷಛ௃ • άϩφϏ͸ϋϯόʔΨʔϝχϡʔ΍ΦϑΩϟϯόεʹ • ը૾͸৔߹ʹԠͯ͡ɺΞʔτσΟϨΫγϣϯͷৼΓ෼͚͕ͳ͞ΕΔ • PC࣌͸ϓϨʔϯͳςΩετ͕ͩɺSP࣌͸ɺݟग़͠ͰΞίʔσΟΦϯͳͲ ʢex. Wikipediaʣ
26. αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ 06-1234-5678 ฏ೔9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ≡
27. αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ 06-1234-5678 ฏ೔9:00~18:00 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑
28. ϨεϙϯγϒσβΠϯʹ ݟड͚ΒΕΔ̐ͭͷஈ֊ ϑΣʔζ1 ϑΣʔζ4 μϝϙϯγϒ ϑΣʔζ2 ΍΍ϙϯγϒ ϑΣʔζ3 ΄΅ϙϯγϒ Ϩεϙϯγϒ ׬શͳΔ
29. Ϩεϙϯγϒͷಛ௃ • ϒϨΠΫϙΠϯτؒͰத్൒୺ͳݟͨ໨ʹͳΔελΠϧͷղܾ ◦ ࡉ͔͘ϒϨΠΫϙΠϯτΛ੾Δ ◦ ྟ࣌ͷϝσΟΞΫΤϦΛ੾Δ • Ϛ΢εϗόʔ࣌ͷσβΠϯΛλονσόΠεͰ͸ผͷදݱͰΞϓϩʔνͤ͞ Δ ◦ ΋͸΍ը໘෯͚ͩͰ͸൑ఆͰ͖ͣɺೖྗσόΠεΛ൑அ͢Δ࢓૊Έ ʢJSʣ͕ඞཁ ׬શͳΔ
30. Ϩεϙϯγϒͷಛ௃ • ϒϨΠΫϙΠϯτؒͰத్൒୺ͳݟͨ໨ʹͳΔελΠϧͷղܾ ◦ ࡉ͔͘ϒϨΠΫϙΠϯτΛ੾Δ ◦ ྟ࣌ͷϝσΟΞΫΤϦΛ੾Δ • Ϛ΢εϗόʔ࣌ͷσβΠϯΛλονσόΠεͰ͸ผͷදݱͰΞϓϩʔνͤ͞ Δ ◦ ΋͸΍ը໘෯͚ͩͰ͸൑ఆͰ͖ͣɺೖྗσόΠεΛ൑அ͢Δ࢓૊Έ ʢJSʣ͕ඞཁ ׬શͳΔ
31. ͜͜·Ͱͷ·ͱΊ μϝϙϯγϒ ΍΍ϙϯγϒ ΄΅ϙϯγϒ Ϩεϙϯγϒ ೲ඼Ϩϕϧ × ̋ ̋ ˕ ಛ௃ ෆମࡋ UI͕ ચ࿅͞Εͯͳ͍ ͍ΘΏΔ Ϩεϙϯγϒ Ϩεϙϯγϒ͚ͩͲ ؾ͕͖͍ͯΔ ඞཁͳ஌ࣝ CSSͷجຊతͳཧղ ࠨهʹಉ͡ ϝσΟΞΫΤϦɺJSɺ ϑϨʔϜϫʔΫͷཧղ ࠨهͷ͞ΒͳΔ ਂ͍ཧղ ސ٬ຬ଍౓ ೲ඼ෆՄ ௿ த ߴ ͜ͷ΁ΜΛ໨ࢦͦ͏
32. ͱ͜ΖͰ…
33. ૣ͘ؼΕͯ·͔͢ʁ
34. ૣ͘ؼΕͯ·͔͢ʁ పఈతʹޮ཰Խ͢Δ
35. ࢲͷ੍࡞ελϯε 1. ̋̋ͷ࠶ൃ໌͸͠ͳ͍ 2. ̋̋ͷݞʹͷΔ 3. ̋͸̋Λ݉ͶΔ
36. ंྠͷ࠶ൃ໌͸͠ͳ͍ Don’t reinvent the wheel طʹ͋Δ΋ͷ͸ɺ͔̍Β࢖Θͳ͍ ૉࡐɺΞϦϞϊͷྲྀ༻ Φʔϓϯιʔεͷར༻͸ɺ ޮՌతͳंྠ࠶ൃ໌ͷճආ
37. ࢲͷ੍࡞ελϯε 1. ंྠͷ࠶ൃ໌͸͠ͳ͍ 2. ̋̋ͷݞʹͷΔ 3. ̋͸̋Λ݉ͶΔ
38. ڊਓͷݞʹͷΔ ੢༸ͷ͜ͱΘ͟ ઌਓͷੵΈॏͶͨൃݟʹج͍ͮͯ Կ͔Λൃݟ͢Δ͜ͱΛࢦ͢ Φʔϓϯιʔε͸ɺ Ғେͳʮڊਓʯ ۦஞͯ͠͸͍͚·ͤΜ
39. ࢲͷ੍࡞ελϯε 1. ंྠͷ࠶ൃ໌͸͠ͳ͍ 2. ڊਓͷݞʹͷΔ 3. େ͸খΛ݉ͶΔ
40. ͞Βʹ… ϓϦϓϩηοαͷ׆༻ HTMLɹ→ɹjade(pug) CSSɹɹ→ɹSass(SCSS) ෼ࢄίʔσΟϯά GitʢձࣾͰ͸BitbucketΛར༻ʣ 伱ؒʹۭ͍ͨ Ϧιʔεͷ౤ೖ͕Մೳ
42. WebαΠτ޲͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋ΋Մೳ ϒϨΠΫϙΠϯτ͸JSʹ౉͢͜ͱ΋Ͱ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ
43. WebαΠτ޲͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋ΋Մೳ ϒϨΠΫϙΠϯτ͸JSʹ౉͢͜ͱ΋Ͱ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ ͨ͘͞Μ͋Γ͗ͯ͢ ޠΓਚͤ͘ͳ͍ʂ
44. WebαΠτ޲͖ͷػೳ͕࠷ॳ͔Β༻ҙ͞Ε͍ͯΔ EqualizerɺInterchangeɺBlockGrid Sass(SCSS)ͰͷΧελϚΠζ͕લఏ ϒϨΠΫϙΠϯτΛมߋՄೳ ϓϩδΣΫτਐߦதͷมߋ΋Մೳ ϒϨΠΫϙΠϯτ͸JSʹ౉͢͜ͱ΋Ͱ͖Δ window.resizeͰൃՐ͠ɺཁૉͷૢ࡞ͳͲ͕Մೳ ৄ͘͠͸ ɹɹ࠙਌ձͰʂ
45. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑
46. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ͓໰͍߹Θͤ ΞΫηε ࠾༻৘ใ ݸਓ৘ใอޢํ਑
47. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ͓໰͍߹Θͤ ΞΫηε ࠾༻৘ใ ݸਓ৘ใอޢํ਑ μα͘ͳ͍ʁ
48. ͪΐͬ͜ͱφϏ໰୊ 06-1234-5678 αϯϓϧגࣜձࣾ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑ αϯϓϧגࣜձࣾ औѻ੡඼ $43׆ಈ ͓໰͍߹Θͤ ≡ ձࣾ֓ཁ औѻ੡඼ Ωϟϯϖʔϯ $43׆ಈ ΞΫηε ࠾༻৘ใ ͓໰͍߹Θͤ ݸਓ৘ใอޢํ਑
49. / 2. Breakpoints // -------------- $breakpoints: ( small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px, ); $breakpoint-classes: (small medium large); _setting.scss
50. // header navigation improvement when screen is small function get_replace() { var subnav = $('#subnav li'); $('#gnav-parent').append(subnav); $('#subnav').css("display","none"); // console.log("newSize: " + newSize); // console.log("cw: " + cw); } function get_replace_reverse() { var subnav = $('#gnav-parent .subnav- item'); $('#subnav ul').append(subnav); $('#subnav').css("display","block"); console.log("oldSize: " + oldSize); console.log("cw: " + cw); } w.on('changed.zf.mediaquery', function(event, newSize, oldSize) { var cw = Foundation.MediaQuery.current; if(newSize === "small") { get_replace(); } else if(oldSize === "small") { get_replace_reverse(); } }); w.load(function(){ var cw = Foundation.MediaQuery.current; if(cw === "small") { get_replace(); } }) app.jsʢ͜͏ॻ͘ͱɺͪΐͬ͜ͱφϏ͕εϚϗͷ࣌ʹάϩφϏʹೖΔʣ
51. EQUALIZER ɾJSͷߴ͞ἧ͑ ɾݱ୅ͷαΠτ੍࡞ʹ͸ඞਢ ɾZF6͔Βɺྻ͝ͱͷߴ͞ἧ͑ʹ΋ରԠ ɾjquery.matchHeight͍Βͣʂ ɾશ෦ೖΓʢେ͸খΛ͔ͶΔʣ͔Βɺ ɹߴ͞ἧ͑Λ४උ͢Δ͕࣌ؒݮΔ
52. INTERCHANGE CodepenͰݟͯΈΑ͏
53. BLOCK GRID 12Ҏ֎Ͱۉ౳ʹׂΕΔάϦουΧϥϜ 5ɺ7Ͱ΋ׂΕΔʂʢૉ਺ׂʣ ׂΔ਺ͷ࠷େ͸8 ͚ͩͲɺSass൛Ͱ͸ແ੍ݶͰׂΕΔ
54. ৄ͍͠৘ใ͸QiitaͰʂ
55. ZF·ͱΊ Foundationʹ͸ɺαΠτ੍࡞دΓͷ ศརͳίϯϙʔωϯτ͕ἧ͍ͬͯΔ શ෦ೖΓͳͷͰɺίϯϙʔωϯτಉ࢜ͷ ׯব͕ى͖ʹ͍͘ ޙ͔Βͷ࢓༷มߋʹڧ͍ʂ
56. ࠓճͷ·ͱΊ ΄΅ϙϯγϒҎ্ɺ ׬શͳΔϨεϙϯγϒΛ໨ࢦͦ͏ʂ ͦΕΛ࣮ݱ͢ΔͨΊʹɺ Zurb FoundationΛ࢖ͬͯΈΑ͏ʂ