UIのブラックボックスを探る/iOSDC23

by noppefoxwolf

Slide 1

Slide 1 text

UIͷϒϥοΫϘοΫεΛ୳Δ iOSDC23 day1 Track B noppe 1

Slide 2

Slide 2 text

noppe @noppefoxwolf • DeNA Co., Ltd. • Pococha • Indie app • vear • Editormode • Nigh;ox DAWN for mastodon 2

Slide 3

Slide 3 text

೴಺ϓϨϏϡʔ@DeNAϒʔε 3

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ 4

Slide 5

Slide 5 text

UIͷϒϥοΫϘοΫεͱ͸ 5

Slide 6

Slide 6 text

UIͷϒϥοΫϘοΫε = ҉໧ͷ࢓ ༷ 6

Slide 7

Slide 7 text

ΧελϜUIͷඞཁੑ • ಛఆͷૢ࡞Λ࠷దԽ͍ͨ͠ • ΧϨϯμʔɾը૾ϏϡʔΞ • ΞϓϦͷΞΠσϯςΟςΟΛߏஙͨ͠ ͍ • طଘͷUIͷϦσβΠϯ 7

Slide 8

Slide 8 text

ΧελϜUIͷ඼࣭ • Apple੡ͷUIͱൺ΂Δͱѱ͘ͳΓ͕ͪ • όϥϯε͕ѱ͍ • ৮Γ৺஍͕ѱ͍ • ࢖͍ʹ͍͘ • ...etc 8

Slide 9

Slide 9 text

ΧελϜφϏήʔγϣϯόʔͷྫ 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Bad UI͕ग़དྷͯ͠·͏ཧ ༝ • γεςϜͷ͓࡞๏Λແࢹͯ͠͠·͏͔ Β • ΧελϜUI͸γεςϜUIͷ্Ͱ࡞Δ ΂͖ʢԫʣ • ͓࡞๏Λແࢹͯ͠UIΛ࡞Δʢ੨ʣ ͱɺҧ࿨ײ͕ൃੜ 11

Slide 12

Slide 12 text

͓࡞๏Λ஌Δʹ͸ 12

Slide 13

Slide 13 text

͓࡞๏Λ஌Δʹ͸1 • Human Interface Guidelines • جຊతͳ͓࡞๏͸͜Ε • ϑΥϯταΠζɾϘλϯαΠζͳͲ ͷϕετϓϥΫςΟε • UIKit, Swi8UI΋͜Εʹ४ڌ͍ͯ͠Δ 13

Slide 14

Slide 14 text

͓࡞๏Λ஌Δʹ͸2 • γεςϜίϯϙʔωϯτΛ෼ੳ͢Δ • HIGʹॻ͔Ε͍ͯͳ͍͓࡞๏ • ඼࣭ͷཧ૝஋ • γεςϜίϯϙʔωϯτ • Apple੡ͷΞϓϦ • UIKit΍Swi/UIͷUIίϯϙʔωϯτ 14

Slide 15

Slide 15 text

UIΛ෼ੳ͢Δ 15

Slide 16

Slide 16 text

UIΛ෼ੳ͢Δ؍఺ • ϏδϡΞϧ! • ΠϯλϥΫγϣϯ" 16

Slide 17

Slide 17 text

ϏδϡΞϧ 17

Slide 18

Slide 18 text

ϏδϡΞϧ • αΠζɾ৭ɾܗͳͲ໨ʹݟ͑Δ΋ͷ • HIGʹॻ͔Ε͍ͯΔ΋ͷ΋͋Δ 18

Slide 19

Slide 19 text

ϏδϡΞϧͷద༻ྫ 19

Slide 20

Slide 20 text

αΠζ • ΞΠίϯɾ༨നɾจࣈαΠζɾؙ֯ • εΫγϣΛࡱӨ͠ଌΔ • Sketch΍PhotoshopͳͲͷRulerػೳ • จࣈαΠζͷ৔߹͸ɺεΫγϣΛ൒ಁ ໌ʹͯ͠ॏͶͯൺֱ • ๏ଇੑΛݟ͚ͭΒΕΔͱGood 20

