Slide 1
Slide 1 text
Material Theming対応の前に
知っておきたい、
エンジニア側の対応コスト
I/O Extended 2018 Shibuya
株式会社ノハナ 瀬戸優之
@seto_hi
Slide 2
Slide 2 text
自己紹介
● 瀬戸優之 Seto HiroYUKI @seto_hi
● Androidエンジニア 兼 アプリデザイナー
● 株式会社ノハナ
○ 一組でも多くの家族に笑顔を届ける
● Material Design大好き
○ 「エンジニアが武器にするMaterial Design」
○ 「Androidエンジニア デザイン部」主催
● Google I/O 2018 現地組
Slide 3
Slide 3 text
アンケート
担当領域
● Webデザイナー
● アプリデザイナー
○ Android、iOS、両方
○ iOSでもMaterial Design
● エンジニア
○ アプリ、Web
● その他
Slide 4
Slide 4 text
本題
Slide 5
Slide 5 text
Material Theming!!!
Slide 6
Slide 6 text
Material Theming
気に入った人？
Slide 7
Slide 7 text
Material Theming
対応したい人？
Slide 8
Slide 8 text
対応しましょう！
Slide 9
Slide 9 text
エンジニア「えっ」
Slide 10
Slide 10 text
Material Theming
エンジニアの対応コストは
低くない
Slide 11
Slide 11 text
Material Components
Slide 12
Slide 12 text
Material Components(MDC)
● Material Theming対応UIを簡単に実装できるライブラリ
○ Google製、GitHubで公開
● Android、iOS、Flutter、Web、React向け
● 現在も活発に開発中！
● https://github.com/material-components
Slide 13
Slide 13 text
MDC導入コスト
Slide 14
Slide 14 text
MDC iOS
● 必要要件
○ Xcode 8.3.3以上
○ iOS 8以降サポート
○ CocoaPods
■ 開発用のライブラリ管理システム
● だいたいの会社は対応できる
Slide 15
Slide 15 text
MDC iOS
● アップデートが超多い
○ 4/1から25回リリース
○ メジャーバージョンもどんどん上がる
● アップデートに対応し続けるコストが発生しそう
● issue数..
Slide 16
Slide 16 text
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
● 対応できる会社は少ない
Slide 17
Slide 17 text
MDC Flutter
● Flutter
○ import 'package:flutter/material.dart';
○ 以上！
Slide 18
Slide 18 text
MDCの現状
Slide 19
Slide 19 text
例:Button
●
Slide 20
Slide 20 text
例:Button対応状況
※ com.google.android.material:material:1.0.0-alpha1
Android iOS Web Flutter
Color theme ○ ○ ○ ○
Type theme ○ ○ ○ ○
Shape ×※ ○ ○ ○
Slide 21
Slide 21 text
例:Extended FAB
●
Slide 22
Slide 22 text
例: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 × ○ × ○
Slide 23
Slide 23 text
https://github.com/material-components/material-components/blob/develop/ROADMAP.md
Roadmap
Slide 24
Slide 24 text
すぐ使える
コンポーネント
Slide 25
Slide 25 text
Bottom Navigation
Bottom App Bar
すぐ使える
Slide 26
Slide 26 text
Buttons
Cards
※AndroidはShapeに未対応
すぐ使える
Slide 27
Slide 27 text
Chips
Text fields
すぐ使える
Slide 28
Slide 28 text
まだ「待ち」な
コンポーネント
Slide 29
Slide 29 text
● Backdrop
○ Androidは7月に対応予定
まだ待ち
Slide 30
Slide 30 text
Extended FAB
Tooltips
まだ待ち
Slide 31
Slide 31 text
● Color Theme
○ Androidの一部Componentが8月予定
● Style Theme
○ 8月予定
まだ待ち
Slide 32
Slide 32 text
注意：
MDCが
対応していなくても使える
(ただし実装コストがかかる)
Slide 33
Slide 33 text
gallery.io
Slide 34
Slide 34 text
gallery.io
● よいところ
○ 無料
○ Google アカウントと連携
○ ガイドラインへのリンク
○ スマホアプリがある
○ Material Theme Editorとの親和性
Slide 35
Slide 35 text
gallery.io
Slide 36
Slide 36 text
gallery.io
Slide 37
Slide 37 text
Zeplinとの比較
● よいところ
○ 無料
○ Google アカウントと連携
○ ガイドラインへのリンク
○ スマホアプリがある
○ Material Theme Editorとの親和性
■ 簡単にアップロードできる
Slide 38
Slide 38 text
Zeplinとの比較
● よくないところ
○ 全体的にまだ最低限の機能
○ 画像やアイコンなどがDLできない
Slide 39
Slide 39 text
gallery.io
● まだリリース直後
● 今後も機能追加をしていくとのこと
○ アプリ向けのThemeをDLできるようになるかも？
● Send Feedback！
○ Sandboxで何回も言われた
Slide 40
Slide 40 text
どうやって
対応していくべき？
Slide 41
Slide 41 text
どうすべき？
● まずはエンジニアと相談
○ 対応できるタイミング
○ 対応すべきタイミング
○ 対応コスト
● アップデートに注目しておく
○ 何ができるようになるか
○ どこまでできるか
Slide 42
Slide 42 text
準備はしておき、
会社として
ベストなタイミングで
対応を狙っていく
Slide 43
Slide 43 text
Have a nice
Material life!