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
440
アイコンを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
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
85
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
110
ウォンテッドリーでのKMPワークフロー / KMP workflow at Wantedly
kubode
0
1k
ComposeでのShared Element Transition / Shared Element Transition in Compose
kubode
0
290
K2への完全移行結果 / Results of complete migration to K2
kubode
2
4.2k
Data Bindingの移行を楽にする / Easier migration of Data Binding
kubode
0
810
Compose Shadow Alternative
kubode
0
250
デザインシステムのCompose実装 / Design system Compose implementation
kubode
0
510
KMMのCI/CD
kubode
3
740
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
CSC307 Lecture 05
javiergs
PRO
0
210
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Rust.Nagoya #1
codemountains
0
170
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
CSC307 Lecture 12
javiergs
PRO
0
220
Terraformテスト入門
msato
0
530
CSC307 Lecture 11
javiergs
PRO
0
240
How to use Macrobenchmark
veronikapj
0
160
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
BBQ
matthewcrist
82
9k
The Cult of Friendly URLs
andyhume
75
5.9k
Navigating Team Friction
lara
181
13k
Infographics Made Easy
chrislema
238
18k
Design by the Numbers
sachag
277
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
In The Pink: A Labor of Love
frogandcode
139
22k
Adopting Sorbet at Scale
ufuk
71
8.8k
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.