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