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
Lil Ossa リルオッサ
January 15, 2022
Programming
140
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
99
Other Decks in Programming
See All in Programming
Dockerfile CMD for Node.js
grazie1999
0
140
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
har1101
2
390
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
tatsuki12
4
1.1k
Introducing Stack Pull Request in GitHub
kkamegawa
0
110
AIと壁打ちしながら進めるコスト管理
fufuhu
2
1.8k
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
musan
2
240
typoなんかねぇよ
raspython3
0
610
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
izumin5210
0
450
Go 1.27からのGODEBUG / Go 1.27 リリースパーティ #go127party
mazrean
0
250
Go を使い始めて 2 ヶ月の学び / My first two months with Go
contour_gara
0
390
自動化したのに回らない テスト運用の壁―AI時代の品質責任と生産性
mfunaki
0
530
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
5
1.8k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Google's AI Overviews - The New Search
badams
0
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
510
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
240
The untapped power of vector embeddings
frankvandijk
2
1.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Building Adaptive Systems
keathley
44
3.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
GitHub's CSS Performance
jonrohan
1033
470k
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