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
アイコンをComposeにする / Compose the Icons
Search
Masatoshi Kubode
October 17, 2023
Programming
0
360
アイコンをComposeにする / Compose the Icons
https://wantedly.connpass.com/event/297601/
で話しました
Masatoshi Kubode
October 17, 2023
Tweet
Share
More Decks by Masatoshi Kubode
See All by Masatoshi Kubode
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
170
K2への完全移行結果 / Results of complete migration to K2
kubode
1
2k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
450
Compose Shadow Alternative
kubode
0
160
デザインシステムのCompose実装 / Design system Compose implementation
kubode
0
440
KMMのCI/CD
kubode
3
690
WantedlyでのCompose導入 / Introducing Jetpack Compose at Wantedly
kubode
1
380
DroidKaigi/conference-app-2022へのContributionが楽しかった話 / Contributing DroidKaigi app was fun!
kubode
0
940
継続的な依存性のアップデートにより得られたこと / What we have learned from continuous dependency updates
kubode
0
390
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
240
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
870
Netty Chicago Java User Group 2024-04-17
sullis
0
190
Goのmultiple errorsについて (2024年4月版)
syumai
4
1k
Goのエラースタックトレースの歴史と今後
sonatard
9
1.6k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
2
130
エンターテイメント業界で利用されるAWS
demuyan
0
210
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
950
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
260
Milestoner
bkuhlmann
1
410
Site Reliability Engineering for GMO
pyama86
8
1.1k
Featured
See All Featured
Fireside Chat
paigeccino
21
2.6k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Git: the NoSQL Database
bkeepers
PRO
422
63k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Designing Experiences People Love
moore
136
23k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
A Tale of Four Properties
chriscoyier
151
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
In The Pink: A Labor of Love
frogandcode
138
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Transcript
© 2023 Wantedly, Inc. アイコンをComposeにす る モバイル勉強会#11 2023/10/17 久保出雅俊
wantedly.com/id/kubode © 2023 Wantedly, Inc. X: @swiz_ard GitHub: @kubode
最近の活動 © 2023 Wantedly, Inc. https://www.wantedly.com/companies/wantedly/post_articles/547117
今日の内容 今回もComposeと デザインシステムの話 © 2023 Wantedly, Inc.
課題 © 2023 Wantedly, Inc.
課題 アイコンのインポート方法どうしよう © 2023 Wantedly, Inc.
アイコンのインポート方法 • SVGでダウンロードしてVector Asset化(XML) • Composeのコード化 © 2023 Wantedly, Inc.
XMLの課題 • アイコンセット自体がリニューアルしてる ◦ 古いものはXMLリソースとして残っている ◦ アイコン名は一緒なのでそのままだと競合する • Non-transitive R
class ◦ ながい • Androidプラットフォーム依存 © 2023 Wantedly, Inc.
MaterialのIcons © 2023 Wantedly, Inc.
コード化の利点 • パフォーマンス ◦ メモリキャッシュされる ◦ パースしないので高速(なはず • Compose Multiplatform化できる
© 2023 Wantedly, Inc.
アイコンのコード化 © 2023 Wantedly, Inc.
• Figmaから直接コードに ◦ 良さそうなプラグインが見つからず • SVGからコード生成 ◦ MaterialのIconsの手法 コード化の手法 ©
2023 Wantedly, Inc. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md
• Materialでのコード生成はandroidx-mainにある ◦ パッケージ化されてない • forkしてパッケージ化したものが存在するので利用 ◦ DevSrSouza/svg-to-compose SVGからコード化 ©
2023 Wantedly, Inc. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md https://github.com/DevSrSouza/svg-to-compose
コード生成のコード © 2023 Wantedly, Inc.
コード生成のコード © 2023 Wantedly, Inc.
生成されたコード © 2023 Wantedly, Inc.
生成されたコード © 2023 Wantedly, Inc.
生成されたコード © 2023 Wantedly, Inc.
🎉🎉🎉 © 2023 Wantedly, Inc.
微妙なところ © 2023 Wantedly, Inc. ✅Material (ComposeCompletionContributor.kt) ✅R Custom
まとめ • アイコンをComposeのコードにする手法を紹介 ◦ 思ったより簡単 • 展望 ◦ CI/CD組んでアイコンの変更を自動で取り込みたい ◦
Figma plugin作ってみたい © 2023 Wantedly, Inc.
Thanks! © 2023 Wantedly, Inc.