Material Theming対応の前に 知っておきたい、 エンジニア側の対応コスト

18/5/25 I/O Extended 2018 Shibuya

Transcript

1. Material Theming対応の前に
   知っておきたい、
   エンジニア側の対応コスト
   I/O Extended 2018 Shibuya
   株式会社ノハナ 瀬戸優之
   @seto_hi
   

   View Slide

2. 自己紹介
   ● 瀬戸優之 Seto HiroYUKI @seto_hi
   ● Androidエンジニア 兼 アプリデザイナー
   ● 株式会社ノハナ
   ○ 一組でも多くの家族に笑顔を届ける
   ● Material Design大好き
   ○ 「エンジニアが武器にするMaterial Design」
   ○ 「Androidエンジニア デザイン部」主催
   ● Google I/O 2018 現地組
   

   View Slide

3. アンケート
   担当領域
   ● Webデザイナー
   ● アプリデザイナー
   ○ Android、iOS、両方
   ○ iOSでもMaterial Design
   ● エンジニア
   ○ アプリ、Web
   ● その他
   

   View Slide

4. 本題
   

   View Slide

5. Material Theming!!!
   

   View Slide

6. Material Theming
   気に入った人？
   

   View Slide

7. Material Theming
   対応したい人？
   

   View Slide

8. 対応しましょう！
   

   View Slide

9. エンジニア「えっ」
   

   View Slide

10. Material Theming
    エンジニアの対応コストは
    低くない
    

    View Slide

11. Material Components
    

    View Slide

12. Material Components(MDC)
    ● Material Theming対応UIを簡単に実装できるライブラリ
    ○ Google製、GitHubで公開
    ● Android、iOS、Flutter、Web、React向け
    ● 現在も活発に開発中！
    ● https://github.com/material-components
    

    View Slide

13. MDC導入コスト
    

    View Slide

14. MDC iOS
    ● 必要要件
    ○ Xcode 8.3.3以上
    ○ iOS 8以降サポート
    ○ CocoaPods
    ■ 開発用のライブラリ管理システム
    ● だいたいの会社は対応できる
    

    View Slide

15. MDC iOS
    ● アップデートが超多い
    ○ 4/1から25回リリース
    ○ メジャーバージョンもどんどん上がる
    ● アップデートに対応し続けるコストが発生しそう
    ● issue数..
    

    View Slide

16. MDC Android
    ● 必要要件
    ○ Android Studio 3.2 (現在Canary 15)
    ○ ビルド対象OS Android P (compileSdkVersion ‘P’)
    ○ androidx or Support Library 28.0.0 alpha1対応
    ■ androidxはI/Oで発表された新ライブラリ
    ● まだサードパーティーが対応できていない
    ■ Support Library 28.0.0はalpha1
    ● 対応できる会社は少ない
    

    View Slide

17. MDC Flutter
    ● Flutter
    ○ import 'package:flutter/material.dart';
    ○ 以上！
    

    View Slide

18. MDCの現状
    

    View Slide

19. 例:Button
    ●
    

    View Slide

20. 例:Button対応状況
    ※ com.google.android.material:material:1.0.0-alpha1
    Android iOS Web Flutter
    Color theme ○ ○ ○ ○
    Type theme ○ ○ ○ ○
    Shape ×※ ○ ○ ○
    

    View Slide

21. 例:Extended FAB
    ●
    

    View Slide

22. 例:Extended FAB 対応状況
    ※1 com.google.android.material:material:1.0.0-alpha1
    ※2 v0.35.2
    Android iOS Web Flutter
    対応 ×※1 ○ ×※2 ○
    Color theme × ○ × ○
    Type theme × ○ × ○
    

    View Slide

23. https://github.com/material-components/material-components/blob/develop/ROADMAP.md
    Roadmap
    

    View Slide

24. すぐ使える
    コンポーネント
    

    View Slide

25. Bottom Navigation
    Bottom App Bar
    すぐ使える
    

    View Slide

26. Buttons
    Cards
    ※AndroidはShapeに未対応
    すぐ使える
    

    View Slide

27. Chips
    Text fields
    すぐ使える
    

    View Slide

28. まだ「待ち」な
    コンポーネント
    

    View Slide

29. ● Backdrop
    ○ Androidは7月に対応予定
    まだ待ち
    

    View Slide

30. Extended FAB
    Tooltips
    まだ待ち
    

    View Slide

31. ● Color Theme
    ○ Androidの一部Componentが8月予定
    ● Style Theme
    ○ 8月予定
    まだ待ち
    

    View Slide

32. 注意：
    MDCが
    対応していなくても使える
    (ただし実装コストがかかる)
    

    View Slide

33. gallery.io
    

    View Slide

34. gallery.io
    ● よいところ
    ○ 無料
    ○ Google アカウントと連携
    ○ ガイドラインへのリンク
    ○ スマホアプリがある
    ○ Material Theme Editorとの親和性
    

    View Slide

35. gallery.io
    

    View Slide

36. gallery.io
    

    View Slide

37. Zeplinとの比較
    ● よいところ
    ○ 無料
    ○ Google アカウントと連携
    ○ ガイドラインへのリンク
    ○ スマホアプリがある
    ○ Material Theme Editorとの親和性
    ■ 簡単にアップロードできる
    

    View Slide

38. Zeplinとの比較
    ● よくないところ
    ○ 全体的にまだ最低限の機能
    ○ 画像やアイコンなどがDLできない
    

    View Slide

39. gallery.io
    ● まだリリース直後
    ● 今後も機能追加をしていくとのこと
    ○ アプリ向けのThemeをDLできるようになるかも？
    ● Send Feedback！
    ○ Sandboxで何回も言われた
    

    View Slide

40. どうやって
    対応していくべき？
    

    View Slide

41. どうすべき？
    ● まずはエンジニアと相談
    ○ 対応できるタイミング
    ○ 対応すべきタイミング
    ○ 対応コスト
    ● アップデートに注目しておく
    ○ 何ができるようになるか
    ○ どこまでできるか
    

    View Slide

42. 準備はしておき、
    会社として
    ベストなタイミングで
    対応を狙っていく
    

    View Slide

43. Have a nice
    Material life!
    

    View Slide