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

by Muukii

Slide 1

Slide 1 text

շదͳUIΛ࣋ͭΞϓϦΛ࡞ΔͨΊʹ  Ͱ͖Δ͜ͱ Muukii Pairs Global Team eureka, Inc.

Slide 2

Slide 2 text

About Me • Muukii • iOS Engineer at eureka, Inc. • Pairs Global Team • GitHub : @muukii • https://muukii.me ☕ ⌚

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

1BJSTʹ͍ͭͯ !4

Slide 5

Slide 5 text

4PVUI,PSFB Japan Taiwan No.1 2017 release No.1 !5 1BJSTʹ͍ͭͯ ల։ࠃ ̐ͭͷϓϥοτϑΥʔϜ CONFIDENTIAL INFORMATION: Not for Public Distribution - Do Not Copy

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Agenda • Pairs Global iOS νʔϜɾϓϩδΣΫτͱͯ͠ • շదͳUIΛ࣋ͭΞϓϦΛ࡞ΔͨΊʹ΍͍ͬͯΔ͜ͱ • ߈Ί - Improve • ߴ଎ʹಈ࡞͢ΔUI ɾ ҆ఆͨ͠UI • कΓ - Maintain • ߈ΊʹΑ࣮ͬͯݱͨ͠UIͷ඼࣭Λܧଓͤ͞Δ

Slide 8

Slide 8 text

Improve

Slide 9

Slide 9 text

໨ࢦ͢΂͖඼࣭ • Ϣʔβʔʹͱͬͯͷී௨͸Facebook, InstagramϨϕϧͷಈ࡞ • ൴Β͸ΞϓϦͱ͍͏Ϟϊͱͯ͠ͷࠜຊతͳج४Λ࡞Γ্͍͛ͯΔ • εϜʔζͳ࢖͍৺஍ • εΫϩʔϧ࣌ɾը໘ભҠ࣌ͷύϑΥʔϚϯε • ঢ়ଶɾ৘ใΛ҆ఆతʹਖ਼͘͠දࣔ

Slide 10

Slide 10 text

UI࣮૷ͷΞϓϩʔν • InterfaceBuilder͸Ұ੾࢖༻ͤͣίʔυϨΠΞ΢τ • AutoLayout͸EasyPeasyͱ͍͏ϥΠϒϥϦΛ࢖༻த • UIͷಈ࡞ύϑΥʔϚϯεʹ͓͚ΔϘτϧωοΫ͸AutoLayoutؔ࿈Ͱൃੜ͢Δ͜ͱ΋͋Δ • TextureGroup/TextureΛ࢖༻ (Pinterest͕։ൃ͠ɺ൴ΒͷϓϩμΫτͰશ໘తʹ࢖༻͍ͯ͠Δ) • పఈతʹඇಉظॲཧԽ͠ɺUI͕ඇৗʹߴ଎ʹͳΔେ͖ͳϥΠϒϥϦ • AutoLayoutͱͦͷ୅ସखஈʹ͍ͭͯൃදࢿྉ͕͋ΔͷͰΑ͚Ε͹͝ཡ͍ͩ͘͞   https://speakerdeck.com/muukii0803/autolayoutyi-wai-falsexuan-ze-zhi

Slide 11

Slide 11 text

ঢ়ଶΛਖ਼͘͠දࣔ͢Δ • UIͷಈ࡞଎౓͸ॏཁ͕ͩɺݱࡏͷঢ়ଶΛਖ਼͘͠දࣔ͢Δ͜ͱ΋ॏཁ • 1ճͰ΋ҰॠͰ΋ؒҧͬͨঢ়ଶΛදࣔ͢Ε͹Ϣʔβʔ͸ࠞཚ͢Δ • Fluxͷ֓೦Λར༻͢Δ͜ͱͰෳࡶͳঢ়ଶΛ੔͑ͯViewʹදࣔ͢Δ͜ͱ͕Ͱ͖Δ • ͦΕͱಉ࣌ʹϝϯςφϯεੑͷ޲্΋ظ଴Ͱ͖Δ

Slide 12

Slide 12 text

࣮ࡍͷΞϓϦͷಈ͖ • on iPhone7 • ࣸਅ͸දࣔͤͣɺϓϩϑΟʔϧ৘ใ͸μϛʔʹࠩ͠ସ͍͑ͯ·͢ɻ • ΄ͱΜͲͷಈ࡞ʹ͓͍ͯ60fpsʹ͍ۙ׈Β͔͕࣮͞ݱͰ͖͍ͯΔɻ

Slide 13

Slide 13 text

Maintain

Slide 14

Slide 14 text

