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.4k
UIのブラックボックスを探る/iOSDC23
noppefoxwolf
September 02, 2023
Tweet
Share
More Decks by noppefoxwolf
See All by noppefoxwolf
Spice up your notifications/try!Swift25
noppefoxwolf
3
480
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
850
今から理解するApp Intentエコシステム/WWDC24Recap
noppefoxwolf
0
19
既存アプリを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
ソーシャルライブサービスにおけるデジタル化粧の仕組みと実装/iOSDC19
noppefoxwolf
4
5.5k
Other Decks in Programming
See All in Programming
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
OSS開発者という働き方
andpad
5
1.7k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.6k
旅行プランAIエージェント開発の裏側
ippo012
2
930
Improving my own Ruby thereafter
sisshiki1969
1
160
楽して成果を出すためのセルフリソース管理
clipnote
0
190
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
アセットのコンパイルについて
ojun9
0
130
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Context Engineering - Making Every Token Count
addyosmani
3
60
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Building an army of robots
kneath
306
46k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Embracing the Ebb and Flow
colly
87
4.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
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