アイコンをComposeにする / Compose the Icons

https://wantedly.connpass.com/event/297601/ で話しました

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 課題
   © 2023 Wantedly, Inc.
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. MaterialのIcons
   © 2023 Wantedly, Inc.
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. ● 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 🎉🎉🎉
    © 2023 Wantedly, Inc.
    

    View Slide

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

    View Slide

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

    View Slide

22. Thanks!
    © 2023 Wantedly, Inc.
    

    View Slide