そのUI、実は簡単じゃないんです

2018/07/10(火) DXEL.1 エンジニアとデザイナーが「いい関係」を築くために

Transcript

1. ͦͷUIɺ ࣮͸؆୯͡Όͳ͍ΜͰ͢ @akatsuki174 DXEL.1 ʙΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹʙ
2. ࣗݾ঺հ • ਢ౻ຘ • גࣜձࣾZaimॴଐ • iOSΤϯδχΞ • Twitter, Qiita, SlideShare, GitHub, SpeakerDeck, ͸ͯͳϒϩά, note →akatsuki174
4. ɾiOSΤϯδχΞੜ׆ͷதͰʮ͏͓ɺ ɹؾ࣋ͪ͸͛͢ʔΘ͔Δ͚ͲͦͷUI͸ ɹख͕ؒ…ʂʯͱࢥͬͨ͜ͱΛ3ͭ঺հ ɾͳͥͦΕ͕೉͍͠ͷ͔΋ؚΊͯઆ໌ ɾԿ͔iOSΞϓϦ੡࡞ͷॿ͚ʹͳΕ͹ͱ… ࠓ೔ͷ಺༰
5. ཁ๬̍ɿʮʻ໭ΔʯϘλϯλοϓ࣌ ʹΞϥʔτΛද͍ࣔͨ͠
6. ཁ๬ৄࡉ ೖྗܥը໘͔Β໭Δͱ͖ɺʮฤूத ͚ͩͲ໭͍͍͔ͬͯͬ͢ʁʯͱ͍͏ ΞϥʔτΛग़͍ͨ͠
7. ʮʻ໭ΔʯϘλϯ ɾΧελϚΠζ͢Δ͜ͱ͸Ͱ͖Δ ɾλοϓ࣌ʹΞΫγϣϯΛ෇͚Ճ͑Δ ɹ͜ͱ΋Ͱ͖Δ
8. ΧελϚΠζྫɿ৭Λม͑Δ
9. ΧελϚΠζྫɿʮʻʯ only
10. ΧελϚΠζྫɿtext only
11. ͕͔ͩ͠͠ʂ ɾඪ४ͷʮʻ໭ΔʯUI × ΞΫγϣϯͷ ɹ૊Έ߹Θͤ͸ʢݫີʹ͸ʣͰ͖ͳ͍
12. ͦΕͬΆ͘ؤுͬͨ΍ͭ
13. ͦΕͬΆ͘ؤுͬͨฐ֐ ɾશମͰϘλϯͷ৭Λม͍͑ͨ৔߹ʹ ɹݸผରԠΛ͢Δඞཁ͕͋Γɺ໘౗ ɾϝϯςφϯε໘ͰΊΜͲͦ͏
14. ผҊྫ ɾඪ४ͷ໭ΔϘλϯʹ͸͠ͳ͍͜ͱΛ ɹڐ༰͢Δ ɾࣗಈอଘʹͯ͠ɺͦ΋ͦ΋อଘΛ ɹ֬ೝ͢ΔඞཁΛͳ͘͢
15. ཁ๬̎ɿϋΠύʔϦϯΫΛ෇͚͍ͨ
16. ϋΠύʔϦϯΫ WebͰΑ͘ݟΔϋΠύʔϦϯΫɺ iOSͩͱͪΐͬͱΊΜͲ͍͘͞
17. UILabelͰରԠ͢Δ৔߹ ɾϥϕϧ಺ͷશͯͷจࣈྻʹର͠ ɹಉ͡ઃఆ஋ʢ৭ɺαΠζͱ͔ʣΛ ɹద༻͢Δͷ͸ָ ɾϥϕϧ಺ͷจࣈྻͷҰ෦ʹผͷઃఆ஋ ɹΛద༻͢͠ΔͳΒNSAttributedString ɹΛ࢖͏ඞཁ͕͋Δ
18. ֘౰෦෼͚ͩ৭෇͚
19. λοϓ͞Εͨͷ͕ϦϯΫ จࣈ෦෼͔൑ఆ
20. ผҊྫ ϦϯΫ෦෼͸Ϙλϯͱͯ͠ ผͷͱ͜Ζʹஔ͘
21. ཁ๬̏ɿΞίʔσΟΦϯϝχϡʔΛ ࡞Γ͍ͨ
22. ΞίʔσΟΦϯϝχϡʔ ɾiOSඪ४Ͱ͸ΞίʔσΟΦϯϝχϡʔ ɹΛ࣮ݱͰ͖ΔΑ͏ͳ࢓૊Έ͸ఏڙ ɹ͞Ε͍ͯͳ͍ ɾؤுͬͯ࡞Ζ͏ͱࢥ͏ͱUITableView ɹΛվ଄ͯ͠࡞Δ͜ͱʹͳΔ
23. UITableView Α͘ϦετܕͷUIͰ ࢖ͬͯΔ΍ͭ
24. UITableView ΞίʔσΟΦϯ͸ɺ ྫ͑͹ΧςΰϦ - δϟϯϧ ͷΑ͏ͳ਌ࢠؔ܎͕͋Δ ➜section headerΛ ΧςΰϦͱͯ͠ɺcellΛ δϟϯϧͱͯ͠ߟ͑Δ
25. ΊΜͲ͍ϙΠϯτ ɾηΫγϣϯʹλοϓॲཧΛ෇͚Δ ɾ਌ࢠؔ܎ͷσʔλߏ଄Λ࣋ͨͤΔ ɾηΫγϣϯͷ։ดঢ়ଶΛ֮͑ͤ͞Δ ɾΞχϝʔγϣϯʹࣗ༝͕ޮ͔ͳ͍ etc…
26. ผҊྫ ɾʢભҠ૿͑Δ͚ͲʣΧςΰϦΛλοϓ ɹͨ͠Βδϟϯϧը໘ʹભҠ͢Δ ɾWebViewʹ͢Δ
27. ·ͱΊ ɾiOSʹ͸iOSݻ༗ʢUIKitಛ༗ʣͷUI͕ ɹ͋ΓɺʮiOSͰ͸Α͘ݟͳ͍UIʯʹ͸ ɹΑ͘ݟͳ͍ͳΓͷཧ༝͕͋Δ ɾૣΊʹٞ୊ʹڍ͛ͯɺίετͱମݧ͕ ɹͪΐ͏Ͳ͍͍ԘകʹͳΔͱ͜ΖΛ ɹݟ͚ͭΑ͏
28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