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

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

自己紹介 • 瀬戸優之 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-alpha1 Android iOS Web Flutter Color theme ◦
◦ ◦ ◦ Type theme ◦ ◦ ◦ ◦ Shape ×※ ◦ ◦ ◦

例:Extended FAB •

例: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 × ◦ × ◦

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

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

Bottom Navigation Bottom App Bar すぐ使える

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

Chips Text fields すぐ使える

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

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

Extended FAB Tooltips まだ待ち

• Color Theme ◦ Androidの一部Componentが8月予定 • Style Theme ◦ 8月予定
まだ待ち

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

gallery.io

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

gallery.io

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

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

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

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

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

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

Have a nice Material life!

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

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

More Decks by HiroYUKI Seto

Other Decks in Programming

Featured

Transcript

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

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