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

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

Transcript

1. ͦͷUIɺ
   ࣮͸؆୯͡Όͳ͍ΜͰ͢
   @akatsuki174
   DXEL.1
   ʙΤϯδχΞͱσβΠφʔ͕ʮ͍͍ؔ܎ʯΛஙͨ͘Ίʹʙ
   

   View Slide

2. ࣗݾ঺հ
   • ਢ౻ຘ
   • גࣜձࣾZaimॴଐ
   • iOSΤϯδχΞ
   • Twitter, Qiita, SlideShare, GitHub,
   SpeakerDeck, ͸ͯͳϒϩά, note
   →akatsuki174
   

   View Slide

3. View Slide

4. ɾiOSΤϯδχΞੜ׆ͷதͰʮ͏͓ɺ
   ɹؾ࣋ͪ͸͛͢ʔΘ͔Δ͚ͲͦͷUI͸
   ɹख͕ؒ…ʂʯͱࢥͬͨ͜ͱΛ3ͭ঺հ
   ɾͳͥͦΕ͕೉͍͠ͷ͔΋ؚΊͯઆ໌
   ɾԿ͔iOSΞϓϦ੡࡞ͷॿ͚ʹͳΕ͹ͱ…
   ࠓ೔ͷ಺༰
   

   View Slide

5. ཁ๬̍ɿʮʻ໭ΔʯϘλϯλοϓ࣌
   ʹΞϥʔτΛද͍ࣔͨ͠
   

   View Slide

6. ཁ๬ৄࡉ
   ೖྗܥը໘͔Β໭Δͱ͖ɺʮฤूத
   ͚ͩͲ໭͍͍͔ͬͯͬ͢ʁʯͱ͍͏
   ΞϥʔτΛग़͍ͨ͠
   

   View Slide

7. ʮʻ໭ΔʯϘλϯ
   ɾΧελϚΠζ͢Δ͜ͱ͸Ͱ͖Δ
   ɾλοϓ࣌ʹΞΫγϣϯΛ෇͚Ճ͑Δ
   ɹ͜ͱ΋Ͱ͖Δ
   

   View Slide

8. ΧελϚΠζྫɿ৭Λม͑Δ
   

   View Slide

9. ΧελϚΠζྫɿʮʻʯ only
   

   View Slide

10. ΧελϚΠζྫɿtext only
    

    View Slide

11. ͕͔ͩ͠͠ʂ
    ɾඪ४ͷʮʻ໭ΔʯUI × ΞΫγϣϯͷ
    ɹ૊Έ߹Θͤ͸ʢݫີʹ͸ʣͰ͖ͳ͍
    

    View Slide

12. ͦΕͬΆ͘ؤுͬͨ΍ͭ
    

    View Slide

13. ͦΕͬΆ͘ؤுͬͨฐ֐
    ɾશମͰϘλϯͷ৭Λม͍͑ͨ৔߹ʹ
    ɹݸผରԠΛ͢Δඞཁ͕͋Γɺ໘౗
    ɾϝϯςφϯε໘ͰΊΜͲͦ͏
    

    View Slide

14. ผҊྫ
    ɾඪ४ͷ໭ΔϘλϯʹ͸͠ͳ͍͜ͱΛ
    ɹڐ༰͢Δ
    ɾࣗಈอଘʹͯ͠ɺͦ΋ͦ΋อଘΛ
    ɹ֬ೝ͢ΔඞཁΛͳ͘͢
    

    View Slide

15. ཁ๬̎ɿϋΠύʔϦϯΫΛ෇͚͍ͨ
    

    View Slide

16. ϋΠύʔϦϯΫ
    WebͰΑ͘ݟΔϋΠύʔϦϯΫɺ
    iOSͩͱͪΐͬͱΊΜͲ͍͘͞
    

    View Slide

17. UILabelͰରԠ͢Δ৔߹
    ɾϥϕϧ಺ͷશͯͷจࣈྻʹର͠
    ɹಉ͡ઃఆ஋ʢ৭ɺαΠζͱ͔ʣΛ
    ɹద༻͢Δͷ͸ָ
    ɾϥϕϧ಺ͷจࣈྻͷҰ෦ʹผͷઃఆ஋
    ɹΛద༻͢͠ΔͳΒNSAttributedString
    ɹΛ࢖͏ඞཁ͕͋Δ
    

    View Slide

18. ֘౰෦෼͚ͩ৭෇͚
    

    View Slide

19. λοϓ͞Εͨͷ͕ϦϯΫ
    จࣈ෦෼͔൑ఆ
    

    View Slide

20. ผҊྫ
    ϦϯΫ෦෼͸Ϙλϯͱͯ͠
    ผͷͱ͜Ζʹஔ͘
    

    View Slide

21. ཁ๬̏ɿΞίʔσΟΦϯϝχϡʔΛ
    ࡞Γ͍ͨ
    

    View Slide

22. ΞίʔσΟΦϯϝχϡʔ
    ɾiOSඪ४Ͱ͸ΞίʔσΟΦϯϝχϡʔ
    ɹΛ࣮ݱͰ͖ΔΑ͏ͳ࢓૊Έ͸ఏڙ
    ɹ͞Ε͍ͯͳ͍
    ɾؤுͬͯ࡞Ζ͏ͱࢥ͏ͱUITableView
    ɹΛվ଄ͯ͠࡞Δ͜ͱʹͳΔ
    

    View Slide

23. UITableView
    Α͘ϦετܕͷUIͰ
    ࢖ͬͯΔ΍ͭ
    

    View Slide

24. UITableView
    ΞίʔσΟΦϯ͸ɺ
    ྫ͑͹ΧςΰϦ - δϟϯϧ
    ͷΑ͏ͳ਌ࢠؔ܎͕͋Δ
    ➜section headerΛ
    ΧςΰϦͱͯ͠ɺcellΛ
    δϟϯϧͱͯ͠ߟ͑Δ
    

    View Slide

25. ΊΜͲ͍ϙΠϯτ
    ɾηΫγϣϯʹλοϓॲཧΛ෇͚Δ
    ɾ਌ࢠؔ܎ͷσʔλߏ଄Λ࣋ͨͤΔ
    ɾηΫγϣϯͷ։ดঢ়ଶΛ֮͑ͤ͞Δ
    ɾΞχϝʔγϣϯʹࣗ༝͕ޮ͔ͳ͍
    etc…
    

    View Slide

26. ผҊྫ
    ɾʢભҠ૿͑Δ͚ͲʣΧςΰϦΛλοϓ
    ɹͨ͠Βδϟϯϧը໘ʹભҠ͢Δ
    ɾWebViewʹ͢Δ
    

    View Slide

27. ·ͱΊ
    ɾiOSʹ͸iOSݻ༗ʢUIKitಛ༗ʣͷUI͕
    ɹ͋ΓɺʮiOSͰ͸Α͘ݟͳ͍UIʯʹ͸
    ɹΑ͘ݟͳ͍ͳΓͷཧ༝͕͋Δ
    ɾૣΊʹٞ୊ʹڍ͛ͯɺίετͱମݧ͕
    ɹͪΐ͏Ͳ͍͍ԘകʹͳΔͱ͜ΖΛ
    ɹݟ͚ͭΑ͏
    

    View Slide

28. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide