快適なUIを持つアプリを作るために できること

1. շదͳUIΛ࣋ͭΞϓϦΛ࡞ΔͨΊʹ
 Ͱ͖Δ͜ͱ Muukii Pairs Global Team eureka, Inc.
2. About Me • Muukii <Hiroshi Kimura> • iOS Engineer at eureka, Inc. • Pairs Global Team • GitHub : @muukii • https://muukii.me ☕ ⌚
4. 1BJSTʹ͍ͭͯ !4
5. 4PVUI
   ,PSFB Japan Taiwan No.1 2017 release No.1 !5 1BJSTʹ͍ͭͯ ల։ࠃ ̐ͭͷϓϥοτϑΥʔϜ CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy
7. Agenda • Pairs Global iOS νʔϜɾϓϩδΣΫτͱͯ͠ • շదͳUIΛ࣋ͭΞϓϦΛ࡞ΔͨΊʹ΍͍ͬͯΔ͜ͱ • ߈Ί - Improve • ߴ଎ʹಈ࡞͢ΔUI ɾ ҆ఆͨ͠UI • कΓ - Maintain • ߈ΊʹΑ࣮ͬͯݱͨ͠UIͷ඼࣭Λܧଓͤ͞Δ
8. Improve
9. ໨ࢦ͢΂͖඼࣭ • Ϣʔβʔʹͱͬͯͷී௨͸Facebook, InstagramϨϕϧͷಈ࡞ • ൴Β͸ΞϓϦͱ͍͏Ϟϊͱͯ͠ͷࠜຊతͳج४Λ࡞Γ্͍͛ͯΔ • εϜʔζͳ࢖͍৺஍ • εΫϩʔϧ࣌ɾը໘ભҠ࣌ͷύϑΥʔϚϯε • ঢ়ଶɾ৘ใΛ҆ఆతʹਖ਼͘͠දࣔ
10. UI࣮૷ͷΞϓϩʔν • InterfaceBuilder͸Ұ੾࢖༻ͤͣίʔυϨΠΞ΢τ • AutoLayout͸EasyPeasyͱ͍͏ϥΠϒϥϦΛ࢖༻த • UIͷಈ࡞ύϑΥʔϚϯεʹ͓͚ΔϘτϧωοΫ͸AutoLayoutؔ࿈Ͱൃੜ͢Δ͜ͱ΋͋Δ • TextureGroup/TextureΛ࢖༻ (Pinterest͕։ൃ͠ɺ൴ΒͷϓϩμΫτͰશ໘తʹ࢖༻͍ͯ͠Δ) • పఈతʹඇಉظॲཧԽ͠ɺUI͕ඇৗʹߴ଎ʹͳΔେ͖ͳϥΠϒϥϦ • AutoLayoutͱͦͷ୅ସखஈʹ͍ͭͯൃදࢿྉ͕͋ΔͷͰΑ͚Ε͹͝ཡ͍ͩ͘͞ 
 https://speakerdeck.com/muukii0803/autolayoutyi-wai-falsexuan-ze-zhi
