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
630
アイコンを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
1k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
460
技術を根付かせる / How to make technology take root
kubode
1
370
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
450
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
1
1.3k
Make your Android app into Multiplatform app
kubode
0
160
ウォンテッドリーにおけるモバイルアプリ開発 / iOSDC Japan 2024 Sponsor Session
kubode
1
1.1k
Jetpack ComposeのBottomSheetとの戦い / Fight with BottomSheet of Jetpack Compose
kubode
0
840
Mobile Chapterが目指すところと技術 / Vision and Technology of Mobile Chapter at Wantedly
kubode
0
360
Other Decks in Programming
See All in Programming
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
8
1.4k
令和最新版手のひらコンピュータ
koba789
12
5.6k
decksh - a little language for decks
ajstarks
4
21k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
140
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
180
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
440
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
440
階層化自動テストで開発に機動力を
ickx
1
470
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
930
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
410
DataformでPythonする / dataform-de-python
snhryt
0
150
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
4 Signs Your Business is Dying
shpigford
184
22k
Making Projects Easy
brettharned
117
6.3k
How STYLIGHT went responsive
nonsquared
100
5.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Side Projects
sachag
455
43k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
BBQ
matthewcrist
89
9.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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.