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
SFSymbolsの楽しみ方
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Lil Ossa リルオッサ
January 15, 2022
Programming
130
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
SFSymbolsの楽しみ方
SFSymbolsの説明と、見つけてしまったSFSymbolsの楽しみ方をお伝えします。
Lil Ossa リルオッサ
January 15, 2022
More Decks by Lil Ossa リルオッサ
See All by Lil Ossa リルオッサ
The Widget Revolution
littleossa
1
98
Other Decks in Programming
See All in Programming
プロポーザルを書いてもらう
pvcresin
0
290
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
petamoriken
0
210
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
yuriko1211
0
590
「寝てても仕事が進む」Claude Codeで組む第二の脳
tomoyafujita2016
0
310
VibeCodingからAgenticWorkflowへ
starfish719
0
330
20260722_microCMSで考える、AI時代のコンテンツ運用設計
yosh1
0
380
仕様駆動開発の消費期限
watany
16
7.3k
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
670
Go 1.27 における memory allocation の高速化
andpad
0
110
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
guvalif
PRO
1
200
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
freee
PRO
0
450
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
gotok365
3
2.8k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.5k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
490
The Limits of Empathy - UXLibs8
cassininazir
1
600
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.7k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
280
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.9k
Building the Perfect Custom Keyboard
takai
2
830
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
730
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Transcript
SFSymbolsͷָ͠Έํ 2022/1/15 ϦϧΦοα
ࣗݾհ Name: ϦϧΦοα note: littleossa Github: littleossa Twitter: @littleossa 2
SFSymbolsΛָ͠ΜͰ͍·͔͢ʁ
SFSymbolsͱ
SFSymbolsͱ • Apple͕ఏڙ͍ͯ͠ΔγϯϘϧϑΥϯτ • SFSymbols3.2࣌Ͱɺ3309ݸͷγϯϘϧΛఏڙ͍ͯ͠·͢ • ͜ΕΒΛΤΫεϙʔτޙɺϕΫλʔάϥϑΟοΫฤूπʔϧͰฤू͠ ͯΧελϜγϯϘϧΛ࡞Ͱ͖Δ • SFͱɺAppleͷఏڙ͍ͯ͠ΔSan
Franciscoͱ͍͏ϑΥϯτͷ͜ͱΛ ࢦ͍ͯ͠Δ
SFSymbolsͷԸܙ • Apple͕ެࣜͰ༻͍ͯ͠Δߴ࣭ͷΞΠί ϯΛಉ͡Α͏ʹ༻Ͱ͖Δ • ݸਓ։ൃऀ͕ΞΠίϯ࡞ʹϦιʔεΛׂ͔ ͳͯ͘ྑ͍ • ༷ʑͳ༻్͚ͷγϯϘϧ͕༻ҙ͞Ε͓ͯ Γɺ͔Ώ͍ͱ͜Ζʹख͕ಧ͘
ϝϞApp
ͲͷΑ͏ͳγϯϘϧ͕͋Δͷ͔
ͲͷΑ͏ͳγϯϘϧ͕͋Δͷ͔ ࣮ࡍʹΞϓϦͷΞΠίϯͱͯ͑ͦ͠͏ͳͷ͔Β ʮ͜Μͳͷ·Ͱ͋ΔΜͩʂʯ ʮ͜ΕҰମ͍ͭ͏Μͩʁʯ ͱ͍͏ͷ·Ͱ ຊʹόϥΤςΟ๛Ͱ SFSymbolsͷΧλϩάΛݟΔ͚ͩͰָ͍͠Ͱ͢
͜Μͳͷ·Ͱ͋ΔΜͩʂ
͜ΕҰମ͍ͭ͏ΜͩϥϯΩϯάୈ3Ґ ※100%ݸਓతͳओ؍Ͱ͢ ҨӨ
͜ΕҰମ͍ͭ͏ΜͩϥϯΩϯάୈ2Ґ ※100%ݸਓతͳओ؍Ͱ͢ ંΓΈܞଳ
͜ΕҰମ͍ͭ͏ΜͩϥϯΩϯάୈ1Ґ ※100%ݸਓతͳओ؍Ͱ͢ Έͦ
SFSymbols͕ؾʹͳͬͨํ ࠓ͙͢Πϯετʔϧʂ
SFSymbolsͷΠϯετʔϧ ํ๏ https://developer.apple.com/sf-symbols/ 1. ͜ͷαΠτʹΞΫηε 2. Լ෦ͷμϯϩʔυ͔Βμϯ ϩʔυͯ͠Πϯετʔϧ͢Δ͚ͩ
࣮ࡍʹ͏
Imageͱͯ͠γϯϘϧΛ͏ 1. StoryboardʹImageViewΛՃ 2. ImageͷϑΥʔϜʹԿ͔จࣈΛೖ ྗ 3. SystemͷImageͱͯ͠γϯϘϧ͕ දࣔ͞ΕΔ ※
OSʹґଘ͢Δͷଟ͘ɺ༻ग़དྷͳ͍߹ܯࠂ͕ग़Δ
Imageͱͯ͠γϯϘϧΛ͏ ίʔυ͔Β༻͢Δ͜ͱͰ͖·͢ɻ let image = UIImage(systemName:"person.crop.artframe") systemNameSFSymbolsͷγϯϘϧͷ໊લͰɺӈΫϦοΫͰ໊લͷ ίϐʔΛબ͢Δ͜ͱ͕ग़དྷ·͢ɻ ※ ίʔυ͔Β༻͢Δ߹ɺOSґଘʹΑΓ༻ग़དྷͳ͍߹ͷܯࠂग़ͳ͍ͷͰҙ͕ඞཁͰ͢
scaleͱweightઃఆͰ͖Δ let configuration = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .medium, scale: .large)
let image = UIImage(systemName: "square.and.arrow.up", withConfiguration: configuration) Storyboard ίʔυ
iOS15͔Β͑ΔSFSymbolsʹ ෳͷΧϥʔΛઃఆ͢Δํ๏
iOS15ະຬͰͷΧϥʔઃఆํ๏ let image = UIImage(systemName: "face.smiling.fill") imageView.image = image systemeͷImageΛೖ͢Δ͚ͩͰɺ
σϑΥϧτΧϥʔͷ1৭͚ͩͰ০͞Ε͍ͯ·͢ ͋Δ͍ɺ imageView.tintColor = .tintColor
ύϨοτΧϥʔΛઃఆ͢Δ let image = UIImage(systemName: "face.smiling.fill") let configuration = UIImage.SymbolConfiguration(paletteColors:
[.black, .systemYellow]) imageView.image = image imageView.preferredSymbolConfiguration = configuration iOS15͔Β༻Ͱ͖Δ UIImage.SymbolCon fi guration.init(paletteColors:)Ͱ SymbolCon fi gurationΛੜͯ͠ઃఆ͢Δ͜ͱͰγϯϘϧͷΠϝʔδ ʹෳͷΧϥʔΛׂΓͯΔ͜ͱ͕ग़དྷ·͢
֊ΧϥʔΛઃఆ͢Δ iOS15͔Β༻Ͱ͖Δ UIImage.SymbolCon fi guration.init(hierarchicalColor:) ͰSymbolCon fi gurationΛੜͯ͠ઃఆ͢Δ͜ͱͰࢦఆͨ͠جຊ৭ͷ ڧΛԼ͛ͨ৭ͷΛଞͷ֊ͷϨΠϠʔͷׂΓͯ·͢ɻ let
image = UIImage(systemName: "trash.slash") let configuration = UIImage.SymbolConfiguration(hierarchicalColor: .systemMint) imageView.preferredSymbolConfiguration = configuration imageView.image = image
ϚϧνΧϥʔΛઃఆ͢Δ iOS15͔Β༻Ͱ͖Δ UIImage.SymbolCon fi guration.preferringMulticolorϝιουΛ༻ ͢ΔͱɺγϯϘϧ͕ϚϧνΧϥʔόϦΞϯτΛ͍࣋ͬͯΔ߹ ͦͷΧϥʔׂ͕ΓͯΒΕ·͢ let image =
UIImage(systemName: "ladybug.fill") imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration.preferringMulticolor() imageView.tintColor = .brown imageView.image = image
SFSymbolsͷਅͷָ͠Έํ
Title: DJ શͯSFSymbolsͷΈͰ࡞͠·ͨ͠ɻ
ਪ͠ͷSFSymbolsΛݟ͚ͭͯɺ ָ͠ΜͰ͍ͩ͘͞
None