Tweet
Tweet

Slide 1

Slide 1 text

© 2023 Wantedly, Inc. アイコンをComposeにす る モバイル勉強会#11 2023/10/17 久保出雅俊

Slide 2

Slide 2 text

wantedly.com/id/kubode © 2023 Wantedly, Inc. X: @swiz_ard GitHub: @kubode

Slide 3

Slide 3 text

最近の活動 © 2023 Wantedly, Inc. https://www.wantedly.com/companies/wantedly/post_articles/547117

Slide 4

Slide 4 text

今日の内容 今回もComposeと デザインシステムの話 © 2023 Wantedly, Inc.

Slide 5

Slide 5 text

課題 © 2023 Wantedly, Inc.

Slide 6

Slide 6 text

課題 アイコンのインポート方法どうしよう © 2023 Wantedly, Inc.

Slide 7

Slide 7 text

アイコンのインポート方法 ● SVGでダウンロードしてVector Asset化(XML) ● Composeのコード化 © 2023 Wantedly, Inc.

Slide 8

Slide 8 text

XMLの課題 ● アイコンセット自体がリニューアルしてる ○ 古いものはXMLリソースとして残っている ○ アイコン名は一緒なのでそのままだと競合する ● Non-transitive R class ○ ながい ● Androidプラットフォーム依存 © 2023 Wantedly, Inc.

Slide 9

Slide 9 text

MaterialのIcons © 2023 Wantedly, Inc.

Slide 10

Slide 10 text

コード化の利点 ● パフォーマンス ○ メモリキャッシュされる ○ パースしないので高速（なはず ● Compose Multiplatform化できる © 2023 Wantedly, Inc.

Slide 11

Slide 11 text

アイコンのコード化 © 2023 Wantedly, Inc.

Slide 12

Slide 12 text

● Figmaから直接コードに ○ 良さそうなプラグインが見つからず ● SVGからコード生成 ○ MaterialのIconsの手法 コード化の手法 © 2023 Wantedly, Inc. https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/icons/README.md

Slide 13

Slide 13 text

● 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

Slide 14

Slide 14 text

コード生成のコード © 2023 Wantedly, Inc.

Slide 15

Slide 15 text

コード生成のコード © 2023 Wantedly, Inc.

Slide 16

Slide 16 text

生成されたコード © 2023 Wantedly, Inc.

Slide 17

Slide 17 text

生成されたコード © 2023 Wantedly, Inc.

Slide 18

Slide 18 text

生成されたコード © 2023 Wantedly, Inc.

Slide 19

Slide 19 text

🎉🎉🎉 © 2023 Wantedly, Inc.

Slide 20

Slide 20 text

微妙なところ © 2023 Wantedly, Inc. ✅Material (ComposeCompletionContributor.kt) ✅R 󰢃Custom

Slide 21

Slide 21 text

まとめ ● アイコンをComposeのコードにする手法を紹介 ○ 思ったより簡単 ● 展望 ○ CI/CD組んでアイコンの変更を自動で取り込みたい ○ Figma plugin作ってみたい © 2023 Wantedly, Inc.

Slide 22

Slide 22 text

Thanks! © 2023 Wantedly, Inc.