UIͷෆ۩߹ͱݺ΂Δ΋ͷ • ظ଴௨Γಈ͍͍ͯͳ͍ (͜Ε͸౰વ) • ॲཧʹ͕͔͔࣌ؒΓUI͕ݻ·ͬͯ͠·͏ • UI͕ॠ࣌ʹԿ౓͔੾ΓସΘͬͯ͠·͏Α͏ͳνϥπΩ • σβΠϯ่Ε • ࢹೝੑɾ৘ใઃܭΛߟ͑ͯͷσβΠϯͰ͋ΔͨΊɺ่Ε͍ͯΕ͹UIͱͯ͠ຊདྷͷػೳΛఏڙͰ͖ͯ ͍ͳ͍ͱݴ͑Δ • ը૾ͷΞεϖΫτൺ͕ؒҧ͍ͬͯΔ • Not ϐΫηϧύʔϑΣΫτ • ΞΠίϯͷҰ෦͕͚ܽͯදࣔ͞Ε͍ͯΔ

Slide 15

Slide 15 text

ෆ۩߹Λى͜͞ͳ͍ͨΊʹ • ෆ۩߹͸ώϡʔϚϯΤϥʔʹΑͬͯى͜Δ͜ͱ΋͋Δ • ͦͷதʹ͸ʮಈ࡞֬ೝ͕໘౗ʯʹΑΔ΋ͷ΋ؚ·Εͯ͘Δ • ʮಈ࡞֬ೝͷͨΊʹ४උ͢Δ͜ͱ͕ଟ͍ɻʯͱ͔ • ؆୯ʹಈ࡞֬ೝΛߦ͑ΔΑ͏ʹ͢Δ͜ͱͰෆ۩߹ΛݮΒͤΔ • खؒͷഉআ • QAͷਓ΋ḿΔ

Slide 16

Slide 16 text

։ൃऀϝχϡʔ ΞϓϦαΠυ • ΞϓϦىಈ࣌ʹΞϓϦͷಈ࡞ํ๏΍؀ڥΛબ୒͢Δը໘Λදࣔ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

઀ଓ͢ΔαʔόʔΛબ୒ • ຊ൪αʔόʔ ؖࠃɾ୆࿷ • ։ൃ༻αʔόʔ ؖࠃɾ୆࿷ • ϩʔΧϧ (localhost:8000ͳͲ) • ϚϧνϩάΠϯՄೳͳΞϓϦઃܭʹ͍ͯ͠ΔͨΊɺෳ਺Ϣʔβʔͷϩ άΠϯঢ়ଶΛอ࣋Մೳ & ϥϯλΠϜͰ੾Γସ͑Մೳ • ؀ڥมߋͷͨͼʹϏϧυ͠௚͢ඞཁ͸ͳ͠

Slide 19

Slide 19 text

ը໘αΠζͷมߋ • Application.windowͷαΠζΛڧҾʹมߋ͢Δػೳ • ׬શ࠶ݱ͸Ͱ͖ͳ͍͕ɺ5.5inchͷσόΠεΛ࢖༻͠ͳ͕Β΋4inch ͷը໘ͰUIΛ֬ೝ͢Δ͜ͱ͕Ͱ͖Δ • খ͍͞ը໘Ͱ͸จࣈ͕੾Ε͍ͯͨΓɺ  σβΠϯ͕ཚΕ͍ͯΔ͜ͱʹؾ͚ͮΔ

Slide 20

Slide 20 text

Ϗϧυʹؔ͢Δ৘ใ • ໰୊͕֬ೝ͞Εͨ৔߹ʹใࠂΛߦ͍΍͘͢͢ΔͨΊ • Ϗϧυ࣌ʹJSONΛ࡞ΓɺΞϓϦʹόϯυϧ͢Δख๏Λͱ͍ͬͯΔ Script: https://gist.github.com/muukii/cc655b0cf0d7986421725a5493c7f3d8

Slide 21

Slide 21 text

։ൃऀϝχϡʔ ϏδωεϩδοΫαΠυ

Slide 22

Slide 22 text

• ΞϓϦΛར༻͠ͳ͕ΒαʔόʔͷϏδωεϩδοΫΛݺͼग़͢ (։ൃ؀ڥͷΈ) • ϢʔβʔΛ௕ԡ͠ -> Ϣʔβʔ(૬ख)ʹؔ͢ΔϝχϡʔΛදࣔ • ࣗ෼ʹʮ͍͍ͶʂʯΛૹ৴ • ࣗ෼ʹϝοηʔδΛૹ৴ • σόΠεΛγΣΠΫ -> Ϣʔβʔ(ࣗ෼)ʹؔ͢ΔϝχϡʔΛදࣔ • ձһঢ়ଶͷมߋ (ແྉɾ༗ྉ) • ͦͷଞ ঢ়ଶมߋ ։ൃऀϝχϡʔ ϏδωεϩδοΫαΠυ