Slide 21

Slide 21 text

αΠζͱΞΫηγϏϦςΟ • ΞΫηγϏϦςΟ΍ʮ֦େදࣔʯઃఆʹΑͬͯɺαΠζ͕มԽ ͢ΔͷͰ஫ҙ • Dynamic Type͸࠷େ࠷খ஋͕ܾ·͍ͬͯΔ৔߹΋͋Δ 21

Slide 22

Slide 22 text

Χϥʔ • ಛఆͷҙຯΛ࣋ͭΧϥʔʹ஫໨ • ΧϥʔϐοΧʔΛར༻͢Δ • Digital Color Meter, Sip, ColorSlurp • ΧϥʔεϖʔεΛ߹Θ͓ͤͯ͘ 22

Slide 23

Slide 23 text

Χϥʔͷྫ • ϔϧεέΞͰ࢖ΘΕ͍ͯΔ৭Λ࢖͏ࣄ ͰɺHealthKitͱ࿈ܞ͢ΔϘλϯͰ͋Δ ͜ͱΛೝࣝ͠΍͘͢ͳΔ • Ϣʔβʔʹ৭ͰҙຯΛ఻͑Δ • ஍ਤͷւͷ੨৭ • εΠονͷ྘৭ 23

Slide 24

Slide 24 text

μʔΫϞʔυͱΧϥʔ • ৚݅ʹΑͬͯ৭͕มΘΔ͜ͱ͕͋Δ • μʔΫϞʔυ • ৭൓స • Smart invert • ΞΫηϯτΧϥʔͷઃఆ 24

Slide 25

Slide 25 text

୯৭Ͱͳ͍έʔε ୯৭Ͱແ͍৔߹͸৭ΛऔΓग़ͤͳ͍ͷͰ஫ҙ ޿Ίʹ৭ΛऔΓग़ͯ͠ɺϜϥ͕ͳ͍͔͔֬ΊΔͷ΋ྑ͍Ͱ͠ΐ͏ • ϒϥʔ, άϥσʔγϣϯ, ಁա౓ 25

Slide 26

Slide 26 text

Ξχϝʔγϣϯ • dura&on, curve, &ming • iOS Simulator • Slow Anima&ons • εΫϦʔϯϨίʔυΛίϚૹΓͯ֬͠ ೝ • QuickTime Player, iina 26

Slide 27

Slide 27 text

ߴ౓ͳϏδϡΞϧͷ෼ੳ 27

Slide 28

Slide 28 text

