あなたのアプリ、✨リブランディング✨できますか？ / iosdc2020

iOSDC 2020 2020/09/20 LT

Transcript

1. @monoqloʢ΋ͷ͘Ζʣ ͋ͳͨͷΞϓϦɺ ✨ϦϒϥϯσΟϯά✨Ͱ͖·͔͢ʁ iOSDC TOKYO 2020
3. 2020೥9݄1೔
4. 2020೥9݄1೔
7. ৼΓฦͬͯΈΔͱ…
8. 2019೥11݄27೔ ໿10ϲ݄લ
10. 2018೥12݄5೔ ͞Βʹ໿1೥લ
11. λΫϕϧϦϦʔε͔Β໿8ϲ݄ޙ
12. ຖ೥ϦχϡʔΞϧ ͯ͠Δ΍Μ͚
13. དྷ೥΋ϦχϡʔΞϧ ͋ΔͷͰ͸…
14. ϦϒϥϯσΟϯά
    ʹޮ͘ॲํᝦબ⚕
15. ॳ਍
16. ϦϒϥϯσΟϯάͰ৭Λ શ෦ม͑Δͷ͕ͭΒͯ͘… ৭Λ௚ࢦఆ͍ͯ͠Δ Storyboard΋150΄Ͳ… ॳ਍
17. ⚕ʮαϙʔτOSόʔδϣϯ͸͍ͭ͘Ͱ͔͢ʯ ʮ࣮͸iOS 10Ҏ߱Ͱͯ͠…ʯ ⚕ʮॏ঱Ͱ͢ɻ͍·͙͢੾আ͠·͠ΐ͏ɻʯ ໰਍
18. StoryboardΛ࢖͏ͳΒαϙʔτ͢Δͷ͸iOS 11Ҏ߱ʹ Asset CatalogͰ৭؅ཧΛ ॲํᝦ
21. Asset Catalog্ͷ৭Λมߋ͢Δͱ Ϗϧυ͞ΕͨΞϓϦ͸Storyboard্ͷ৭΋੾ΓସΘΔ
22. ͪͳΈʹ…
23. ͪͳΈʹ…
24. ͪͳΈʹ…
25. ͪͳΈʹ…
26. ͪͳΈʹ…
27. ͪͳΈʹ…
28. ؾʹͳΔਓ͸͋ͱͰ εϥΠυݟ͍ͯͩ͘͞
29. ਍ྍ#2
30. ը૾ͷࠩ͠ସ͕͑ඞཁͳΜͰ͕͢ɺ Կ౓΋ࠩ͠ସ͕͑ൃੜ͍ͯͯ͠… ਍ྍ#2
31. ⚕ʮͪͳΈʹը૾໊ͬͯͪΌΜͱ؅ཧͰ͖ͯ·͔͢ʁʯ ʮσβΠφʔ͕ͭͬͯ͘͘Εͨը૾ʹɺͪ͜ΒͰద౰ʹ ໊લ͚ͭͯొ࿥͢Δ͜ͱ΋͋Γ·͢Ͷʯ ⚕ʮΊͪΌͪ͘Όඇޮ཰ͳͷͰ΍Ί͍ͯͩ͘͞ʯ ໰਍
32. ॲํᝦ ໋໊نଇࡦఆ ex. ΞΠίϯͳΒ ic_xxx_yyy , ΠϥετͳΒ illust_xxx_yyy ͱ͔ Zeplin͔ΒͷҰׅΤΫεϙʔτͰߋ৽ టष͘৽چը૾໊ରԠද.csvͭͬͯ͘ɺεΫϦϓτॻ͍ͯஔ͖׵͑ͨΓ΋͚ͨ͠Ͳɺ͕࣌ؒͳ͍ͷͰͦͷ࿩͸লུ
36. ͨͩ͠…
37. ଥڠͱ޻෉͸ඞཁ
38. લఏ ը૾αΠζ͸ม͑ͳ͍ ϨΠΞ΢τʹӨڹ͕͋Δ΋ͷ͸ݸผʹࠩ͠ସ͑
39. 1ͭͷ໊લʹରͯ͠1ͭͷը૾͔͠ొ࿥Ͱ͖ͳ͍
40. 1ͭͷ໊લʹରͯ͠1ͭͷը૾͔͠ొ࿥Ͱ͖ͳ͍
41. 1ͭͷ໊લʹରͯ͠1ͭͷը૾͔͠ొ࿥Ͱ͖ͳ͍ ࢖͑ͳ͍
42. • Appearance μʔΫϞʔυରԠͰ͖ͳ͍… • Slicing Contents.jsonͷimages͕·Δ͝ͱஔ͖׵ΘΔͷͰϦηο τ͞ΕΔ ಛʹͭΒ͍΋ͷ
43. "images" : [ { - "idiom" : "universal", - "filename" : "company_noimage_outlined.pdf" + "filename" : "company_noimage_outlined.pdf", + "idiom" : "universal" } "images" : [ { - "filename" : "radio_unselected.pdf", - "idiom" : "universal" + "idiom" : "universal", + "filename" : "radio_unselected.pdf" } ΤΫεϙʔτͰ༨ܭͳdiff͕ൃੜ
44. େ൒ͷը૾ࠩ͠ସ͕͑ඞཁʹͳͬͯ΋… ݕࡧͰ͖Δ͠ը૾Λݟ͚ͭΔͷ͕؆୯ ·Δ͝ͱஔ͖׵͑Δ͚ͩͰྑ͍ ը૾Λݟ͚ͭΔͷ΋؅ཧ΋େมʢiOSͱAndroidͰ΋ ἧ͍ͬͯͳ͍͠…ʣ ͻͱͭͻͱͭஔ͖׵͑Δͷ΋खؒ
45. ਍ྍ#3
46. ࣮૷࣌ʹ ϑΥϯταΠζΛ ؒҧ͕͑ͪͰ… ਍ྍ#3
47. ⚕ʮσβΠϯࢦఆ΋ͬͱڽࢹ͍ͯͩ͘͠͞ʯ ʮͭΒ͍ɻԿݸ΋ݟͯΔͱήγϡλϧτ่յ͠·͢…ʯ ⚕ʮΘ͔Δʯ ʮ> Θɹ͔ɹΔ <ʯ ⚕ʮͰ͸֤αΠζʹ໊લΛ͚ͭͯΈͯ͸͍͔͕Ͱ͠ΐ͏ʯ ໰਍
48. ॲํᝦ ֤ϑΥϯταΠζ͝ͱʹɺ૬ରతʹαΠζײͷΘ͔Δ໋໊
49. title, subTitle, headline, body,… ͏ʔΜ… ࠔΓͦ͏ͳέʔε • ʮ͜͜͸… subTItle… ͳͷ͔ʁʯ • ʮ৽͍͠ཁૉΛͲΜͲΜ଍͍͖ͯͦ͠͏…ʯ
50. title, subTitle, headline, body,… ͏ʔΜ… ࠔΓͦ͏ͳέʔε • ʮ͜͜͸… subTItle… ͳͷ͔ʁʯ • ʮ৽͍͠ཁૉΛͲΜͲΜ଍͍͖ͯͦ͠͏…ʯ
53. ੜ͖෺໊Λ࠾༻ • ϝδϟʔͳੜ͖෺ͷେ͖͞͸ɺ૬ରతʹΠϝʔδ͠΍͍͢ < • ෯Λ͓͚࣋ͨͤͯ͹ɺதؒʹ૿΍ͨ͘͠ͳͬͯ΋ରԠͰ͖Δ • ֆจࣈͰදݱͰ͖Δੜ͖෺ͳΒࢹೝੑ΋ྑ͍ mouse rabbit dog monkey sheep bear elephant
57. public enum TextStyle { case mouse(FontWeight = .regular) // 12 case rabbit(FontWeight = .regular) // 13 case dog(FontWeight = .regular) // 14 case monkey(FontWeight = .regular) // 17 case sheep(FontWeight = .regular) // 19 case bear(FontWeight = .regular) // 23 case elephant(FontWeight = .regular) // 33 internal var font: UIFont { // ֤caseͷϑΥϯτΛฦ͢ return .systemFont(ofSize: size, weight: weight) } } ίʔυ্ͷϑΥϯτఆٛʢεϥΠυ༻ʹ؆ུԽͯ͠·͢ʣ public enum FontWeight { case regular case heavy fileprivate var value: UIFont.Weight { switch self { case .regular: return .regular case .heavy: return .heavy } } }
58. ⚕ 3ͭ঺հͨ͠ΜͰ͕͢…
59. ۓٸ֎དྷ One more thing…
60. Ծը૾ͷ··ϦϦʔε ͦ͠͏ʹͳͬͯ͠·ͬͯ… ۓٸ ֎དྷ
61. ⚕ʮීஈͷ༷ࢠΛڭ͑ͯ΋Β͑·͔͢ʯ ʮΞϓϦ಺ͷผͷը૾ΛͱΓ͋͑ͣηοτ͓͍ͯͨ͠ ΓɺσβΠϯ্ͷԾը૾͕͋Ε͹ͦΕΛೖΕͨΓ…ʯ ⚕ʮ๨Εͯ΋ແཧͳ͍Ͱ͢ͶɻίϯύΠϥͷྗΛआΓ· ͠ΐ͏ʯ ໰਍
62. ॲํᝦ σόοάϏϧυͰͷΈఆٛ͞ΕΔUIImageͷextension
63. #if DEBUG extension UIImage { @available(iOS, deprecated, message: "temporary() is temporary image. it needs to be fixed") func temporary() -> UIImage { return self } } #endif UIImage+Temporary
64. Debug Release
65. ࣗݾ঺հ
66. @monoqloʢ΋ͷ͘Ζʣ • Mobility Technologies Ͱಇ͍ͯΔਓ • 1ϲ݄લ͔ΒFF14ΛΏΔ;ΘϓϨΠத @ElementalDC/Atomos Ξόλʔ͕͔Θ͍ͯ͘ϩάΠϯ͢Δͨͼ ʹQoL্͕Δ☺
67. @monoqloʢ΋ͷ͘Ζʣ • Mobility Technologies Ͱಇ͍ͯΔਓ • 1ϲ݄લ͔ΒFF14ΛΏΔ;ΘϓϨΠத @ElementalDC/Atomos Ξόλʔ͕͔Θ͍ͯ͘ϩάΠϯ͢Δͨͼ ʹQoL্͕Δ☺
68. APPENDIX
69. iOS 10ҎԼΛ αϙʔτͯ͠ΔΞϓϦ ௐ΂ͯΈ·ͨ͠
70. 32/100 ແྉAppϥϯΩϯάϕετ100 2020/09/19࣌఺
72. ը૾ҰׅΤΫεϙʔτ࣮ݱʹ޲͚ͨటष͍ࣄલ४උ JNBHF@OBNFTDTW JDPO@DBODFM@UBYJ JD@DBODFMUBYJ@NBJODPMPS JDPO@DBTI JD@DBTI@NBJODPMPS JDPO@DIFDL@TFMFDUFE JD@DIFDL@DJSDMF@pMM@NBJODPMPS JDPO@DIFDL JD@DIFDL@DJSDMF@PVUMJOFE@EJTBCMF DBSECSBOE@VOLOPXO@9- JD@DSFEJUDBSE@pMM@YM@HSBZ DPVQPO JMMVTU@DPVQPO@CBOOFS ৽چը૾໊ରԠද.csvΛ࡞੒ ஔ׵εΫϦϓτΛͭͬͯࠩ͘͠ସ͑
73. require "csv" if ARGV.count != 2 then puts "Ҿ਺ͷ਺͕ਖ਼͋͘͠Γ·ͤΜɻ" puts "ୈ1Ҿ਺ʹ ஔ׵͍ͨ͠ը૾໊ҰཡcsvϑΝΠϧ ͷpathΛɺୈ2Ҿ਺ʹ Storyboard/xib ؚ͕·ΕΔσΟϨΫτϦͷpathΛ༩͍͑ͯͩ͘͞ɻ" exit end image_names_path = ARGV[0] if File.extname(image_names_path) != ".csv" then puts "ୈ1Ҿ਺ʹࢦఆ͞ΕͨϑΝΠϧ͸csvϑΝΠϧͰ͸͋Γ·ͤΜɻਖ਼͍͠ϑΝΠϧΛࢦఆ͍ͯͩ͘͠͞ɻ" exit end root_path = ARGV[1] image_names = CSV.read(image_names_path) image_names.each { |names| old_name = names[0] new_name = names[1] next if new_name.nil? || old_name.nil? puts "#{old_name} => #{new_name}" [ ["<image name=\"#{old_name}\"", "<image name=\"#{new_name}\""], ["value=\"#{old_name}\"", "value=\"#{new_name}\""], ["image=\"#{old_name}\"", "image=\"#{new_name}\""], ["R.image.#{old_name}()", "R.image.#{new_name}()"] ].each { |texts| command = "grep -lr '#{texts.first}' #{root_path} | xargs sed -i '' -e 's/#{texts.first}/#{texts.last}/g'" system(command) } } puts "Completed!" ը૾໊ ৽چ ஔ׵εΫϦϓτ.rb
74. ϏοτϚοϓͱϕΫλʔ͸ScreenΛ෼͚Δ
76. PNGʹPDFʹ͍ͨ͠ը૾΋ؚ· Εͯ͠·͏ͷͰɺ ͍ࠞͬͯ͟ΔͱPNG͚ͩͷҰׅ ΤΫεϙʔτ͕Ͱ͖ͳ͍
77. ࠷ޙʹେ੾ͳ͜ͱ
78. σβΠφʔͱڠྗ͠Α͏
79. • ܰඍͳ৭/ը૾मਖ਼ͳΒσβΠφʔࣗΒ֬ೝͰ͖Δମ੍Λͭ͘Δ • ৭ͬͯඍௐ੔͕ͪ͠ • ౎౓ΤϯδχΞ͕Ϗϧυͯ͠഑෍ͨ͠Γݟͤʹ͍͔ͳͯ͘ྑ ͍ͷͰߴޮ཰ • GitHubͷwikiʹඇΤϯδχΞ޲͚ϏϧυϚχϡΞϧ΋੔උ • λʔϛφϧॳ࢖༻Ͱ΋ɺgitͷ஌͕ࣝͳͯ͘΋ɺϏϧυͰ͖Δ ֬ೝαΠΫϧΛૣ͘ճ͢͜ͱ΋ॏཁ