11. ঢ়ଶΛਖ਼͘͠දࣔ͢Δ • UIͷಈ࡞଎౓͸ॏཁ͕ͩɺݱࡏͷঢ়ଶΛਖ਼͘͠දࣔ͢Δ͜ͱ΋ॏཁ • 1ճͰ΋ҰॠͰ΋ؒҧͬͨঢ়ଶΛදࣔ͢Ε͹Ϣʔβʔ͸ࠞཚ͢Δ • Fluxͷ֓೦Λར༻͢Δ͜ͱͰෳࡶͳঢ়ଶΛ੔͑ͯViewʹදࣔ͢Δ͜ͱ͕Ͱ͖Δ • ͦΕͱಉ࣌ʹϝϯςφϯεੑͷ޲্΋ظ଴Ͱ͖Δ
12. ࣮ࡍͷΞϓϦͷಈ͖ • on iPhone7 • ࣸਅ͸දࣔͤͣɺϓϩϑΟʔϧ৘ใ͸μϛʔʹࠩ͠ସ͍͑ͯ·͢ɻ • ΄ͱΜͲͷಈ࡞ʹ͓͍ͯ60fpsʹ͍ۙ׈Β͔͕࣮͞ݱͰ͖͍ͯΔɻ
13. Maintain
14. UIͷෆ۩߹ͱݺ΂Δ΋ͷ • ظ଴௨Γಈ͍͍ͯͳ͍ (͜Ε͸౰વ) • ॲཧʹ͕͔͔࣌ؒΓUI͕ݻ·ͬͯ͠·͏ • UI͕ॠ࣌ʹԿ౓͔੾ΓସΘͬͯ͠·͏Α͏ͳνϥπΩ • σβΠϯ่Ε • ࢹೝੑɾ৘ใઃܭΛߟ͑ͯͷσβΠϯͰ͋ΔͨΊɺ่Ε͍ͯΕ͹UIͱͯ͠ຊདྷͷػೳΛఏڙͰ͖ͯ ͍ͳ͍ͱݴ͑Δ • ը૾ͷΞεϖΫτൺ͕ؒҧ͍ͬͯΔ • Not ϐΫηϧύʔϑΣΫτ • ΞΠίϯͷҰ෦͕͚ܽͯදࣔ͞Ε͍ͯΔ
15. ෆ۩߹Λى͜͞ͳ͍ͨΊʹ • ෆ۩߹͸ώϡʔϚϯΤϥʔʹΑͬͯى͜Δ͜ͱ΋͋Δ • ͦͷதʹ͸ʮಈ࡞֬ೝ͕໘౗ʯʹΑΔ΋ͷ΋ؚ·Εͯ͘Δ • ʮಈ࡞֬ೝͷͨΊʹ४උ͢Δ͜ͱ͕ଟ͍ɻʯͱ͔ • ؆୯ʹಈ࡞֬ೝΛߦ͑ΔΑ͏ʹ͢Δ͜ͱͰෆ۩߹ΛݮΒͤΔ • खؒͷഉআ • QAͷਓ΋ḿΔ
16. ։ൃऀϝχϡʔ ΞϓϦαΠυ • ΞϓϦىಈ࣌ʹΞϓϦͷಈ࡞ํ๏΍؀ڥΛબ୒͢Δը໘Λදࣔ
18. ઀ଓ͢ΔαʔόʔΛબ୒ • ຊ൪αʔόʔ ؖࠃɾ୆࿷ • ։ൃ༻αʔόʔ ؖࠃɾ୆࿷ • ϩʔΧϧ (localhost:8000ͳͲ) • ϚϧνϩάΠϯՄೳͳΞϓϦઃܭʹ͍ͯ͠ΔͨΊɺෳ਺Ϣʔβʔͷϩ άΠϯঢ়ଶΛอ࣋Մೳ & ϥϯλΠϜͰ੾Γସ͑Մೳ • ؀ڥมߋͷͨͼʹϏϧυ͠௚͢ඞཁ͸ͳ͠
19. ը໘αΠζͷมߋ • Application.windowͷαΠζΛڧҾʹมߋ͢Δػೳ • ׬શ࠶ݱ͸Ͱ͖ͳ͍͕ɺ5.5inchͷσόΠεΛ࢖༻͠ͳ͕Β΋4inch ͷը໘ͰUIΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ • খ͍͞ը໘Ͱ͸จࣈ͕੾Ε͍ͯͨΓɺ
 σβΠϯ͕ཚΕ͍ͯΔ͜ͱʹؾ͚ͮΔ
