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
650
アイコンを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
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
1.1k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
570
技術を根付かせる / How to make technology take root
kubode
1
400
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
510
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.3k
Make your Android app into Multiplatform app
kubode
0
180
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
1.2k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
930
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
380
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
XP, Testing and ninja testing ZOZ5
m_seki
3
750
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
200
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
360
品質ワークショップをやってみた
nealle
0
570
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.4k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Go言語はstack overflowの夢を見るか?
logica0419
0
480
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
620
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
920
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
570
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
What's in a price? How to price your products and services
michaelherold
246
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Context Engineering - Making Every Token Count
addyosmani
7
270
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Music & Morning Musume
bryan
46
6.8k
Statistics for Hackers
jakevdp
799
220k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Tale of Four Properties
chriscoyier
161
23k
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.