Slide 23

Slide 23 text

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ͱ͔Ͱ͍͍ͱࢥ͏)

Slide 24

Slide 24 text

GitHub PRʹ.appΛΞοϓϩʔυ appϑΝΠϧͷμ΢ϯϩʔυϦϯΫ

Slide 25

Slide 25 text

γϛϡϨʔλ༻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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

ൃੜ͍ͯ͠Δෆ۩߹ʹؾͮͨ͘Ίʹ • ΞϓϦΛϦϦʔε͢Δ·Ͱʹग़དྷΔ͜ͱ͸ͨ͘͞Μ͋Δ͕ɺͦΕͰ΋ෆ۩߹ΛؚΜͩ··ϦϦʔε ͞Εͯ͠·͏͜ͱ͸͋Δ • ϦϦʔεޙɺϢʔβʔͷखݩͰൃੜ͍ͯ͠Δ໰୊ʹϢʔβʔ͔Βͷ͓໰͍߹ΘͤͰ͸ͳ͘ɺͪ͜Β ͔Βݕ஌Ͱ͖ΔΑ͏ʹ͓͕ͯ͘͠ॏཁ

Slide 28

Slide 28 text

CrashlyticsʹNon-Fatal-Errorͱͯ͠ΫϥογϡܥҎ֎ͷΤ ϥʔΛૹ৴͢Δ func log(error: Error) { Crashlytics.sharedInstance().recordError(error, withAdditionalUserInfo: nil) } CrashlyticsʹNon-Fatal-Errorͱͯ͠ΠϕϯτΛૹ৴͢Δίʔυྫ Crashlytics͸ࣗಈͰΫϥογϡϩάΛૹ৴͢ΔSDK͕ͩɺ։ൃऀ͕ࢦఆͨ͠ΠϕϯτΛΫϦςΟΧϧ Ͱ͸ͳ͍͕໰୊ͷ͋ΔΤϥʔ(Non-Fatal-Error)ͱͯ͠ૹ৴͢Δػೳ΋͍࣋ͬͯΔ

Slide 29

Slide 29 text

՝ۚ͠ͳ͚Ε͹ϝοηʔδͷ ಺༰͸ݟΕͳ͍ɻ ϝοηʔδΛ։෧ϘλϯΛԡ ͢͜ͱ͕Ͱ͖Δ ։෧ϘλϯΛԡ͢ͱɺ՝ۚը ໘͕දࣔ͞ΕΔ(Ϟʔμϧ) ՝ۚͯ͠՝ۚը໘Λด͡Δͱ ϝοηʔδ͕දࣔ͞ΕΔ (σʔλͷ࠶ಡΈࠐΈ) ঢ়ଶ : ແྉձһ ঢ়ଶ : ༗ྉձһ

Slide 30

Slide 30 text

ԡͤͳ͍͸ͣͷϘλϯ͕ԡ͞Εͨ͜ͱΛݕ஌͢Δ let error = ..."ϝοηʔδ͸։෧Ͱ͖͍ͯΔ͸͔ͣͩΒ Ϙλϯ͸ԡͤͳ͍͸ͣ" log(error: error) ϘλϯΛλοϓ͞ΕͨλΠϛϯάͰঢ়ଶΛ֬ೝͯ͠ΤϥʔΛૹ৴͓ͯ͘͠ ྫ͑͹ɺʮ༗ྉձһͷϢʔβʔ͕։෧ϘλϯΛԡͯ͠͠·ͬͨʯ ͔͠͠ɺຊདྷ͸ϝοηʔδͷ಺༰͕දࣔ͞Ε͍ͯΔ͸ͣͳͷͰɺϘλϯ͸ԡͤͳ͍͸ͣɻ ErrorΦϒδΣΫτ͸CustomNSError ͱ, LocalizedErrorΛ࣮૷͢Δͱྑ͍

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

