Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Material Theming対応の前に 知っておきたい、 エンジニア側の対応コスト
HiroYUKI Seto
May 25, 2018
Programming
1
19k
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
1
4.5k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.4k
事業支援というお仕事
seto_hi
0
300
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.4k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
220
Jetpack Compose
seto_hi
2
500
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
3.7k
MDCのButtonのCorner Family
seto_hi
1
120
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
680
Other Decks in Programming
See All in Programming
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
290
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
620
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
2.4k
職場にPythonistaを増やす方法
soogie
0
300
From Java 11 to 17 and beyond
josepaumard
0
290
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
manfredsteyer
PRO
0
390
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
100
Nix for Scala folks
kubukoz
0
120
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
340
Kueue入門/Kueue Introduction
bells17
0
510
Managing gRPC with Wire
oldergod
2
150
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
hpgrahsl
0
310
Featured
See All Featured
Producing Creativity
orderedlist
PRO
333
37k
How to train your dragon (web standard)
notwaldorf
57
3.8k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
Web Components: a chance to create the future
zenorocha
303
40k
Faster Mobile Websites
deanohume
294
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
Visualization
eitanlees
124
11k
The Most Common Mistakes in Cover Letters
jrick
PRO
4
24k
Robots, Beer and Maslow
schacon
152
7.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Agile that works and the tools we love
rasmusluckow
319
19k
Designing with Data
zakiwarfel
91
3.9k
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!