View Hierachy Debugger • ௚઀αΠζΛ֬ೝͰ͖Δ • Xcode • h(ps:/ /lookin.work • OSS • ίϯιʔϧػೳ͕༏ल • h(ps:/ /revealapp.com • Paid App • UIViewͷߏ଄΋ݟΕΔ 28

Slide 29

Slide 29 text

Apple Map UI-Component Clone Challenge • AppleͷMapΞϓϦΛ࠶ݱͯ͠ΈΔ • ӈ্ͷϘλϯͷͱ͜Ζ • RevealΛ࢖ͬͯɺUIΛ෼ੳ͢Δ 29

Slide 30

Slide 30 text

Revealͷ࢓૊Έ • ΞϓϦͷதͰಈ࡞͢ΔαʔόʔΛཱͪ ্͛ͯɺmacͷΞϓϦͱ௨৴͢Δ • ΞϓϦʹRevealServer.frameworkΛ૊ ΈࠐΉඞཁ͕͋Δ • Lookin΋ಉ༷ͷ࢓༷ • ࣗલͷΞϓϦͰ͔͠ಈ࡞Ͱ͖ͳ͍ 30

Slide 31

Slide 31 text

Reveal runs anywhere • ΞϓϦىಈதʹ֎͔ΒRevealServerΛload͢Δ • fridaΛ࢖͏ͱ؆୯ 31

Slide 32

Slide 32 text

Frida h"ps:/ /frida.re • ൚༻తͳϦαʔνπʔϧ • εΫϦϓτͷΠϯδΣΫτ • ϝιουίʔϧͷ؂ࢹ • rootʹΠϯετʔϧՄೳ • iPhoneͷroot͕ඞཁ 32

Slide 33

Slide 33 text

Frida script loader.js let loaderPath = "~/RevealServer.framework/RevealServer" Module.load(loaderPath) 33

Slide 34

Slide 34 text

Load framework using Frida # 1. frida-psͰUSBͰ઀ଓͨ͠iPhone͔ΒϓϩηεIDΛ୳͢ $ frida-ps --usb | grep Map 2537 Maps # 2. fridaͰPIDʹରͯ͠εΫϦϓτΛ࣮ߦ͢Δ $ frida --usb --load loader.js --attach-pid 2537 34

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Ϋϥε໊͔ΒϔομʔΛ ୳͢ • ktool, DyldExtractor • h1ps:/ /github.com/0cyn/sdk-builder • APIઃܭΛֶͿ • Frida΍LLDBͰϝιουΛ࣮ߦ࣮ͯ͠ݧ ͢Δ 40

Slide 41

Slide 41 text

UIΛ෼ੳ͢Δ؍఺ • ϏδϡΞϧ! • ΠϯλϥΫγϣϯ" 41

Slide 42

Slide 42 text

ΠϯλϥΫγϣϯ 42

Slide 43

Slide 43 text

ΠϯλϥΫγϣϯͰେࣄͳ͜ͱ ౰ͨΓલͷૢ࡞Λ͔ͬ͠Γఏڙ͢Δ • ࣗ෼ʹͱͬͯͷ౰ͨΓલͰ͸ͳ͘ɺϢʔβʔʹͱͬͯͷ౰ͨΓ લΛ࣮૷͢Δ • δΣενϟʔʹΑΔೖྗ • ΩʔϘʔυ΍ϙΠϯλʔσόΠεʹΑΔೖྗ • ϑΟʔυόοΫ 43

Slide 44

Slide 44 text

δΣενϟʔ • Ϗϡʔ͕ͲΜͳδΣενϟʔʹରԠ͍ͯ͠Δ͔֬ೝ͢Δ • ෳ਺ͷδΣενϟʔΛಉ࣌ʹ࢖͏͜ͱ΋͋Δ • ઌೖ؍Λࣺͯͯ৮ͬͯΈΔ • ݟಀ͕ͪ͠ͳ΋ͷΛ͍͔ͭ͘঺հ 44

Slide 45

Slide 45 text

Case1. ิॿδΣενϟʔ • λοϓͰOn,Oﬀͷ੾Γସ͑ • ύϯͰ΋ิॿతʹ੾Γସ͕͑Ͱ͖Δ 45

Slide 46

Slide 46 text

Case2. ෆՄࢹτϦΨʔ • ͋Δఔ౓ݟͨ໨Ͱ࢖͍ํ͕෼͔Δ΋ͷ ͕΄ͱΜͲ • ͔͠͠ɺෆՄࢹͷτϦΨʔ΋͋Δ • γΣΠΫɺϚϧνλοϓɺ3Dλον ͳͲ 46

Slide 47

Slide 47 text

Case3. ᮢ஋ • ࣮ࡍͷݟͨ໨ΑΓ΋ζϨͨҐஔʹ൑ఆ ͕͋Δ৔߹΋͋Δ 47

Slide 48

Slide 48 text

֎෦σόΠε͔Βͷೖྗ • ϋʔυ΢ΣΞΩʔϘʔυ • γϣʔτΧοτʹରԠ͍ͯ͠Δ͔ • ϙΠϯλʔσόΠε • ϙΠϯλ͕ϗόʔͨ࣌͠ͷڍಈ 48

Slide 49

Slide 49 text

ϑΟʔυόοΫ • ϏδϡΞϧϑΟʔυόοΫ • α΢ϯυ • ϋϓςΟΫε • ϘΠεΦʔόʔ 49

Slide 50

Slide 50 text

α΢ϯυ • ૹ৴Իɺ௨஌ԻɺΫϦοΫԻͳͲ • Իͷ௕͞ɺԻͷେ͖͕͞ࢀߟʹͳΔ • ipaΛղౚͯ͠ɺaifϑΝΠϧΛऔΓग़͢ 50

Slide 51

Slide 51 text

ϋϓςΟΫε • ίϯςΩετϝχϡʔɺPull to Refresh • ෇͚ͯͳ͍ͱ͜ΖΛҙࣝ͢Δ • λϒͷҠಈͳͲ 51

Slide 52

Slide 52 text

ϘΠεΦʔόʔ • ઃఆ → ΞΫηγϏϦςΟ → ϘΠεΦʔόʔ • ϘΠεΦʔόʔ͕ಡΈ্͛ΔจষΛ֬ೝ͢Δ • HIG΋ࢀর2 2 h$ps:/ /developer.apple.com/jp/design/human-interface-guidelines/accessibility#VoiceOver 52

Slide 53

Slide 53 text

ΧελϜUIΛ࡞Δ্Ͱͷώϯτ 53

Slide 54

Slide 54 text

UIͷղऍ͸Ұக͢Δͱ͸ ݶΒͳ͍ • ࢀߟʹͨ͠UI΍৭ʹ͸ઃܭࢥ૝͕͋Δ • ໌֬ͳҙਤͷ্Ͱ࣮૷͞Ε͍ͯΔ • ҆қʹਅࣅͯ͠΋ɺຊདྷͷࢥ૝ͱ͸ҟ ͳΔ࢖͍ํʹͳΔ͜ͱ΋͋Δ • ΞϓϦ಺௨஌ʹAirPodsͷΑ͏ͳ HUDΛ࢖͏ͱɺϢʔβʔ͸צҧ͍͠ ͳ͍͔ʁ 54

Slide 55

Slide 55 text

࣮૷ʹ࠷దͳUI΍APIΛબͿ • UIKitʹطʹ͋Δ΋ͷΛ࠶࣮૷͠ͳ͍ • εΫϩʔϧͷ׳ੑΛ࣮૷͠ͳ͍ɻUIScrollViewΛ࢖͏ • ϘλϯͰྑ͍ͳΒTapGestureͰ࣮૷͠ͳ͍ 55

Slide 56

Slide 56 text

σβΠϯͷ௥ैίετ • OSͷΞοϓσʔτʹΑͬͯσβΠϯ͕ มΘΔ • ͔࣮ͤͬ͘૷ͨ͠UI͕ݹष͘ݟ͑Δ͜ ͱ΋ • σβΠϯͷ௥ैίετ͕ൃੜ͢Δ 56

Slide 57

Slide 57 text

Φϑʹग़དྷΔ͜ͱ΋๨Εͣʹ • ΞΫηγϏϦςΟͰແޮʹग़དྷΔ͜ͱ΋ • Shake to Undo • Reduce Mo1on • ࣗલͰ࣮૷ͨ͠Βɺ੾Γସ͑΋ߟྀ͢Δ͜ͱ 57

Slide 58

Slide 58 text

ݱ࣮తʹग़དྷͳ͍͜ͱ΋͋Δ • ΧελϜUI͸඼࣭͕མͪΔ͜ͱΛલఏʹ • τϨʔυΦϑΛҙࣝͯ͠ɺແବʹΧελϜUI࡞Βͳ͍ͷ͕ίπ • Ұճݟͨ໨ͷྑ͍΋ͷΛ࡞͔ͬͯΒ͸໭ͤͳ͍ • ΞϓϦͷίΞόϦϡʔʹߜ࣮ͬͯ૷ͯ͠Έͯ͸ 58

Slide 59

Slide 59 text

See also • h#ps:/ /github.com/scenee/Floa6ngPanel • h#ps:/ /github.com/iDevelopper/PBPopupController • h#ps:/ /github.com/omaralbeik/Drops • h#ps:/ /github.com/SvenTiigi/WhatsNewKit • h#ps:/ /github.com/usagimaru/Floa6ngSwitch • h#ps:/ /github.com/noppefoxwolf/ColorPicker 59

Slide 60

Slide 60 text

͓ΘΓ 60