Anatomy of Dynamic color

DroidKaigi 2022
https://droidkaigi.jp/2022/timetable/363242/

書き起こした記事: https://blog.smartbank.co.jp/entry/2022/10/06/dynamic-color

Transcript

1. "OBUPNZPG%ZOBNJDDPMPS
   
   :VLJ*XBOB!SPDLOBNF
   %SPJE,BJHJ
   

   View Slide

2. 
   4NBSU#BOL *OD
   J04"OESPJE"QQMJDBUJPO%FWFMPQFS
   ϩΫωϜ
   !@SPDLOBNF
   ࣗݾ঺հ
   !SPDLOBNF
   

   View Slide

3. 
   %ZOBNJDDPMPSͱ͸ʁ
   IUUQTNBUFSJBMJPCMPHTUBSUCVJMEJOHXJUINBUFSJBMZPV
   

   View Slide

4. 
   "OBUPNZPG%ZOBNJDDPMPS
   %ZOBNJDDPMPSಋೖͷഎܠ
   ίϯτϥετͷे෼ͳ഑৭ͷಈతͳੜ੒
   )BSNPOJPVTDVTUPNDPMPS
   %ZOBNJDDPMPSͷΞϓϦ΁ͷద༻
   "HFOEB
   

   View Slide

5. ίʔυ͸΄΅ग़͖ͯ·ͤΜ🙏
   

   View Slide

6. %ZOBNJDDPMPSಋೖͷഎܠ
   

   View Slide

7. 
   %ZOBNJDDPMPSಋೖͷഎܠ
   ೥ൃද౰࣌ͷ.BUFSJBM%FTJHO
   IUUQTXXXZPVUVCFDPNXBUDI WCJ4QW9#(Q&
   

   View Slide

