【Presenter notes版】SwiftUI における Color 周りの話 – Color と Gradient から見る SwiftUI への苦悩 – / Include presenter notes: Understanding SwiftUI focused by Gradient color usages

https://speakerdeck.com/expensiveman/understanding-swiftui-focused-by-gradient-color-usages
の Presenter notes 版です。発表を聞いていない方へ向けた登壇メモを付記したバージョンになります。

Transcript

1. SwiftUI ʹ͓͚Δ Color पΓͷ࿩ –– Color ͱ Gradient ͔ΒݟΔ SwiftUI ΁ͷۤ೰ –– YUMEMI.swift #4 ~Enjoy SwiftUI vol2~ @גࣜձࣾΏΊΈ SwiftUI ʹ͓͚Δ Color पΓͷ࿩ – Color ͱ Gradient ͔ΒݟΔ SwiftUI ΁ͷۤ೰ – / Understanding SwiftUI focused by Gradient color usages
2. ಥવͰ͕͢ɼ͜Ε͸ԿͰ͠ΐ͏͔ɻ গ͠Ҿ͖·͢Ͷˠ
3. ΓΜ͝Ͱ͢ɻAppleͰ͢ɻ ۮવʹ΋զʑ͸ Apple ͱ͍͏ձࣾͷ੡඼Λར༻ͯ͠࢓ࣄΛ͍ͯ͠·͢ɻ
4. Rubens & Brueghel, The Garden of Eden with the fall of man ਆ࿩ʹ΋༻͍ΒΕ·͕͢ɼ ͜ͷ੺͍Ռ࣮͸ʮ৭ʯΛ௨ͯ͡ಈ෺ͱίϛϡχέʔγϣϯΛߦ͍·͢ɻ৭֮ͷൃୡͰ͢Ͷɻ ࠓճ͸ͦΜͳ৭ʹ͍ͭͯͷ͓࿩Ͱ͢ɻ (҆৺͍ͯͩ͘͠͞ɼՊֶऀ͸͠͹͠͹খൌͱͯ͠ਆ࿩Λ༻͍·͢ɻ)
5. SwiftUI ʹ͓͚Δ Color पΓͷ࿩ YUMEMI.swift #4 ~Enjoy SwiftUI vol2~ @גࣜձࣾΏΊΈ –– Color ͱ Gradient ͔ΒݟΔ SwiftUI ΁ͷۤ೰ ––
6. ͔ͨͶ •גࣜձࣾ VALU •ݸਓͰݚڀࢧԉ • ઐ໳͸ Learning & Behavior •try! Swift 2019 LT
12. Environment-dependent color ͸ Overview ʹৄࡉ͕ॻ͔Ε͓ͯΓɼ
13. ͦΕ͸ `late-binding token` Ͱ͋Δ ͭ·Γɼ஗Ԇͯ͠ఆٛ͞ΕΔ΋ͷͰ͋Δ some View ͷ͜ͱͰ͢ɻ
14. ࣮ࡍͷఆٛ͸ͪ͜Βˠ
15. ୯ͳΔϋογϡ஋Λ࣋ͪ String ม׵Մೳͳ structͰ͢ɻ͔͠͠ˠ
16. extension ͱͯ͠ protocol View ʹద߹͍ͯ͠·͢ɻ
17. ॳظԽํ๏͸͍͔ͭ͋͘Γˠ
18. ಛ௃తͳ΋ͷ͸ - UIColor ͔ΒॳظԽͰ͖Δ - CGFloat Ͱ͸ͳ͘ (UIKit Ҏ֎Λར༻͢ΔͨΊ) Double ܕͰ3৭ࢦఆ͕ՄೳͰ͋Δɻ
19. ͋Δ View ͷ υΩϡϝϯτ Ͱ͢ɻColor ʹؔ͢Δ 2ͭΛऔΓ্͛·͢ɻ
20. `forgroundColor` ͱ `backgound` ͷ 2ͭͷؔ਺Ͱ͢ɻ ຊ೔࿩͢಺༰͸ͪ͜ΒͰ͢ɻ
25. SwiftUI ʹ͸ `CAGradientLayer` Ͱ͔ͭͯදݱ͞Ε͍ͯͨΑ͏ʹɼ άϥσʔγϣϯ ͷ struct ΋༻ҙ͞Ε͓ͯΓˠ
26. `LinearGradient` ͳͲΛར༻ͯ͠഑৭ͷҐஔΛܾΊΔ͜ͱʹΑͬͯ View ͱͯ͠ར༻ՄೳʹͳΓ·͢ɻ ࣮ࡍʹݟͯΈ·͠ΐ͏ˠ
27. →
30. άϥσʔγϣϯ͞Εͨ `Text` ΛݟͯΈ·͠ΐ͏͔ˠ
31. ઌ΄Ͳఆٛͨ͠άϥσʔγϣϯΠϯελϯεΛ ྆ऀʹࢦఆ͠·͢........͕ˠ
32. ͜ΕͰ͸μϝͳΜͰ͢ˠ
33. ࣮ࡍʹ͸ίϯύΠϧΤϥʔͱͳΓ·͢ɻԿނͰ͠ΐ͏͔ˠ
34. άϥσʔγϣϯ͕ Color ʹద߹͍ͯ͠ͳ͍ͱౖΒΕ·ͨ͠ɻ ԿނͰ͠ΐ͏͔ɼάϥσʔγϣϯͷܕ͔Β֬ೝͯ͠Έ·͠ΐ͏ˠ
35. ShapeStyle ͱ View Ͱͨ͠ɻ Ͱ͸ ؔ਺ `foregroundColor()` ͸ͱ͍͏ͱˠ
36. Color ʹ͔͠։͔Ε͍ͯͳ͍͜ͱ͕ݪҼͰͨ͠ɻ Text ͷจࣈͦͷ΋ͷʹ͍ͭͯ͸ Color (͜͜Ͱ͸୯৭) ͷΈ͔͠ࢦఆͰ͖ͳ͍ͱ͍͏͜ͱʹͳΓ·͢ɻ
37. ؔ਺ `background()` ͸ some View ʹରͯ͠։͔Ε͍ͯ·͢ɻ ͜Ε͕ࣔ͢ͷ͸ˠ
38. Image ͷΑ͏ͳผͷ View Λഎܠʹࢦఆ͢Δ͜ͱ͕Ͱ͖Δͱ͍͏͜ͱͰ͢ɻ ͦΕͰ͸ɼ࣍ͷ View ͸Ͳ͏Ͱ͠ΐ͏͔ˠ
39. ͪΐͬͱݟʹ͍͘ͷͰ͕͢ɼ `Rectangle` Ͱ͢ɻ `Circle` ΍ `RoundedRectangle` ͳͲ΋͜Εͷ1ͭͰ͢ɻ ͜ͷڍಈΛ૝૾ͯ͠ཉ͍͠ͷͰ͕͢ˠ
40. `background` ʹ ੺ɼ `foregroundColor` ʹ ྘Λࢦఆ͍ͯ͠·͢ɻ ͜Ε͸Կ৭ʹͳΔͰ͠ΐ͏͔?
41. ͜ͷ৔߹͸྘ͳΜͰ͢ɻ ద༻͞Εͨͷ͸ `foregroundColor` ɻ`background` Ͱ͸͋Γ·ͤΜɻ ͪͳΈʹ `background` ʹͷΈࢦఆͯ͠΋ˠ
42. ͜ͷΑ͏ʹແࢹ͞Ε·͢ɻ (͜Ε͸ `background` Λࢦఆ͠ͳ͍৔߹ͱಉҰͰ͢)
43. ·ͨɼ`foregroundColor` ʹࢦఆͨ͠··ผͷؔ਺ʹΑͬͯ ৭ΛมԽͤ͞Δ͜ͱ͕Ͱ͖·͢ˠ
44. `fill` Ͱ͢
45. (Rectangle ͸ Shape ͱݺ͹ΕΔ protocol ʹద߹͍ͯ͠·͕͢) `fill` ͸ ShapeStyle ΛҾ਺ʹऔΓ·͢ɻ
46. `ShapeStyle` ɻάϥσʔγϣϯʹ΋ద߹͍ͯ͠·͢Ͷɻ
47. `fill` ʹ͸ άϥσʔγϣϯΛར༻͢Δ͜ͱ͕Ͱ͖·ͨ͠ɻ
48. Summary • View •background(View) / foregroundColor(Color) • / ??? (View) • Shape •foregroundColor(Color) •fill(ShapeStyle) ^ ఻͍͑ͨ͜ͱ͸ 3఺ɼ1఺໨͸ ܕʹΑ੍ͬͯݶ͞ΕΔؔ਺͕͋Δͱ͍͏͜ͱɼ 2఺໨ɼෳ਺ͷ࣮૷ํ๏͕͋Δͱ͍͏͜ͱɻ ͦͯ͠3఺໨ɼView protocol ΁ͷద߹ʹΑ࣮ͬͯ૷ՄೳͰ͋Δؔ਺ʹ͸ɼ Ұ෦ͦͷ௨Γʹಈ͔ͳ͍΋ͷ͕͋Δͱ͍͏͜ͱɻ
49. Learn once, apply anywhere SwiftUI ͸ `Learn once, apply anywhere` Ͱ͋Δͱݴ͍·͢ɻ
50. Ͱ΋ͦͷ Once ͕طʹ ͭΒ͍Ͱ͢ΑͶɼ ҰํͰͦΜͳ͜ͱ͸ (Xcode 11.2 ͷෆ۩߹΋͋ΔͨΊ) Apple ΋ঝ஌ͷ͸ͣͰ͢ ͭΒ͍ͳΒͲ͏͢Δ͔ˠ
51. Apple ͸͖ͬͱ ։ൃऀ Λ΋ͬͱָʹ͠Α͏ͱվળ͢Δ͸ͣͰ͢ɻ Xcode 11 beta ͱ iOS 13 ͷසൟͳΞοϓσʔτͷ௨Γʹɻ
52. Learn once, apply anywhere `Learn once, apply anywhere` ͜Ε͸ؒҧ͍ˠ
53. Learn once, apply anywhere `Learn once, apply anywhere` ͜Ε͸ؒҧ͍ˠͩͱࢲ͸ࢥ͍·͢ˠ
54. Learn TWICE OR MORE, apply anywhere `Learn TWICE OR MORE, apply anywhere` ͕ਖ਼͍͠Ͱ͢Ͷɻ
55. ྑ͍ SwiftUI ϥΠϑΛ ......͓ͬͱͦ͏Ͱͨ͠ɼ `Text` ͷ άϥσʔγϣϯͰͨ͠Ͷɻ
56. ਖ਼ղ͸ ʮάϥσʔγϣϯΛ Base ͱͯ͠ `mask(View)` ʯͰ͢ɻ ͦΕͰ͸ɼྑ͍ SwiftUI ϥΠϑΛɻ
57. References • Color - SwiftUI | Apple Developer Documentation • foregroundColor(_:) - SwiftUI | Apple Developer Documentation • background(_:alignment:) - SwiftUI | Apple Developer Documentation • Gradient - SwiftUI | Apple Developer Documentation • LinearGradient - SwiftUI | Apple Developer Documentation • fill(_:style:) - SwiftUI | Apple Developer Documentation • Mac Catalyst - iOS - Human Interface Guidelines - Apple Developer • Cosmo/OpenSwiftUI - GitHub