Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Material Theming対応の前に 知っておきたい、 エンジニア側の対応コスト
Search
HiroYUKI Seto
May 25, 2018
Programming
1
22k
Material Theming対応の前に 知っておきたい、 エンジニア側の対応コスト
18/5/25 I/O Extended 2018 Shibuya
HiroYUKI Seto
May 25, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.8k
事業支援というお仕事
seto_hi
0
410
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
390
Jetpack Compose
seto_hi
2
780
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
190
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
970
Other Decks in Programming
See All in Programming
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
エンジニア向け採用ピッチ資料
inusan
0
180
エラーって何種類あるの?
kajitack
5
330
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
250
VS Code Update for GitHub Copilot
74th
1
560
Create a website using Spatial Web
akkeylab
0
310
NPOでのDevinの活用
codeforeveryone
0
680
Select API from Kotlin Coroutine
jmatsu
1
210
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
660
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Cult of Friendly URLs
andyhume
79
6.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
KATA
mclloyd
30
14k
Transcript
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
gallery.io
Zeplinとの比較 • よいところ ◦ 無料 ◦ Google アカウントと連携 ◦ ガイドラインへのリンク
◦ スマホアプリがある ◦ Material Theme Editorとの親和性 ▪ 簡単にアップロードできる
Zeplinとの比較 • よくないところ ◦ 全体的にまだ最低限の機能 ◦ 画像やアイコンなどがDLできない
gallery.io • まだリリース直後 • 今後も機能追加をしていくとのこと ◦ アプリ向けのThemeをDLできるようになるかも? • Send Feedback!
◦ Sandboxで何回も言われた
どうやって 対応していくべき?
どうすべき? • まずはエンジニアと相談 ◦ 対応できるタイミング ◦ 対応すべきタイミング ◦ 対応コスト •
アップデートに注目しておく ◦ 何ができるようになるか ◦ どこまでできるか
準備はしておき、 会社として ベストなタイミングで 対応を狙っていく
Have a nice Material life!