ϢʔβʔͷखݩͰൃੜ͍ͯ͠Δྫ֎ʹؾ͚ͮΔΑ͏ʹ ͳΔ • UIςετΛॻ͘ͷ΋ΞϦ͕ͩɺͦΕͰ΋ϢʔβʔͷखݩͰ͸Կ͕ى͖Δ͔Θ͔Βͳ͍ͷ͕ΞϓϦ։ ൃͷ୉ޣຯ • UIςετͰ͸ݕ஌Ͱ͖ͳ͍΋ͷ΋͋Δ • γφϦΦΛࣗ෼ͨͪͰ࡞͍ͬͯΔ͔Β • ϥϯλΠϜͰϢʔβʔ͕ߦͳͬͨಈ࡞͕࢓༷͔Β֎Ε͍ͯͳ͍͔ΛνΣοΫ͢ΔΑ͏ʹ͓ͯ͘͠ͱ ྑ͍ • ݕ஌ॲཧ͕େ͖ͳෛՙʹͳΒͳ͍Α͏ʹؾΛ͚ͭΔ

Slide 33

Slide 33 text

ϢʔβʔͷखݩͰൃੜ͍ͯ͠Δྫ֎ʹؾ͚ͮΔΑ͏ʹ ͳΔ • ҆ఆͨ͠UIΛ࣮ݱ͢ΔͨΊʹ͸FluxͳͲͷ࣮૷ઃܭͰՄೳ • ͔͠͠ɺͦΕͰ΋ෆ۩߹͸ൃੜ͢Δ • ϦϞʔτͰྫ֎ΛϩΪϯά͢Δ͜ͱͰؾ͚ͮΔ • ಈ࡞ݕূ͕࿙Εͯ΋ෆ۩߹ݕ஌·Ͱͷ͕࣌ؒ୹͘Ͱ͖Δ • ෆ۩߹͕ൃੜ͢Δͷ͸࢓ํͷͳ͍͜ͱɻͦͷ୅ΘΓૣ͘ؾ͖ͮɺਝ଎ʹमਖ਼Ͱ͖Δମ੍Λ࡞ͬ ͓ͯ͘ɻ

Slide 34

Slide 34 text

ෆ۩߹Λత֬ʹमਖ਼͢ΔͨΊʹ • ྫ֎ΠϕϯτΛCrashlyticsʹૹ৴͢Δ͜ͱʹΑΓɺ໰୊͕ൃੜ͍ͯ͠Δ͜ͱʹ͸ؾ͚ͮΔΑ͏ʹ ͳͬͨ • ͦͷ࣍͸ؾ෇͍ͨ໰୊Λత֬ʹमਖ਼͢ΔͨΊʹɺͳͥ໰୊͕ൃੜ͍ͯ͠Δͷ͔ɺͲͷΑ͏ʹͯ͠ ໰୊͕ى͖ͨͷ͔Λ஌Δඞཁ͕͋Δ

Slide 35

Slide 35 text

CrashlyticsʹϩάΛૹ৴͓ͯ͘͠ • Crashlyticsʹ͸ίϯιʔϧϩάʹදࣔ͢ΔΑ͏ͳϩάΛૹ৴͢Δػೳ͕͋ΓɺCrashΠϕϯτ΍ Non-Fatal-ErrorΠϕϯτͱඥ͚ͮͯ͘ΕΔ func log(string: String) { CLSLogv("%@", getVaList([string])) } CrashlyticsʹϩάΛૹ৴͢Δίʔυྫ

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ϩάͱͯ͠ૹ৴͍ͯ͠Δ಺༰ • શͯͷը໘ભҠΛࣗಈͰϩΪϯά • ViewControllerͷϥΠϑαΠΫϧΛτϥοΩϯά • https://github.com/muukii/ApplicationMonitor • Fluxϕʔεͷ࣮૷ͳͷͰݺͼग़͞ΕͨΞΫγϣϯΛࣗಈͰϩΪϯά • ͦͷଞ ࣮ߦ͞ΕͨॲཧͷதͰॏཁͳ΋ͷ͕͋Ε͹adhocͰϩάΛ࢓ࠐΉ

Slide 38

Slide 38 text

ෆ۩߹ൃੜʹࢸΔ·Ͱͷߦಈ͕ಡΊΔΑ͏ʹͳΔ • Ϣʔβʔ͕ߦͳͬͨૢ࡞Λϩάͱͯ͠࢒͢͜ͱ͕Ͱ͖Ε͹ɺ  ։ൃऀͷखݩͰ࠶ݱͰ͖ɺૉૣ͘मਖ਼Ͱ͖ΔΑ͏ʹͳΔՄೳੑ͕ߴ·Δ • ࠶ݱ͕೉͔ͬͨ͠Γ৘ใ͕଍Γͳ͚Ε͹ɺ৽͘͠ϩάΛऔΕΔΑ͏ʹमਖ਼͠ɺ͙͢ʹϦϦʔεΛߦ ͏ • ख͕͔Γ͕ͳ͍ෆ۩߹΄Ͳਏ͍΋ͷ͸ͳ͍

Slide 39

Slide 39 text

Thank you