Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UIのブラックボックスを探る/iOSDC23
Search
noppefoxwolf
September 02, 2023
Programming
3
4k
UIのブラックボックスを探る/iOSDC23
noppefoxwolf
September 02, 2023
Tweet
Share
More Decks by noppefoxwolf
See All by noppefoxwolf
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
510
既存アプリをvisionOS対応してリリースした話/visionOS LT vol5
noppefoxwolf
0
180
CoreGraphicsでドット絵を描こう/iOSDC22
noppefoxwolf
0
2.3k
ランタイムデバッグのススメ/iOSDC21
noppefoxwolf
1
4.4k
google/mediapipe で始めるARアプリ開発/iOSDC2020
noppefoxwolf
1
1.4k
モバイルファーストなアプリを作るためにvearがしたこと/xRDCC
noppefoxwolf
0
110
ソーシャルライブサービスにおけるデジタル化粧の仕組みと実装/iOSDC19
noppefoxwolf
4
5.4k
Limited import clarification and its effect/tryswift2019
noppefoxwolf
2
1.2k
立ち上げ時のライブ配信アプリに最適な開発環境・技術的ノウハウとは/PocoDevMeetup-1
noppefoxwolf
0
1.3k
Other Decks in Programming
See All in Programming
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Grafana Cloudとソラカメ
devoc
0
140
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
sappoRo.R #12 初心者セッション
kosugitti
0
230
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Featured
See All Featured
RailsConf 2023
tenderlove
29
1k
A designer walks into a library…
pauljervisheath
205
24k
Designing for Performance
lara
604
68k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
How to Ace a Technical Interview
jacobian
276
23k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Transcript
UIͷϒϥοΫϘοΫεΛ୳Δ iOSDC23 day1 Track B noppe 1
noppe @noppefoxwolf • DeNA Co., Ltd. • Pococha • Indie
app • vear • Editormode • Nigh;ox DAWN for mastodon 2
ϓϨϏϡʔ@DeNAϒʔε 3
ࠓ͢͜ͱ 4
UIͷϒϥοΫϘοΫεͱ 5
UIͷϒϥοΫϘοΫε = ҉ͷ ༷ 6
ΧελϜUIͷඞཁੑ • ಛఆͷૢ࡞Λ࠷దԽ͍ͨ͠ • ΧϨϯμʔɾը૾ϏϡʔΞ • ΞϓϦͷΞΠσϯςΟςΟΛߏஙͨ͠ ͍ • طଘͷUIͷϦσβΠϯ
7
ΧελϜUIͷ࣭ • AppleͷUIͱൺΔͱѱ͘ͳΓ͕ͪ • όϥϯε͕ѱ͍ • ৮Γ৺͕ѱ͍ • ͍ʹ͍͘ •
...etc 8
ΧελϜφϏήʔγϣϯόʔͷྫ 9
10
Bad UI͕ग़དྷͯ͠·͏ཧ ༝ • γεςϜͷ͓࡞๏Λແࢹͯ͠͠·͏͔ Β • ΧελϜUIγεςϜUIͷ্Ͱ࡞Δ ͖ʢԫʣ •
͓࡞๏Λແࢹͯ͠UIΛ࡞Δʢ੨ʣ ͱɺҧײ͕ൃੜ 11
͓࡞๏ΛΔʹ 12
͓࡞๏ΛΔʹ1 • Human Interface Guidelines • جຊతͳ͓࡞๏͜Ε • ϑΥϯταΠζɾϘλϯαΠζͳͲ ͷϕετϓϥΫςΟε
• UIKit, Swi8UI͜Εʹ४ڌ͍ͯ͠Δ 13
͓࡞๏ΛΔʹ2 • γεςϜίϯϙʔωϯτΛੳ͢Δ • HIGʹॻ͔Ε͍ͯͳ͍͓࡞๏ • ࣭ͷཧ • γεςϜίϯϙʔωϯτ •
AppleͷΞϓϦ • UIKitSwi/UIͷUIίϯϙʔωϯτ 14
UIΛੳ͢Δ 15
UIΛੳ͢Δ؍ • ϏδϡΞϧ! • ΠϯλϥΫγϣϯ" 16
ϏδϡΞϧ 17
ϏδϡΞϧ • αΠζɾ৭ɾܗͳͲʹݟ͑Δͷ • HIGʹॻ͔Ε͍ͯΔͷ͋Δ 18
ϏδϡΞϧͷద༻ྫ 19
αΠζ • ΞΠίϯɾ༨നɾจࣈαΠζɾؙ֯ • εΫγϣΛࡱӨ͠ଌΔ • SketchPhotoshopͳͲͷRulerػೳ • จࣈαΠζͷ߹ɺεΫγϣΛಁ ໌ʹͯ͠ॏͶͯൺֱ
• ๏ଇੑΛݟ͚ͭΒΕΔͱGood 20
αΠζͱΞΫηγϏϦςΟ • ΞΫηγϏϦςΟʮ֦େදࣔʯઃఆʹΑͬͯɺαΠζ͕มԽ ͢ΔͷͰҙ • Dynamic Type࠷େ࠷খ͕ܾ·͍ͬͯΔ߹͋Δ 21
Χϥʔ • ಛఆͷҙຯΛ࣋ͭΧϥʔʹ • ΧϥʔϐοΧʔΛར༻͢Δ • Digital Color Meter, Sip,
ColorSlurp • ΧϥʔεϖʔεΛ߹Θ͓ͤͯ͘ 22
Χϥʔͷྫ • ϔϧεέΞͰΘΕ͍ͯΔ৭Λ͏ࣄ ͰɺHealthKitͱ࿈ܞ͢ΔϘλϯͰ͋Δ ͜ͱΛೝࣝ͘͢͠ͳΔ • Ϣʔβʔʹ৭ͰҙຯΛ͑Δ • ਤͷւͷ੨৭ •
εΠονͷ৭ 23
μʔΫϞʔυͱΧϥʔ • ݅ʹΑͬͯ৭͕มΘΔ͜ͱ͕͋Δ • μʔΫϞʔυ • ৭స • Smart invert
• ΞΫηϯτΧϥʔͷઃఆ 24
୯৭Ͱͳ͍έʔε ୯৭Ͱແ͍߹৭ΛऔΓग़ͤͳ͍ͷͰҙ Ίʹ৭ΛऔΓग़ͯ͠ɺϜϥ͕ͳ͍͔͔֬ΊΔͷྑ͍Ͱ͠ΐ͏ • ϒϥʔ, άϥσʔγϣϯ, ಁա 25
Ξχϝʔγϣϯ • dura&on, curve, &ming • iOS Simulator • Slow
Anima&ons • εΫϦʔϯϨίʔυΛίϚૹΓͯ֬͠ ೝ • QuickTime Player, iina 26
ߴͳϏδϡΞϧͷੳ 27
View Hierachy Debugger • αΠζΛ֬ೝͰ͖Δ • Xcode • h(ps:/ /lookin.work
• OSS • ίϯιʔϧػೳ͕༏ल • h(ps:/ /revealapp.com • Paid App • UIViewͷߏݟΕΔ 28
Apple Map UI-Component Clone Challenge • AppleͷMapΞϓϦΛ࠶ݱͯ͠ΈΔ • ӈ্ͷϘλϯͷͱ͜Ζ •
RevealΛͬͯɺUIΛੳ͢Δ 29
RevealͷΈ • ΞϓϦͷதͰಈ࡞͢ΔαʔόʔΛཱͪ ্͛ͯɺmacͷΞϓϦͱ௨৴͢Δ • ΞϓϦʹRevealServer.frameworkΛ ΈࠐΉඞཁ͕͋Δ • Lookinಉ༷ͷ༷ •
ࣗલͷΞϓϦͰ͔͠ಈ࡞Ͱ͖ͳ͍ 30
Reveal runs anywhere • ΞϓϦىಈதʹ֎͔ΒRevealServerΛload͢Δ • fridaΛ͏ͱ؆୯ 31
Frida h"ps:/ /frida.re • ൚༻తͳϦαʔνπʔϧ • εΫϦϓτͷΠϯδΣΫτ • ϝιουίʔϧͷࢹ •
rootʹΠϯετʔϧՄೳ • iPhoneͷroot͕ඞཁ 32
Frida script loader.js let loaderPath = "~/RevealServer.framework/RevealServer" Module.load(loaderPath) 33
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
35
36
37
38
39
Ϋϥε໊͔ΒϔομʔΛ ୳͢ • ktool, DyldExtractor • h1ps:/ /github.com/0cyn/sdk-builder • APIઃܭΛֶͿ
• FridaLLDBͰϝιουΛ࣮ߦ࣮ͯ͠ݧ ͢Δ 40
UIΛੳ͢Δ؍ • ϏδϡΞϧ! • ΠϯλϥΫγϣϯ" 41
ΠϯλϥΫγϣϯ 42
ΠϯλϥΫγϣϯͰେࣄͳ͜ͱ ͨΓલͷૢ࡞Λ͔ͬ͠Γఏڙ͢Δ • ࣗʹͱͬͯͷͨΓલͰͳ͘ɺϢʔβʔʹͱͬͯͷͨΓ લΛ࣮͢Δ • δΣενϟʔʹΑΔೖྗ • ΩʔϘʔυϙΠϯλʔσόΠεʹΑΔೖྗ •
ϑΟʔυόοΫ 43
δΣενϟʔ • Ϗϡʔ͕ͲΜͳδΣενϟʔʹରԠ͍ͯ͠Δ͔֬ೝ͢Δ • ෳͷδΣενϟʔΛಉ࣌ʹ͏͜ͱ͋Δ • ઌೖ؍Λࣺͯͯ৮ͬͯΈΔ • ݟಀ͕ͪ͠ͳͷΛ͍͔ͭ͘հ 44
Case1. ิॿδΣενϟʔ • λοϓͰOn,OffͷΓସ͑ • ύϯͰิॿతʹΓସ͕͑Ͱ͖Δ 45
Case2. ෆՄࢹτϦΨʔ • ͋ΔఔݟͨͰ͍ํ͕͔Δͷ ͕΄ͱΜͲ • ͔͠͠ɺෆՄࢹͷτϦΨʔ͋Δ • γΣΠΫɺϚϧνλοϓɺ3Dλον ͳͲ
46
Case3. ᮢ • ࣮ࡍͷݟͨΑΓζϨͨҐஔʹఆ ͕͋Δ߹͋Δ 47
֎෦σόΠε͔Βͷೖྗ • ϋʔυΣΞΩʔϘʔυ • γϣʔτΧοτʹରԠ͍ͯ͠Δ͔ • ϙΠϯλʔσόΠε • ϙΠϯλ͕ϗόʔͨ࣌͠ͷڍಈ 48
ϑΟʔυόοΫ • ϏδϡΞϧϑΟʔυόοΫ • αϯυ • ϋϓςΟΫε • ϘΠεΦʔόʔ 49
αϯυ • ૹ৴Իɺ௨ԻɺΫϦοΫԻͳͲ • Իͷ͞ɺԻͷେ͖͕͞ࢀߟʹͳΔ • ipaΛղౚͯ͠ɺaifϑΝΠϧΛऔΓग़͢ 50
ϋϓςΟΫε • ίϯςΩετϝχϡʔɺPull to Refresh • ͚ͯͳ͍ͱ͜ΖΛҙࣝ͢Δ • λϒͷҠಈͳͲ 51
ϘΠεΦʔόʔ • ઃఆ → ΞΫηγϏϦςΟ → ϘΠεΦʔόʔ • ϘΠεΦʔόʔ͕ಡΈ্͛ΔจষΛ֬ೝ͢Δ •
HIGࢀর2 2 h$ps:/ /developer.apple.com/jp/design/human-interface-guidelines/accessibility#VoiceOver 52
ΧελϜUIΛ࡞Δ্Ͱͷώϯτ 53
UIͷղऍҰக͢Δͱ ݶΒͳ͍ • ࢀߟʹͨ͠UI৭ʹઃܭࢥ͕͋Δ • ໌֬ͳҙਤͷ্Ͱ࣮͞Ε͍ͯΔ • ҆қʹਅࣅͯ͠ɺຊདྷͷࢥͱҟ ͳΔ͍ํʹͳΔ͜ͱ͋Δ •
ΞϓϦ௨ʹAirPodsͷΑ͏ͳ HUDΛ͏ͱɺϢʔβʔצҧ͍͠ ͳ͍͔ʁ 54
࣮ʹ࠷దͳUIAPIΛબͿ • UIKitʹطʹ͋ΔͷΛ࠶࣮͠ͳ͍ • εΫϩʔϧͷ׳ੑΛ࣮͠ͳ͍ɻUIScrollViewΛ͏ • ϘλϯͰྑ͍ͳΒTapGestureͰ࣮͠ͳ͍ 55
σβΠϯͷैίετ • OSͷΞοϓσʔτʹΑͬͯσβΠϯ͕ มΘΔ • ͔࣮ͤͬͨ͘͠UI͕ݹष͘ݟ͑Δ͜ ͱ • σβΠϯͷैίετ͕ൃੜ͢Δ 56
Φϑʹग़དྷΔ͜ͱΕͣʹ • ΞΫηγϏϦςΟͰແޮʹग़དྷΔ͜ͱ • Shake to Undo • Reduce Mo1on
• ࣗલͰ࣮ͨ͠ΒɺΓସ͑ߟྀ͢Δ͜ͱ 57
ݱ࣮తʹग़དྷͳ͍͜ͱ͋Δ • ΧελϜUI࣭͕མͪΔ͜ͱΛલఏʹ • τϨʔυΦϑΛҙࣝͯ͠ɺແବʹΧελϜUI࡞Βͳ͍ͷ͕ίπ • Ұճݟͨͷྑ͍ͷΛ࡞͔ͬͯΒͤͳ͍ • ΞϓϦͷίΞόϦϡʔʹߜ࣮ͬͯͯ͠Έͯ 58
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
͓ΘΓ 60