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.3k
UIのブラックボックスを探る/iOSDC23
noppefoxwolf
September 02, 2023
Tweet
Share
More Decks by noppefoxwolf
See All by noppefoxwolf
Spice up your notifications/try!Swift25
noppefoxwolf
2
410
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
720
今から理解するApp Intentエコシステム/WWDC24Recap
noppefoxwolf
0
9
既存アプリをvisionOS対応してリリースした話/visionOS LT vol5
noppefoxwolf
0
190
CoreGraphicsでドット絵を描こう/iOSDC22
noppefoxwolf
0
2.5k
ランタイムデバッグのススメ/iOSDC21
noppefoxwolf
1
4.6k
google/mediapipe で始めるARアプリ開発/iOSDC2020
noppefoxwolf
1
1.5k
モバイルファーストなアプリを作るためにvearがしたこと/xRDCC
noppefoxwolf
0
140
ソーシャルライブサービスにおけるデジタル化粧の仕組みと実装/iOSDC19
noppefoxwolf
4
5.5k
Other Decks in Programming
See All in Programming
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
140
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
250
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
450
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Go1.25からのGOMAXPROCS
kuro_kurorrr
0
160
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
640
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
160
Parallel::Pipesの紹介
skaji
2
910
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
350
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How GitHub (no longer) Works
holman
314
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Become a Pro
speakerdeck
PRO
28
5.4k
Making Projects Easy
brettharned
116
6.2k
Bash Introduction
62gerente
614
210k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building Applications with DynamoDB
mza
95
6.4k
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