Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

monoqlo
September 20, 2020

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

iOSDC 2020 2020/09/20 LT

monoqlo

September 20, 2020
Tweet

More Decks by monoqlo

Other Decks in Technology

Transcript

  1. @monoqloʢ΋ͷ͘Ζʣ
    ͋ͳͨͷΞϓϦɺ
    ✨ϦϒϥϯσΟϯά✨Ͱ͖·͔͢ʁ
    iOSDC TOKYO 2020

    View Slide

  2. View Slide

  3. 2020೥9݄1೔

    View Slide

  4. 2020೥9݄1೔

    View Slide

  5. View Slide

  6. View Slide

  7. ৼΓฦͬͯΈΔͱ…

    View Slide

  8. 2019೥11݄27೔
    ໿10ϲ݄લ

    View Slide

  9. View Slide

  10. 2018೥12݄5೔
    ͞Βʹ໿1೥લ

    View Slide

  11. λΫϕϧϦϦʔε͔Β໿8ϲ݄ޙ

    View Slide

  12. ຖ೥ϦχϡʔΞϧ
    ͯ͠Δ΍Μ͚

    View Slide

  13. དྷ೥΋ϦχϡʔΞϧ
    ͋ΔͷͰ͸…

    View Slide

  14. ϦϒϥϯσΟϯά
    ʹޮ͘ॲํᝦબ⚕

    View Slide

  15. ॳ਍

    View Slide

  16. ϦϒϥϯσΟϯάͰ৭Λ
    શ෦ม͑Δͷ͕ͭΒͯ͘…
    ৭Λ௚ࢦఆ͍ͯ͠Δ
    Storyboard΋150΄Ͳ…

    ॳ਍

    View Slide

  17. ⚕ʮαϙʔτOSόʔδϣϯ͸͍ͭ͘Ͱ͔͢ʯ
    ʮ࣮͸iOS 10Ҏ߱Ͱͯ͠…ʯ
    ⚕ʮॏ঱Ͱ͢ɻ͍·͙͢੾আ͠·͠ΐ͏ɻʯ
    ໰਍

    View Slide

  18. StoryboardΛ࢖͏ͳΒαϙʔτ͢Δͷ͸iOS 11Ҏ߱ʹ
    Asset CatalogͰ৭؅ཧΛ
    ॲํᝦ

    View Slide

  19. View Slide

  20. View Slide

  21. Asset Catalog্ͷ৭Λมߋ͢Δͱ
    Ϗϧυ͞ΕͨΞϓϦ͸Storyboard্ͷ৭΋੾ΓସΘΔ

    View Slide

  22. ͪͳΈʹ…

    View Slide

  23. ͪͳΈʹ…

    View Slide

  24. ͪͳΈʹ…

    View Slide

  25. ͪͳΈʹ…

    View Slide

  26. ͪͳΈʹ…

    View Slide

  27. ͪͳΈʹ…

    View Slide

  28. ؾʹͳΔਓ͸͋ͱͰ
    εϥΠυݟ͍ͯͩ͘͞

    View Slide

  29. ਍ྍ#2

    View Slide

  30. ը૾ͷࠩ͠ସ͕͑ඞཁͳΜͰ͕͢ɺ
    Կ౓΋ࠩ͠ସ͕͑ൃੜ͍ͯͯ͠…

    ਍ྍ#2

    View Slide

  31. ⚕ʮͪͳΈʹը૾໊ͬͯͪΌΜͱ؅ཧͰ͖ͯ·͔͢ʁʯ
    ʮσβΠφʔ͕ͭͬͯ͘͘Εͨը૾ʹɺͪ͜ΒͰద౰ʹ
    ໊લ͚ͭͯొ࿥͢Δ͜ͱ΋͋Γ·͢Ͷʯ
    ⚕ʮΊͪΌͪ͘Όඇޮ཰ͳͷͰ΍Ί͍ͯͩ͘͞ʯ
    ໰਍

    View Slide

  32. ॲํᝦ
    ໋໊نଇࡦఆ ex. ΞΠίϯͳΒ ic_xxx_yyy , ΠϥετͳΒ illust_xxx_yyy ͱ͔
    Zeplin͔ΒͷҰׅΤΫεϙʔτͰߋ৽
    టष͘৽چը૾໊ରԠද.csvͭͬͯ͘ɺεΫϦϓτॻ͍ͯஔ͖׵͑ͨΓ΋͚ͨ͠Ͳɺ͕࣌ؒͳ͍ͷͰͦͷ࿩͸লུ

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. ͨͩ͠…

    View Slide

  37. ଥڠͱ޻෉͸ඞཁ

    View Slide

  38. લఏ
    ը૾αΠζ͸ม͑ͳ͍
    ϨΠΞ΢τʹӨڹ͕͋Δ΋ͷ͸ݸผʹࠩ͠ସ͑

    View Slide

  39. 1ͭͷ໊લʹରͯ͠1ͭͷը૾͔͠ొ࿥Ͱ͖ͳ͍

    View Slide

  40. 1ͭͷ໊લʹରͯ͠1ͭͷը૾͔͠ొ࿥Ͱ͖ͳ͍

    View Slide

  41. 1ͭͷ໊લʹରͯ͠1ͭͷը૾͔͠ొ࿥Ͱ͖ͳ͍
    ࢖͑ͳ͍

    View Slide

  42. • Appearance
    μʔΫϞʔυରԠͰ͖ͳ͍…
    • Slicing
    Contents.jsonͷimages͕·Δ͝ͱஔ͖׵ΘΔͷͰϦηο
    τ͞ΕΔ
    ಛʹͭΒ͍΋ͷ

    View Slide

  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͕ൃੜ

    View Slide

  44. େ൒ͷը૾ࠩ͠ସ͕͑ඞཁʹͳͬͯ΋…
    ݕࡧͰ͖Δ͠ը૾Λݟ͚ͭΔͷ͕؆୯
    ·Δ͝ͱஔ͖׵͑Δ͚ͩͰྑ͍
    ը૾Λݟ͚ͭΔͷ΋؅ཧ΋େมʢiOSͱAndroidͰ΋
    ἧ͍ͬͯͳ͍͠…ʣ
    ͻͱͭͻͱͭஔ͖׵͑Δͷ΋खؒ

    View Slide

  45. ਍ྍ#3

    View Slide

  46. ࣮૷࣌ʹ
    ϑΥϯταΠζΛ
    ؒҧ͕͑ͪͰ…

    ਍ྍ#3

    View Slide

  47. ⚕ʮσβΠϯࢦఆ΋ͬͱڽࢹ͍ͯͩ͘͠͞ʯ
    ʮͭΒ͍ɻԿݸ΋ݟͯΔͱήγϡλϧτ่յ͠·͢…ʯ
    ⚕ʮΘ͔Δʯ
    ʮ> Θɹ͔ɹΔ <ʯ
    ⚕ʮͰ͸֤αΠζʹ໊લΛ͚ͭͯΈͯ͸͍͔͕Ͱ͠ΐ͏ʯ
    ໰਍

    View Slide

  48. ॲํᝦ
    ֤ϑΥϯταΠζ͝ͱʹɺ૬ରతʹαΠζײͷΘ͔Δ໋໊

    View Slide


  49. title, subTitle, headline, body,… ͏ʔΜ…
    ࠔΓͦ͏ͳέʔε
    • ʮ͜͜͸… subTItle… ͳͷ͔ʁʯ
    • ʮ৽͍͠ཁૉΛͲΜͲΜ଍͍͖ͯͦ͠͏…ʯ

    View Slide


  50. title, subTitle, headline, body,… ͏ʔΜ…
    ࠔΓͦ͏ͳέʔε
    • ʮ͜͜͸… subTItle… ͳͷ͔ʁʯ
    • ʮ৽͍͠ཁૉΛͲΜͲΜ଍͍͖ͯͦ͠͏…ʯ

    View Slide

  51. View Slide

  52. View Slide

  53. ੜ͖෺໊Λ࠾༻
    • ϝδϟʔͳੜ͖෺ͷେ͖͞͸ɺ૬ରతʹΠϝʔδ͠΍͍͢
    <
    • ෯Λ͓͚࣋ͨͤͯ͹ɺதؒʹ૿΍ͨ͘͠ͳͬͯ΋ରԠͰ͖Δ
    • ֆจࣈͰදݱͰ͖Δੜ͖෺ͳΒࢹೝੑ΋ྑ͍
    mouse rabbit dog monkey sheep bear elephant

    View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  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
    }
    }
    }

    View Slide


  58. 3ͭ঺հͨ͠ΜͰ͕͢…

    View Slide

  59. ۓٸ֎དྷ
    One more thing…

    View Slide

  60. Ծը૾ͷ··ϦϦʔε
    ͦ͠͏ʹͳͬͯ͠·ͬͯ…
    ۓٸ
    ֎དྷ

    View Slide

  61. ⚕ʮීஈͷ༷ࢠΛڭ͑ͯ΋Β͑·͔͢ʯ
    ʮΞϓϦ಺ͷผͷը૾ΛͱΓ͋͑ͣηοτ͓͍ͯͨ͠
    ΓɺσβΠϯ্ͷԾը૾͕͋Ε͹ͦΕΛೖΕͨΓ…ʯ
    ⚕ʮ๨Εͯ΋ແཧͳ͍Ͱ͢ͶɻίϯύΠϥͷྗΛआΓ·
    ͠ΐ͏ʯ
    ໰਍

    View Slide

  62. ॲํᝦ
    σόοάϏϧυͰͷΈఆٛ͞ΕΔUIImageͷextension

    View Slide

  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

    View Slide

  64. Debug
    Release

    View Slide

  65. ࣗݾ঺հ

    View Slide

  66. @monoqloʢ΋ͷ͘Ζʣ
    • Mobility Technologies Ͱಇ͍ͯΔਓ
    • 1ϲ݄લ͔ΒFF14ΛΏΔ;ΘϓϨΠத
    @ElementalDC/Atomos
    Ξόλʔ͕͔Θ͍ͯ͘ϩάΠϯ͢Δͨͼ
    ʹQoL্͕Δ☺

    View Slide

  67. @monoqloʢ΋ͷ͘Ζʣ
    • Mobility Technologies Ͱಇ͍ͯΔਓ
    • 1ϲ݄લ͔ΒFF14ΛΏΔ;ΘϓϨΠத
    @ElementalDC/Atomos
    Ξόλʔ͕͔Θ͍ͯ͘ϩάΠϯ͢Δͨͼ
    ʹQoL্͕Δ☺

    View Slide

  68. APPENDIX

    View Slide

  69. iOS 10ҎԼΛ
    αϙʔτͯ͠ΔΞϓϦ
    ௐ΂ͯΈ·ͨ͠

    View Slide

  70. 32/100
    ແྉAppϥϯΩϯάϕετ100 2020/09/19࣌఺

    View Slide

  71. View Slide

  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Λ࡞੒
    ஔ׵εΫϦϓτΛͭͬͯࠩ͘͠ସ͑

    View Slide

  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}"
    [
    ["["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

    View Slide

  74. ϏοτϚοϓͱϕΫλʔ͸ScreenΛ෼͚Δ

    View Slide

  75. View Slide

  76. PNGʹPDFʹ͍ͨ͠ը૾΋ؚ·
    Εͯ͠·͏ͷͰɺ
    ͍ࠞͬͯ͟ΔͱPNG͚ͩͷҰׅ
    ΤΫεϙʔτ͕Ͱ͖ͳ͍

    View Slide

  77. ࠷ޙʹେ੾ͳ͜ͱ

    View Slide

  78. σβΠφʔͱڠྗ͠Α͏

    View Slide

  79. • ܰඍͳ৭/ը૾मਖ਼ͳΒσβΠφʔࣗΒ֬ೝͰ͖Δମ੍Λͭ͘Δ
    • ৭ͬͯඍௐ੔͕ͪ͠
    • ౎౓ΤϯδχΞ͕Ϗϧυͯ͠഑෍ͨ͠Γݟͤʹ͍͔ͳͯ͘ྑ
    ͍ͷͰߴޮ཰
    • GitHubͷwikiʹඇΤϯδχΞ޲͚ϏϧυϚχϡΞϧ΋੔උ
    • λʔϛφϧॳ࢖༻Ͱ΋ɺgitͷ஌͕ࣝͳͯ͘΋ɺϏϧυͰ͖Δ
    ֬ೝαΠΫϧΛૣ͘ճ͢͜ͱ΋ॏཁ

    View Slide