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
4.5k
UIのブラックボックスを探る/iOSDC23
noppefoxwolf
September 02, 2023
Tweet
Share
More Decks by noppefoxwolf
See All by noppefoxwolf
High performance GIF playback/iOSDC25
noppefoxwolf
1
220
Spice up your notifications/try!Swift25
noppefoxwolf
3
740
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
880
今から理解するApp Intentエコシステム/WWDC24Recap
noppefoxwolf
0
21
既存アプリをvisionOS対応してリリースした話/visionOS LT vol5
noppefoxwolf
0
200
CoreGraphicsでドット絵を描こう/iOSDC22
noppefoxwolf
0
2.7k
ランタイムデバッグのススメ/iOSDC21
noppefoxwolf
1
4.8k
google/mediapipe で始めるARアプリ開発/iOSDC2020
noppefoxwolf
1
1.5k
モバイルファーストなアプリを作るためにvearがしたこと/xRDCC
noppefoxwolf
0
150
Other Decks in Programming
See All in Programming
CSC509 Lecture 04
javiergs
PRO
0
290
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
CSC305 Lecture 01
javiergs
PRO
1
400
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
私はどうやって技術力を上げたのか
yusukebe
43
17k
CSC305 Lecture 04
javiergs
PRO
0
250
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
ててべんす独演会〜Flowの全てを語ります〜
tbsten
1
220
株式会社 Sun terras カンパニーデック
sunterras
0
220
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
680
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Faster Mobile Websites
deanohume
310
31k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
The Language of Interfaces
destraynor
162
25k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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