8. 
   %ZOBNJDDPMPSಋೖͷഎܠ
   IUUQTXXXHJ[NPEPKQBOESPJENBUFSJBMZPVIUNM
   

   View Slide

9. 
   %ZOBNJDDPMPSಋೖͷഎܠ
   IUUQTXXXZPVUVCFDPNXBUDI W9''SBIE0.
   .BUFSJBM:PV
   

   View Slide

10. 
    %ZOBNJDDPMPSಋೖͷഎܠ
    .BUFSJBM%FTJHO.BUFSJBM:PV%ZOBNJDDPMPS
    

    View Slide

11. 
    .BUFSJBM%FTJHOͷ؍఺͔ΒݟΔ%ZOBNJDDPMPS
    IUUQTNNBUFSJBMJPTUZMFTDPMPSEZOBNJDDPMPSVTFSHFOFSBUFEDPMPS
    

    View Slide

12. 
    .BUFSJBM%FTJHOͷ؍఺͔ΒݟΔ%ZOBNJDDPMPS
    IUUQTXXXZPVUVCFDPNXBUDI W9''SBIE0.
    

    View Slide

13. ίϯτϥετͷे෼ͳ഑৭ͷಈతͳੜ੒
    

    View Slide

14. 
    8$"(ͷΧϥʔίϯτϥετ
    จࣈͷ৭ͱഎܠ৭ͷؒʹগͳ͘ͱ΋ͷίϯτϥετൺ͕͋Δ͜ͱ
    ͨͩ͠ɺ
    

    ʮQYҎ্ͷςΩετ·ͨ͸QYҎ্ͷଠࣈͷςΩετʯʹ͓͍ͯ͸
    

    গͳ͘ͱ΋ͷίϯτϥετൺ͕͋Ε͹Α͍
    8$"( 8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT
    ͷίϯτϥετୡ੒ج४
    

    View Slide

15. 
    ίϯτϥετൺͷܭࢉํ๏
    ৭֮ଟ༷ੑΛߟྀ͢Δͱ
    

    ίϯτϥετͷܭࢉʹ৭૬Λ༻͍Δ͜ͱ͸ݱ࣮తͰ͸ͳ͍
    IUUQTUTVUBXBSVEFTJHODPNVOJWFSTBMIUNM
    

    View Slide

16. 
    ίϯτϥετൺͷܭࢉํ๏
    ً౓΍໌౓ͱ͍ͬͨ৭ʹΑͬͯਓ͕ؒೝࣝ͢Δ໌Δ͞ͷҧ͍Λར༻ͨ͠
    

    ίϯτϥετൺͷܭࢉ
    IUUQTUTVUBXBSVEFTJHODPNVOJWFSTBMIUNM
    

    View Slide

17. 
    ίϯτϥετൺͷܭࢉࣜ
    -
    -
    
    

    View Slide

18. 
    ૬ରً౓ͷܭࢉࣜ
    -3(#
    

    View Slide

19. 
    ૬ରً౓ͷܭࢉࣜ
    3T3(#ͷ৔߹33T3(#
    

    ͦ͏Ͱͳ͍৔߹3 3T3(#
    
    ?
    (T3(#ͷ৔߹((T3(#
    

    ͦ͏Ͱͳ͍৔߹( (T3(#
    
    ?
    #T3(#ͷ৔߹##T3(#
    

    ͦ͏Ͱͳ͍৔߹# #T3(#
    
    ?
    

    View Slide

20. 
    ΨϯϚิਖ਼
    ΨϯϚิਖ਼ʹΑΔ৭ͷඇઢܗԽ
    IUUQTXXXFJ[PDPKQFJ[PMJCSBSZPUIFSJUNFEJB@
    

    View Slide

21. 
    )4-৭ۭؒ
    w )VF ৭૬
    
    

    ৭ຯΛ͔Β౓·Ͱͷ֯౓Ͱද͠ɺ౓͸੺
    Λɺ౓͸྘ɺ౓͸੨Λද͍ͯ͠Δ
    w 4BUVSBUJPO ࠼౓
    
    

    ৭ͷ઱΍͔͞Λද͠ɺ͕࠷΋઱΍͔ͳ७
    ৭ͱͳΔ
    w -JHIUOFTT ً౓
    
    

    ໌Δ͞Λද͠ɺͰനɺͰ७৭ɺͰ
    ࠇͱͳΔ
    )4-৭ۭؒ
    IUUQTFOXJLJQFEJBPSHXJLJ)4-@BOE@)47
    

    View Slide

22. 
    )4-৭ۭؒ
    )4-৭ۭؒ͸৭૬ʹΑΔ໌Δ͞ͷҧ͍ΛදݱͰ͖͍ͯͳ͍
    IUUQTHJHB[JOFOFUOFXTIDMDPMPSTQBDF
    

    View Slide

23. 
    )4-৭ۭؒ
    )4-৭ۭؒ͸୯Ұͷ৭૬ʹ͓͚Δ໌Δ͞ͷมԽΛ௚ઢతʹදݱͰ͖͍ͯͳ͍
    IUUQTHJHB[JOFOFUOFXTIDMDPMPSTQBDF
    

    View Slide

24. 
    )4-৭ۭؒ
    )4-৭ۭؒ͸୯Ұͷ৭૬ʹ͓͚Δ໌Δ͞ͷมԽΛ௚ઢతʹදݱͰ͖͍ͯͳ͍
    IUUQTHJHB[JOFOFUOFXTIDMDPMPSTQBDF
    

    View Slide

25. 
    )$5৭ۭؒ
    w )VF ৭૬
    
    

    ৭ຯΛdͷ਺஋Ͱද͢
    w $ISPNB ࠼౓
    
    

    ৭ͷ઱΍͔͞Λdͷ਺஋Ͱද͢
    w 5POF τʔϯ
    
    

    ৭ͷ໌Δ͞Λdͷ਺஋Ͱද͠ɺͰ
    നɺͰࠇͱͳΔ
    (PPHMFͷ։ൃͨ͠)$5৭ۭؒ
    IUUQTNBUFSJBMJPCMPHTDJFODFPGDPMPSEFTJHO
    

    View Slide

26. 
    )$5৭ۭؒ
    )$5৭ۭؒͷτʔϯʹΑΔ໌Δ͞ͷਖ਼֬ͳ਺஋Խ
    IUUQTNBUFSJBMJPCMPHTDJFODFPGDPMPSEFTJHO
    

    View Slide

27. 
    )$5৭ۭؒ
    ίϯτϥετൺҎ্τʔϯࠩҎ্
    ίϯτϥετൺҎ্τʔϯࠩҎ্
    )$5৭ۭؒʹ͓͚Δ8$"(ͷίϯτϥετཁ݅
    

    View Slide

28. 
    %ZOBNJDDPMPSʹ͓͚ΔΧϥʔεΩʔϜੜ੒ͷΞϧΰϦζϜ
    IUUQTXXXZPVUVCFDPNXBUDI WDM%VRD,H/#2
    

    View Slide

29. 
    %ZOBNJDDPMPSʹ͓͚ΔΧϥʔεΩʔϜੜ੒ͷΞϧΰϦζϜ
    ྔࢠԽ
    IUUQTKBXJLJQFEJBPSHXJLJ৭ͷྔࢠԽ
    

    View Slide

30. 
    %ZOBNJDDPMPSʹ͓͚ΔΧϥʔεΩʔϜੜ੒ͷΞϧΰϦζϜ
    είΞϦϯά
    IUUQTXXXZPVUVCFDPNXBUDI WC'5%:S+83"
    

    View Slide

