Pro Yearly is on sale from $80 to $50! »

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

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

18/5/25 I/O Extended 2018 Shibuya

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

May 25, 2018
Tweet

Transcript

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

    @seto_hi
  2. 自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア 兼 アプリデザイナー

    • 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける • Material Design大好き ◦ 「エンジニアが武器にするMaterial Design」 ◦ 「Androidエンジニア デザイン部」主催 • Google I/O 2018 現地組
  3. アンケート 担当領域 • Webデザイナー • アプリデザイナー ◦ Android、iOS、両方 ◦ iOSでもMaterial

    Design • エンジニア ◦ アプリ、Web • その他
  4. 本題

  5. Material Theming!!!

  6. Material Theming 気に入った人?

  7. Material Theming 対応したい人?

  8. 対応しましょう!

  9. エンジニア「えっ」

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

  11. Material Components

  12. Material Components(MDC) • Material Theming対応UIを簡単に実装できるライブラリ ◦ Google製、GitHubで公開 • Android、iOS、Flutter、Web、React向け •

    現在も活発に開発中! • https://github.com/material-components
  13. MDC導入コスト

  14. MDC iOS • 必要要件 ◦ Xcode 8.3.3以上 ◦ iOS 8以降サポート

    ◦ CocoaPods ▪ 開発用のライブラリ管理システム • だいたいの会社は対応できる
  15. MDC iOS • アップデートが超多い ◦ 4/1から25回リリース ◦ メジャーバージョンもどんどん上がる • アップデートに対応し続けるコストが発生しそう

    • issue数..
  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 • 対応できる会社は少ない
  17. MDC Flutter • Flutter ◦ import 'package:flutter/material.dart'; ◦ 以上!

  18. MDCの現状

  19. 例:Button •

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

    ◦ ◦ ◦ Type theme ◦ ◦ ◦ ◦ Shape ×※ ◦ ◦ ◦
  21. 例:Extended FAB •

  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 × ◦ × ◦
  23. https://github.com/material-components/material-components/blob/develop/ROADMAP.md Roadmap

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

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

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

  27. Chips Text fields すぐ使える

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

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

  30. Extended FAB Tooltips まだ待ち

  31. • Color Theme ◦ Androidの一部Componentが8月予定 • Style Theme ◦ 8月予定

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

  33. gallery.io

  34. gallery.io • よいところ ◦ 無料 ◦ Google アカウントと連携 ◦ ガイドラインへのリンク

    ◦ スマホアプリがある ◦ Material Theme Editorとの親和性
  35. gallery.io

  36. gallery.io

  37. Zeplinとの比較 • よいところ ◦ 無料 ◦ Google アカウントと連携 ◦ ガイドラインへのリンク

    ◦ スマホアプリがある ◦ Material Theme Editorとの親和性 ▪ 簡単にアップロードできる
  38. Zeplinとの比較 • よくないところ ◦ 全体的にまだ最低限の機能 ◦ 画像やアイコンなどがDLできない

  39. gallery.io • まだリリース直後 • 今後も機能追加をしていくとのこと ◦ アプリ向けのThemeをDLできるようになるかも? • Send Feedback!

    ◦ Sandboxで何回も言われた
  40. どうやって 対応していくべき?

  41. どうすべき? • まずはエンジニアと相談 ◦ 対応できるタイミング ◦ 対応すべきタイミング ◦ 対応コスト •

    アップデートに注目しておく ◦ 何ができるようになるか ◦ どこまでできるか
  42. 準備はしておき、 会社として ベストなタイミングで 対応を狙っていく

  43. Have a nice Material life!