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
安定的 60 fps をめざす / the way to 60 fps
Search
Taishi Ikai
January 29, 2018
Technology
19
5.5k
安定的 60 fps をめざす / the way to 60 fps
iOS app
at Otemachi.swift x Kyobashi.swift #02
https://kyobashi-swift.connpass.com/event/75379/
Taishi Ikai
January 29, 2018
Tweet
Share
More Decks by Taishi Ikai
See All by Taishi Ikai
日経電子版でApp内課金を導入した話 / Nikkei uses In-App Purchase
ikait
2
2.7k
紙面ビューアーを支える サーバーレスアーキテクチャ / serverless architecture supports Nikkei's paper viewer
ikait
43
40k
SwiftとCoreTextと文字組み
ikait
1
600
Typography and Fonts と日本語フォントまわり
ikait
2
3.1k
Other Decks in Technology
See All in Technology
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
15
4.1k
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
1
540
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
130
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
420
2/18/25: Java meets AI: Build LLM-Powered Apps with LangChain4j
edeandrea
PRO
0
150
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
390
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
510
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
920
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
200
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
190
Swiftの “private” を テストする / Testing Swift "private"
yutailang0119
0
140
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
150
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Designing for Performance
lara
604
68k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The Cult of Friendly URLs
andyhume
78
6.2k
Thoughts on Productivity
jonyablonski
69
4.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Agile that works and the tools we love
rasmusluckow
328
21k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
1 ҆ఆత 60 fps ΛΊ͟͢ ழࣂ େࢤ ຊܦࡁ৽ฉࣾ Otemachi.swift x
Kyobashi.swift #02
<ಈը>
3 FPS Frames Per Second ͷུ 1 ඵؒʹදࣔ͢ΔϑϨʔϜ ͜Ε͕େ͖͍ͱɺΒ͔ʹݟ͑ΔʢňψϧψϧʼnײɺUX
ʹӨڹ͢ΔԾઆʣ UIScreen.main.maximumFramesPerSecond ࠷େ FPS Λऔಘ͢ΔɻiOS σόΠεͰɺ௨ৗ 60 ϝΠϯεϨουͰߦ͏ॲཧͷͱॏ͞ΛۃྗݮΒͯ͠ɺ࣮ݱΛࢦ͢ ࠓ͔ΒɺҰൠతͳઓུͱɺView ଆʹϑΥʔΧεͨ͠Λ͠·͢ FPS ʹ͍ͭͯ
4 ඞཁͳ͜ͱ͚ͩ͢Δ UIεϨουΛܰ͘͢ΔɺϒϩοΫ͠ͳ͍ Կ͠ͳ͍ ͘͢Δ ༧ΊΔ → Instruments Λݟͳ͕Βɺॏ͍ͱ͜Ζ͔ΒରԠΛ͍ͯ͘͠ FPS
ࢹʹΑΔ֬ೝɺInstruments ͷ Core Animation Ͱ֬ೝ ՄೳͳݶΓݹ͍Λར༻ ํ
5 ͦͷ࣌ͰෆཁͳσʔλΛ֎͢ ͍ͬͯͳ͍ϩδοΫΛফ͢ ֤ͰΔඞཁ͕͋Δͷ͚ͩड͚औΔ ͲͷͰಉ͡ॲཧʹͳΔͳΒɺ API Ͱܗ͓ͯ͘͠ unixtime Ͱड͚औΔͳͲ Ͳ͏ͯ͠
UI εϨου͡Όͳ͍ͱͰ͖ͳ͍͜ͱ͚ͩΔ ❌ ௨৴σΟεΫॻ͖ࠐΈ ❌ NSAttributedString ͷੜɺηϧͷߴ͞ͷܭࢉɺΦϑεΫϦʔϯඳը ඞཁͳ͜ͱ͚ͩΔ
6 UITableViewCell, UITableView(Header|Footer)View ͳͲ࠶ར༻͢Δ εΫϩʔϧͷͨͼʹੜ͢Δͱ݁ߏॏ͍ ϖʔδ UI ͳΒɺVC ࠶ར༻Ͱ͖Δͱྑͦ͞͏ ಉ͡ΧϥʔɺϑΥϯτɺਖ਼نදݱɺϑΥʔϚολʔ࠶ར༻͢Δ
UIColor, UIFont, NSRegularExpression, DateFormatter, NumberFormatter ຖੜ͢Δඞཁͳ͚ΕఆԽ͢ΔɺΩϟογϡ͢Δ Computed property ຖճධՁ͞ΕΔ νϦπϞͰ݁ߏͳϘτϧωοΫʹͳ͍ͬͯΔ͜ͱ Կ͠ͳ͍
7 ߴͳ DBɺΩϟογϡɺπʔϧΛ͏ Realm ͳͲ ंྠͷ࠶ൃ໌͍ͯ͠ͳ͍͔ UITableViewCell ͷߴ͞ܭࢉɺcell ͷͳͲɺԆͤ͞ʹ͍͘ ؤுͬͯ͘Δɺࣄલʹϩʔυ͢Δ
͘Δ
8 UITableView ͷଓ͖ΛಡΉͱ͖ͳͲɺUITableView ʹηϧΛՃ͢Δલʹɺ ઌʹߴ͞Λܭࢉ͓ͯ͘͠ & ΦϑεΫϦʔϯඳըͪ͠Ό͏ ϝϞϦޮͷͰɺඍົ͔͠Εͳ͍? ༧ΊΔ
۩ମతʹ 9
UITableViewCell Λܧঝ͢ΔΫϥεͰ init() ͳͲͰ UILabel, UIImageView Λ contentView ʹՃ Constraints,
StackView Λ͔ͭͬͯஔ cellForRow(at indexPath:) ͷதͰ dequeueReusableCell(withIdentifier identifier:, for indexPath:) Ͱ ηϧΛऔಘ (όοΫάϥϯυͰ) ը૾Λऔಘͯ͠ UIImageView ʹ͢ ηϧͷཁૉ͕૿͑Δʹ࿈Εͯɺॏ͘ͳͬͯ͘Δ 10 UITableView Ͱͷσʔλදࣔ
UITableViewCell Λܧঝ͢ΔΫϥεͰ init() ͳͲͰ UILabel, UIImageView Λ contentView ʹՃ Constraints,
StackView Λ͔ͭͬͯஔ cellForRow(at indexPath:) ͷதͰ dequeueReusableCell(withIdentifier identifier:, for indexPath:) Ͱ ηϧΛऔಘ (όοΫάϥϯυͰ) ը૾Λऔಘͯ͠ UIImageView ʹ͢ ηϧͷཁૉ͕૿͑Δʹ࿈Εͯɺॏ͘ͳͬͯ͘Δ 11 UITableView Ͱͷσʔλදࣔ
12 ҆ఆత 60 fps Λ࣮ݱ͢ΔʹɺAuto Layoutɺ Stack View Ͱ͍͠ ൺֱత৽͍͠Ͱɺཁૉ
(view) ͕ଟ͘ͳΔͱΧΫ͍ͭͯ͘Δ ಛʹຊޠ͕ೖΔͱɺϑΥϯτબ Auto LayoutɺखಈϨΠΞτͷਏΈ ηϧͷߴ͞ܭࢉΛࣗͰߦ͏ Ϩϕϧ 1 → 3 ʹ͚͓ͯ͠͠·͢ Auto Layout ΛΊΔ
13 UILabel, UIImageView ͷ frame ΛࣗͰܭࢉͯ͠ஔ͍ͯ͘͠ ߹ʹΑͬͯ Auto Resizing Mask
Λར༻ Auto Layout Ҏલͷ࣌Ͱओྲྀ ίʔυߦׂΓͱ૿Ճ ߴ͞ܭࢉखಈ UILabel, UIImageView ϝΠϯεϨουͰ৮ΕΔඞཁ͕͋ΔͷͰɺ NSString, NSAttributedString ͷ boundingRect Λར༻ Ϩϕϧ1: खಈϨΠΞτ + Auto Resizing Mask
14 UILabel, UIImageView ΛΘͣʹɺखಈͰඳը͢Δ શͯखಈͰϨΠΞτ UIView (, UITableViewCell) ͷ draw(_:)
Λ্ॻ͖ͯ͠ɺ NSString, NSAttributedString ͷ draw ܥͰॻ͖ࠐΉ NSAttributedString ɺόοΫάϥϯυͰ০͓ͯ͘͠ Ϩϕϧ2: ඳ͘
15 override func draw(_ rect: CGRect) { guard let context
= UIGraphicsGetCurrentContext() else { return nil } var remainRect = rect var attributedStringRect = self.attributedString.boundingRectCached( scope: "emblem", size: remainRect.size, options: [.usesLineFragmentOrigin, .truncatesLastVisibleLine]) self.attributedString.draw( with: remainRect, options: [.usesLineFragmentOrigin, .truncatesLastVisibleLine], context: nil ) remainRect.origin.y += attributedStringRect.bounds.height remainRect.size.height -= attributedStringRect.bounds.height // // ཁૉͷ܁Γฦ͢ // UIGraphicsEndImageContext() }
16 UILabel, UIImageView ΛΘͣʹɺखಈͰඳը͢Δ drawRect ͤͣʹɺόοΫάϥϯυͰ UIGraphicsBeginImageContextWithOptions ͯ͠ɺίϯςΩετΛ࡞Γɺͦ͜ʹॻ͖ࠐΉ ࠷ऴతʹɺඳըྖҬͷ CGImage
Λ࡞͓͍ͬͯͯɺ ͦΕΛΩϟογϡ͓ͯ͘͠ ॾʑͷॲཧΛ࣮֬ʹόοΫάϥϯυʹ ࿈Ε͍͚ͯΔͱ͍͏ϝϦοτ Ϩϕϧ3: CGImage ΛόοΫάϥϯυͰͭͬͯ͘షΔ
17 Func getImage(with bounds: CGSize) -> CGImage { if let
image = CacheStore.get(/* ݅ */) { return image } // όοΫάϥϯυΩϡʔͰɺcontext Λ࡞ UIGraphicsBeginImageContextWithOptions(bounds.size, false, 0) guard let context = UIGraphicsGetCurrentContext() else { return nil } // ࣗͰߴ͞ܭࢉΛ͠ͳ͕ΒɺNSAttributedString ͷ draw ͳͲͰ context ʹॻ͖ࠐΜͰ͍͘ attributedString.draw(with: bounds, options: drawingOptions, context: nil) // ऴΘͬͨΒ makeImage() ͯ͠ context Λऴ͑Δ let image = context.makeImage() UIGraphicsEndImageContext() if let image = image { CacheStore.set(image, forKey: key) } return image } ը૾όοΫάϥϯυͰऔಘͯ͠ɺ CGLayer ͷ cgImage ʹషΔ
18 UIView Ͱ backgroundColor Λ୯৭ʹ UIView Ͱ opaque: true ޮՌ͋·Γ࣮ײͰ͖ͣ...
> Blended view layers often cause slow table scrolling. https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/MeasuringGraphicsPerformance.html Blended Layers Λͳ͘͢
ϝΠϯεϨουΛۃྗΘͳ͍ҙ͕ࣝॏཁ όοΫάϥϯυͰ CGImage ʹॻ͖ࠐΉͷޮՌ͋ͬͨ ඳըʹؔΘΔॲཧΛશͯόοΫάϥϯυʹ͍͚ͬͯͨ ͘ͳΓ͗͢Δͱന͍ηϧ͕ը໘ʹͰͯ͘Δ Auto Layout, StackView Ίͯɺ͍ͩͿૣ͘ͳͬͨ
খ͍͞Օॴ͕ੵͬͯҾ͔͔ͬΔ͜ͱ͕ଟʑ͋ͬͨ NSAttributedString UIFont ͰΩϟογϡ͔ఆԽ 19 ·ͱΊ 20% 10% 40% 30% खಈϨΠΞτ CGImage νϦ
Pinterest ͷਓ͕ͨͪத৺ʹ։ൃ͍ͯ͠Δඇಉظతͷ UI ඳըϑϨʔϜϫʔΫ RxSwift ͱΈ߹Θͤͯ͏ࣄྫ͕গͳ͔ͬͨ & View ·ΘΓ૯ͱ͔͕ͬ͑ඞཁͦ͏ͩͬͨͷͰݟૹͬͨ "Native"
Ͱ͋Δҙٛͱͯ͠ 60 fps ͷୡΛҙ͍ࣝͯ͠Δ Core Text ͳͲϨΠϠʔͳ API ʹׂΓͱ৮͍ͬͯͨ & ݟ͕গͳ͘ϦϦʔεʹؒʹ߹ΘͤΔࣗ৴͕࣋ͯͣɺݟૹͬͨ 20 ࠓޙݕ౼͍ͨ͠ چ໊শ: AsyncDisplayKit
21 ழࣂ େࢤʢ͍͔͍ ͍ͨ͠ʣ ຊܦࡁ৽ฉࣾॴଐͷΤϯδχΞ ͍ͭͬͯ͘Δͷ: iPhone ͷܦిࢠ൛ΞϓϦ iPhone /
iPad ͷࢴ໘ϏϡʔΞʔΞϓϦ ΞϓϦͷόοΫΤϯυܥ (w/αʔόʔϨε) About me