20. Ϗϧυʹؔ͢Δ৘ใ • ໰୊͕֬ೝ͞Εͨ৔߹ʹใࠂΛߦ͍΍͘͢͢ΔͨΊ • Ϗϧυ࣌ʹJSONΛ࡞ΓɺΞϓϦʹόϯυϧ͢Δख๏Λͱ͍ͬͯΔ Script: https://gist.github.com/muukii/cc655b0cf0d7986421725a5493c7f3d8
21. ։ൃऀϝχϡʔ ϏδωεϩδοΫαΠυ
22. • ΞϓϦΛར༻͠ͳ͕ΒαʔόʔͷϏδωεϩδοΫΛݺͼग़͢ (։ൃ؀ڥͷΈ) • ϢʔβʔΛ௕ԡ͠ -> Ϣʔβʔ(૬ख)ʹؔ͢ΔϝχϡʔΛදࣔ • ࣗ෼ʹʮ͍͍ͶʂʯΛૹ৴ • ࣗ෼ʹϝοηʔδΛૹ৴ • σόΠεΛγΣΠΫ -> Ϣʔβʔ(ࣗ෼)ʹؔ͢ΔϝχϡʔΛදࣔ • ձһঢ়ଶͷมߋ (ແྉɾ༗ྉ) • ͦͷଞ ঢ়ଶมߋ ։ൃऀϝχϡʔ ϏδωεϩδοΫαΠυ
23. GitHub PRʹ.appΛΞοϓϩʔυ • GitHubʹPR͕࡞੒͞ΕΔͱCI͕γϛϡϨʔλ༻ͷappΛϏϧυ • PRʹappϑΝΠϧͷμ΢ϯϩʔυϦϯΫ͕షΓ෇͚ΒΕΔ • μ΢ϯϩʔυͨ͠appϑΝΠϧ͸γϛϡϨʔλʹυϥοά&υϩοϓͰΠϯετʔϧՄೳ • ίʔυϨϏϡʔͰ͸Θ͔Βͳ͍࣮ࡍͷಈ࡞΍ݟͨ໨Λ֬ೝ͢Δ·Ͱͷૢ࡞͕୹ॖͰ͖Δ • γϛϡϨʔλ͸ෳ਺ىಈՄೳʹͳ͍ͬͯΔͷͰσόΠε͝ͱͷ֬ೝ΋؆୯ʹ • ؔ࿈هࣄ : https://bit.ly/2IhHOgl • CI͸ϏϧυΛ଎͘ߦ͍͍ͨͷͰࣾ಺ͷmac proͰಈ͔͍ͯ͠Δ • JenkinsͰ΋Α͔͚ͬͨͲɺڵຯຊҐͰ࡞ͬͨSwift੡ͷCIΛ࢖༻த… • https://github.com/eure/tower • (Jenkins, Travis, Bitrise, CircleCIͱ͔Ͱ͍͍ͱࢥ͏)
24. GitHub PRʹ.appΛΞοϓϩʔυ appϑΝΠϧͷμ΢ϯϩʔυϦϯΫ
25. γϛϡϨʔλ༻appϑΝΠϧΛ࡞Δ lane :simulator_build do base_path = `xcodebuild -workspace ../pairs-global.xcworkspace -scheme Pairs - arch x86_64 -sdk iphonesimulator -configuration Debug -showBuildSettings | grep - m 1 "CONFIGURATION_BUILD_DIR" | grep -oEi "\/.*"`.chomp() result = xcbuild( workspace: 'pairs-global.xcworkspace', scheme: 'Pairs', xcargs: '-arch x86_64 -sdk iphonesimulator -configuration Debug' ) File.join(base_path, "Pairs.app") end FastlaneΛ࢖ͬͨྫ ϏϧυΛߦ͍ɺ.appͷύε͕ฦ٫͞ΕΔlane
26. GitHubͷPRΛ୳͢Query query FindPullRequest( $owner: String!, $name: String!, $branch: String!) { repository(owner:$owner, name:$name) { pullRequests(first: 1, headRefName:$branch) { nodes { id, number }, totalCount, } } } { "owner" : "eure", "name" : "pairs-gl-ios", "branch" : "#{branch_name}" } GitHub API v4 GraphQL
27. ൃੜ͍ͯ͠Δෆ۩߹ʹؾͮͨ͘Ίʹ • ΞϓϦΛϦϦʔε͢Δ·Ͱʹग़དྷΔ͜ͱ͸ͨ͘͞Μ͋Δ͕ɺͦΕͰ΋ෆ۩߹ΛؚΜͩ··ϦϦʔε ͞Εͯ͠·͏͜ͱ͸͋Δ • ϦϦʔεޙɺϢʔβʔͷखݩͰൃੜ͍ͯ͠Δ໰୊ʹϢʔβʔ͔Βͷ͓໰͍߹ΘͤͰ͸ͳ͘ɺͪ͜Β ͔Βݕ஌Ͱ͖ΔΑ͏ʹ͓͕ͯ͘͠ॏཁ
28. CrashlyticsʹNon-Fatal-Errorͱͯ͠ΫϥογϡܥҎ֎ͷΤ ϥʔΛૹ৴͢Δ func log(error: Error) { Crashlytics.sharedInstance().recordError(error, withAdditionalUserInfo: nil) } CrashlyticsʹNon-Fatal-Errorͱͯ͠ΠϕϯτΛૹ৴͢Δίʔυྫ Crashlytics͸ࣗಈͰΫϥογϡϩάΛૹ৴͢ΔSDK͕ͩɺ։ൃऀ͕ࢦఆͨ͠ΠϕϯτΛΫϦςΟΧϧ Ͱ͸ͳ͍͕໰୊ͷ͋ΔΤϥʔ(Non-Fatal-Error)ͱͯ͠ૹ৴͢Δػೳ΋͍࣋ͬͯΔ
29. ՝ۚ͠ͳ͚Ε͹ϝοηʔδͷ ಺༰͸ݟΕͳ͍ɻ ϝοηʔδΛ։෧ϘλϯΛԡ ͢͜ͱ͕Ͱ͖Δ ։෧ϘλϯΛԡ͢ͱɺ՝ۚը ໘͕දࣔ͞ΕΔ(Ϟʔμϧ) ՝ۚͯ͠՝ۚը໘Λด͡Δͱ ϝοηʔδ͕දࣔ͞ΕΔ (σʔλͷ࠶ಡΈࠐΈ) ঢ়ଶ : ແྉձһ ঢ়ଶ : ༗ྉձһ
30. ԡͤͳ͍͸ͣͷϘλϯ͕ԡ͞Εͨ͜ͱΛݕ஌͢Δ let error = ..."ϝοηʔδ͸։෧Ͱ͖͍ͯΔ͸͔ͣͩΒ Ϙλϯ͸ԡͤͳ͍͸ͣ" log(error: error) ϘλϯΛλοϓ͞ΕͨλΠϛϯάͰঢ়ଶΛ֬ೝͯ͠ΤϥʔΛૹ৴͓ͯ͘͠ ྫ͑͹ɺʮ༗ྉձһͷϢʔβʔ͕։෧ϘλϯΛԡͯ͠͠·ͬͨʯ ͔͠͠ɺຊདྷ͸ϝοηʔδͷ಺༰͕දࣔ͞Ε͍ͯΔ͸ͣͳͷͰɺϘλϯ͸ԡͤͳ͍͸ͣɻ ErrorΦϒδΣΫτ͸CustomNSError ͱ, LocalizedErrorΛ࣮૷͢Δͱྑ͍
32. ϢʔβʔͷखݩͰൃੜ͍ͯ͠Δྫ֎ʹؾ͚ͮΔΑ͏ʹ ͳΔ • UIςετΛॻ͘ͷ΋ΞϦ͕ͩɺͦΕͰ΋ϢʔβʔͷखݩͰ͸Կ͕ى͖Δ͔Θ͔Βͳ͍ͷ͕ΞϓϦ։ ൃͷ୉ޣຯ • UIςετͰ͸ݕ஌Ͱ͖ͳ͍΋ͷ΋͋Δ • γφϦΦΛࣗ෼ͨͪͰ࡞͍ͬͯΔ͔Β • ϥϯλΠϜͰϢʔβʔ͕ߦͳͬͨಈ࡞͕࢓༷͔Β֎Ε͍ͯͳ͍͔ΛνΣοΫ͢ΔΑ͏ʹ͓ͯ͘͠ͱ ྑ͍ • ݕ஌ॲཧ͕େ͖ͳෛՙʹͳΒͳ͍Α͏ʹؾΛ͚ͭΔ
33. ϢʔβʔͷखݩͰൃੜ͍ͯ͠Δྫ֎ʹؾ͚ͮΔΑ͏ʹ ͳΔ • ҆ఆͨ͠UIΛ࣮ݱ͢ΔͨΊʹ͸FluxͳͲͷ࣮૷ઃܭͰՄೳ • ͔͠͠ɺͦΕͰ΋ෆ۩߹͸ൃੜ͢Δ • ϦϞʔτͰྫ֎ΛϩΪϯά͢Δ͜ͱͰؾ͚ͮΔ • ಈ࡞ݕূ͕࿙Εͯ΋ෆ۩߹ݕ஌·Ͱͷ͕࣌ؒ୹͘Ͱ͖Δ • ෆ۩߹͕ൃੜ͢Δͷ͸࢓ํͷͳ͍͜ͱɻͦͷ୅ΘΓૣ͘ؾ͖ͮɺਝ଎ʹमਖ਼Ͱ͖Δମ੍Λ࡞ͬ ͓ͯ͘ɻ
34. ෆ۩߹Λత֬ʹमਖ਼͢ΔͨΊʹ • ྫ֎ΠϕϯτΛCrashlyticsʹૹ৴͢Δ͜ͱʹΑΓɺ໰୊͕ൃੜ͍ͯ͠Δ͜ͱʹ͸ؾ͚ͮΔΑ͏ʹ ͳͬͨ • ͦͷ࣍͸ؾ෇͍ͨ໰୊Λత֬ʹमਖ਼͢ΔͨΊʹɺͳͥ໰୊͕ൃੜ͍ͯ͠Δͷ͔ɺͲͷΑ͏ʹͯ͠ ໰୊͕ى͖ͨͷ͔Λ஌Δඞཁ͕͋Δ
35. CrashlyticsʹϩάΛૹ৴͓ͯ͘͠ • Crashlyticsʹ͸ίϯιʔϧϩάʹදࣔ͢ΔΑ͏ͳϩάΛૹ৴͢Δػೳ͕͋ΓɺCrashΠϕϯτ΍ Non-Fatal-ErrorΠϕϯτͱඥ͚ͮͯ͘ΕΔ func log(string: String) { CLSLogv("%@", getVaList([string])) } CrashlyticsʹϩάΛૹ৴͢Δίʔυྫ
37. ϩάͱͯ͠ૹ৴͍ͯ͠Δ಺༰ • શͯͷը໘ભҠΛࣗಈͰϩΪϯά • ViewControllerͷϥΠϑαΠΫϧΛτϥοΩϯά • https://github.com/muukii/ApplicationMonitor • Fluxϕʔεͷ࣮૷ͳͷͰݺͼग़͞ΕͨΞΫγϣϯΛࣗಈͰϩΪϯά • ͦͷଞ ࣮ߦ͞ΕͨॲཧͷதͰॏཁͳ΋ͷ͕͋Ε͹adhocͰϩάΛ࢓ࠐΉ
38. ෆ۩߹ൃੜʹࢸΔ·Ͱͷߦಈ͕ಡΊΔΑ͏ʹͳΔ • Ϣʔβʔ͕ߦͳͬͨૢ࡞Λϩάͱͯ͠࢒͢͜ͱ͕Ͱ͖Ε͹ɺ
 ։ൃऀͷखݩͰ࠶ݱͰ͖ɺૉૣ͘मਖ਼Ͱ͖ΔΑ͏ʹͳΔՄೳੑ͕ߴ·Δ • ࠶ݱ͕೉͔ͬͨ͠Γ৘ใ͕଍Γͳ͚Ε͹ɺ৽͘͠ϩάΛऔΕΔΑ͏ʹमਖ਼͠ɺ͙͢ʹϦϦʔεΛߦ ͏ • ख͕͔Γ͕ͳ͍ෆ۩߹΄Ͳਏ͍΋ͷ͸ͳ͍
39. Thank you