Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

18/5/25 I/O Extended 2018 Shibuya

HiroYUKI Seto

May 25, 2018
Tweet

More Decks by HiroYUKI Seto

Other Decks in Programming

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