31. 
    %ZOBNJDDPMPSʹ͓͚ΔΧϥʔεΩʔϜੜ੒ͷΞϧΰϦζϜ
    ,FZDPMPSTͷੜ੒
    IUUQTXXXZPVUVCFDPNXBUDI WDM%VRD,H/#2
    

    View Slide

32. 
    ,FZDPMPSTͷੜ੒
    1SJNBSZ
    

    )VFιʔεΧϥʔͷ)VF
    

    $ISPNBιʔεΧϥʔͷ$ISPNB
    

    ͨͩ͠ΛԼճΔ৔߹͸ͱ͢Δ
    
    

    4FDPOEBSZ
    

    )VFιʔεΧϥʔͷ)VF
    

    $ISPNB
    5FSUJBSZ
    

    )VFιʔεΧϥʔͷ)VF
    

    $ISPNB
    ֤,ZFDPMPSͷ)VFͱ$ISPNB
    /FVUSBM
    

    )VFιʔεΧϥʔͷ)VF
    

    $ISPNB
    /FVUSBM7BSJBOU
    

    )VFιʔεΧϥʔͷ)VF
    

    $ISPNB
    

    View Slide

33. 
    %ZOBNJDDPMPSʹ͓͚ΔΧϥʔεΩʔϜੜ੒ͷΞϧΰϦζϜ
    5POBMQBMFUUFTͷੜ੒
    IUUQTXXXZPVUVCFDPNXBUDI WDM%VRD,H/#2
    

    View Slide

34. 
    %ZOBNJDDPMPSʹ͓͚ΔΧϥʔεΩʔϜੜ੒ͷΞϧΰϦζϜ
    .ͷΧϥʔεΩʔϜΛੜ੒
    IUUQTXXXZPVUVCFDPNXBUDI WDM%VRD,H/#2
    

    View Slide

35. )BSNPOJPVTDVTUPNDPMPS
    

    View Slide

36. 
    )BSNPOJPVTDVTUPNDPMPS
    4FNBOUJDDPMPS
    IUUQTNBUFSJBMJPCMPHEZOBNJDDPMPSIBSNPOZ
    

    View Slide

37. 
    )BSNPOJPVTDVTUPNDPMPS
    ஆ৭ͱפ৭
    IUUQTNBUFSJBMJPCMPHEZOBNJDDPMPSIBSNPOZ
    

    View Slide

38. 
    )BSNPOJPVTDVTUPNDPMPS
    ௐ࿨ͷऔΕͨ4FNBOUJDDPMPS
    IUUQTNBUFSJBMJPCMPHEZOBNJDDPMPSIBSNPOZ
    

    View Slide

39. 
    )BSNPOJPVTDVTUPNDPMPS
    )BSNPOJPVTDVTUPNDPMPSͷద༻
    IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNDVTUPNDPMPST
    

    View Slide

40. %ZOBNJDDPMPSͷΞϓϦ΁ͷద༻
    

    View Slide

41. View Slide

42. 7JTBϓϦϖΠυΧʔυʹνϟʔδͯ͠
    ࢧ෷͏ͱࢧग़͕ϦΞϧλΠϜʹՄࢹԽ͞Εͯ
    ʮ͋ͱ͍͘Β࢖͑Δʯ͕ͻͱ໨Ͱ෼͔Δ
    ͓ޓ͍ͷࢧ෷͍͸શͯ
    νϟʔδΛͨ͠ڞಉ࢒ߴ͔ΒҾ͖མͱ͞ΕΔͷͰ
    ύʔτφʔͱ;ͨΓͷڞಉՈܭ؅ཧΛ࣮ݱ
    

    View Slide

43. ϚΠΧʔυ
    ϖΞΧʔυ
    

    View Slide

44. 
    %ZOBNJDDPMPSͷΞϓϦ΁ͷద༻
    %ZOBNJDDPMPSରԠ˺.BUFSJBM%FTJHOରԠ
    IUUQTESPJELBJHJKQUJNFUBCMF
    

    View Slide

45. 
    .BUFSJBM5IFNF#VJMEFS
    .BUFSJBM5IFNF#VJMEFS
    IUUQTNNBUFSJBMJPUIFNFCVJMEFSDVTUPN
    

    View Slide

46. 
    .BUFSJBM5IFNF#VJMEFS
    .ͷΧϥʔεΩʔϜΛੜ੒
    

    View Slide

47. 
    .BUFSJBM5IFNF#VJMEFS
    .ͷΧϥʔεΩʔϜΛੜ੒
    

    View Slide

48. 
    .BUFSJBM5IFNF#VJMEFS
    .ͷΧϥʔεΩʔϜΛੜ੒
    

    View Slide

