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.9k
事業支援というお仕事
seto_hi
0
420
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
400
Jetpack Compose
seto_hi
2
790
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
200
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
990
Other Decks in Programming
See All in Programming
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
540
プログラマのための作曲入門
cheebow
0
540
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.3k
Model Pollution
hschwentner
1
180
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
120
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
1
210
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
570
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.9k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Code Review Best Practice
trishagee
72
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Cult of Friendly URLs
andyhume
79
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Scaling GitHub
holman
463
140k
Done Done
chrislema
185
16k
Code Reviewing Like a Champion
maltzj
525
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Producing Creativity
orderedlist
PRO
347
40k
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!