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
280
Spice up your notifications/try!Swift25
noppefoxwolf
3
750
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
910
今から理解するApp Intentエコシステム/WWDC24Recap
noppefoxwolf
0
24
既存アプリをvisionOS対応してリリースした話/visionOS LT vol5
noppefoxwolf
0
200
CoreGraphicsでドット絵を描こう/iOSDC22
noppefoxwolf
0
2.7k
ランタイムデバッグのススメ/iOSDC21
noppefoxwolf
1
4.9k
google/mediapipe で始めるARアプリ開発/iOSDC2020
noppefoxwolf
1
1.6k
モバイルファーストなアプリを作るためにvearがしたこと/xRDCC
noppefoxwolf
0
150
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
250
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.5k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
730
CSC305 Lecture 08
javiergs
PRO
0
280
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
630
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.5k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Rails Girls Zürich Keynote
gr2m
95
14k
Side Projects
sachag
455
43k
Embracing the Ebb and Flow
colly
88
4.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Balancing Empowerment & Direction
lara
5
700
Writing Fast Ruby
sferik
630
62k
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