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
PicoRuby on Rails
makicamel
2
120
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
850
GoのGenericsによるslice操作との付き合い方
syumai
3
710
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
Benchmark
sysong
0
280
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Site-Speed That Sticks
csswizardry
10
670
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Code Reviewing Like a Champion
maltzj
524
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Writing Fast Ruby
sferik
628
62k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Speed Design
sergeychernyshev
32
1k
Optimizing for Happiness
mojombo
379
70k
Automating Front-end Workflow
addyosmani
1370
200k
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!