49. 
    %ZOBNJDDPMPSͷΞϓϦ΁ͷద༻
    .BUFSJBM%FTJHOͷσβΠϯτʔΫϯ
    IUUQTNNBUFSJBMJPGPVOEBUJPOTEFTJHOUPLFOTIPXUPSFBEUPLFOT
    

    View Slide

50. 
    %ZOBNJDDPMPSͷΞϓϦ΁ͷద༻
    %ZOBNJDDPMPSΛߟྀͨ͠.ͷΧϥʔεΩʔϜ΁ͷରԠ
    IUUQTXXXZPVUVCFDPNXBUDI WCHV;+X)RT2
    

    View Slide

51. 
    $PNQPOFOUUPLFOͷσϑΥϧτ஋
    طଘΞϓϦʹ͓͚Δ$PNQPOFOUUPLFO΁ͷରԠ
    IUUQTNNBUFSJBMJPDPNQPOFOUTBMMCVUUPOT
    

    View Slide

52. 
    $PNQPOFOUUPLFOͷσϑΥϧτ஋
    4UZMFUPLFOͷ୅ସ
    IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNDPMPSSPMFT
    

    View Slide

53. 
    %ZOBNJDDPMPSͰੜ੒͞ΕΔ֤৭ͷؔ܎
    1SJNBSZ4FDPOEBSZ
    

    View Slide

54. 
    %ZOBNJDDPMPSͰੜ੒͞ΕΔ֤৭ͷؔ܎
    .BUFSJBM%FTJHOʹ͓͚Δ&MFWBUJPO
    IUUQTNBUFSJBMJPEFTJHOFOWJSPONFOUFMFWBUJPOIUNM IUUQTNBUFSJBMJPEFTJHODPMPSEBSLUIFNFIUNM
    

    View Slide

55. 
    %ZOBNJDDPMPSͰੜ੒͞ΕΔ֤৭ͷؔ܎
    .BUFSJBM%FTJHOͷ৽͍͠&MFWBUJPO
    IUUQTNNBUFSJBMJPTUZMFTDPMPSUIFDPMPSTZTUFNDPMPSSPMFT
    

    View Slide

56. 
    $VTUPNDPMPS
    #ΞϓϦͷ$VTUPNDPMPS
    

    View Slide

57. 
    $VTUPNDPMPS
    $VTUPNDPMPSͷ௥Ճ
    

    View Slide

58. 
    $VTUPNDPMPS
    $VTUPNDPMPSͷ௥Ճ
    

    View Slide

59. 
    $VTUPNDPMPS
    $VTUPNDPMPSͷ௥Ճ
    

    View Slide

60. 
    $VTUPNDPMPS
    $VTUPNDPMPSͷ༻๏ɾ༻ྔ
    

    View Slide

61. 
    $VTUPNDPMPS
    $VTUPNDPMPSͷ༻๏ɾ༻ྔ
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. 
    %ZOBNJDDPMPS༻ͷ5IFNFΛ௥Ճ
    

    View Slide

67. 
    %ZOBNJDDPMPS༻ͷ5IFNFΛ௥Ճ
    

    View Slide

68. 
    %ZOBNJDDPMPS༻ͷ5IFNFʹ$VTUPNDPMPSΛ௥Ճ
    

    View Slide

69. 
    %ZOBNJDDPMPSͷద༻
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. 
    )BSNPOJPVTDVTUPNDPMPS
    

    View Slide

74. 
    )BSNPOJPVTDVTUPNDPMPS
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. ·ͱΊ
    

    View Slide

81. 
    ·ͱΊ
    w %ZOBNJDDPMPS͸ΑΓύʔιφϥΠζ͞ΕͨମݧͷఏڙΛՄೳͱ͢Δػ
    ೳ
    w ίϯτϥετͷे෼ͳ഑৭Λಈతʹੜ੒Ͱ͖ΔΑ͏ʹɺ(PPHMF͸ਓؒͷ
    ஌֮͢Δ৭ΛΑΓਖ਼֬ʹදݱͰ͖Δ)$5৭ۭؒΛ։ൃͯ͠%ZOBNJD
    DPMPSͷػೳΛ࣮૷
    w %ZOBNJDDPMPSͷιʔεΧϥʔʹ৭૬Λ͚ۙͮΔ͜ͱͰௐ࿨ͷऔΕͨ
    $VTUPNDPMPSͷಋೖΛ࣮ݱ
    w طଘΞϓϦ΁%ZOBNJDDPMPSͷద༻Λߟ͑Δ্Ͱ͸.ͷσβΠϯτʔΫ
    ϯͱ%ZOBNJDDPMPSͷΞϧΰϦζϜΛҙࣝ͢Δ͜ͱ͕ॏཁ
    

    View Slide

82. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    
    

    View Slide