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
[社内LT]あたらしいMaterial Design
Search
きりみん
May 18, 2018
Technology
1
1.7k
[社内LT]あたらしいMaterial Design
きりみん
May 18, 2018
Tweet
Share
More Decks by きりみん
See All by きりみん
AndroidエンジニアがRailsにチャレンジしてる理由
kirimin
1
1.5k
What are AtCoder and competitive programming
kirimin
0
9.9k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
990
アプリエンジニアでも神絵師になりたい!
kirimin
4
5.3k
Watashi ni Kotlin ga maiorita
kirimin
0
480
NEMのAPIとモザイクであそぼう
kirimin
0
360
はじめようきれいなコード
kirimin
8
3k
Material Components for Android触ってみる
kirimin
7
1.9k
Hello-kirimin-chan
kirimin
0
130
Other Decks in Technology
See All in Technology
Platform Engineering for Software Developers and Architects
syntasso
1
520
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
Terraform Stacks入門 #HashiTalks
msato
0
360
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
Lexical Analysis
shigashiyama
1
150
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
How to Ace a Technical Interview
jacobian
276
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Practical Orchestrator
shlominoach
186
10k
Done Done
chrislema
181
16k
The World Runs on Bad Software
bkeepers
PRO
65
11k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
RailsConf 2023
tenderlove
29
900
Transcript
͋ͨΒ͍͠Material Design @kirimin
͋ͨΒ͍͠Material Design • Material Theming • New Components
͋ͨΒ͍͠Material Design • Google I/O2018ʹ߹ΘͤͯϚςϦΞϧσβΠ ϯΨΠυϥΠϯ͕ߋ৽͞Εͨɻ • Material Themingͱ͍͏֓೦͕Ճ͞Εͨ ଞɺComponentsʹଟ͘ͷมߋ͕͋ͬͨɻ
Material Themingʁ • ϚςϦΞϧσβΠϯΛΞϓϦͷϒϥϯυ༻ʹ ΧελϚΠζ͢ΔͨΊͷࢦɻ • ΧϥʔύϨοτϘλϯͳͲͷؙ֯ͷܗͳͲ ΛมߋͰ͖Δɻ
Material Themingʁ
Material Themingʁ • Material Theme Editorͱ͍͏ͷ͕ެ։͞Εͨɻ • Material ThemingΛ࡞ΕΔπʔϧɻ •
ݱঢ়SketchͷPluginͱͯ͠༻ҙ͞Ε͍ͯΔɻ • σβΠϯϞοΫͱͯ͠ग़ྗग़དྷΔ͕ɺAndroidϓϩ δΣΫτͷThemeϑΝΠϧͱͯ͠ΠϯϙʔτͰ͖ͨ Γ͢ΔΘ͚Ͱͳ͍Β͍͠ɻ
New Components • ϚςϦΞϧσβΠϯΨΠυϥΠϯࣗମେ෯ʹߋ৽͞Εɺ৽͠ ͍Component͕ଟ͘Ճ͞Εͨɻ • App bars:bottom • Backdrop
• Banners • Extended FAB • Progress indicators
App bars:bottom
App bars:bottom • ϘτϜφϏήʔγϣϯυϩϫʔϑϩʔςΟϯάΛ ؚΉΞΫγϣϯϘλϯͷΞΫηεΛఏڙ͢Δɻ
When to use • ͲΜͳ࣌ʹ͏͖͔ • ϞόΠϧσόΠεݶఆ • φϏήʔγϣϯυϩϫʔͷΞΫηε •
͔̎Β̑ͷΞΫγϣϯ • App babrs: topͱಉ࣌ʹ͏͜ͱՄ • ͲΜͳ࣌ʹ͏͖Ͱͳ͍͔ • Bottom Navigation Bar(Լλϒ)Λར༻ͨ͠ΞϓϦ • ୯Ұͷը໘͘͠ΞΫγϣϯ͕ͳ͍ΞϓϦ
Backdrop
Backdrop • όοΫͱϑϩϯτͷ̎ͭͷϨΠϠʔ͔Βߏ͞ΕΔɻ όοΫϨΠϠʔΞΫγϣϯͱίϯςΩετΛදࣔɺ ϑϩϯτϨΠϠʔʹͦΕΒͷૢ࡞௨Λදࣔɻ
Backdrop • όοΫϨΠϠʔextend͢ΔϔομʔΈ͍ͨͳΠ ϝʔδʁಈըϓϨΠϠʔΤσΟλʔͳͲૢ࡞͕த ৺ͷΞϓϦͰΘΕΔΠϝʔδ͔͠Εͳ͍ɻ
Banners
Banners • ॏཁͰ؆ૉͳϝοηʔδΛදࣔ͠ɺಉ࣌ʹϢʔβʔ ʹΞΫγϣϯΛఏڙ͢Δ • Bannersը໘ͷTOP(AppBarͷԼ)ʹදࣔ͞ΕΔ
Banners • Bannersಉ࣌ʹҰ͔ͭ͠ද͍͚ࣔͤͯ͞ͳ͍ • ը໘NotificationΈ͍ͨͳҐஔ͚ͮʁ • ࠓ·Ͱख࡞Γ͍͓ͯͨ͠ΒͤόφʔͷΨΠυϥ ΠϯԽ
Floating Action Button • ԡԼ࣌ͷΞΫγϣϯͷΨΠυϥΠϯԽ
Floating Action Button • Extended FAB͕Ճ • Floating Action ButtonΛؙ͚ͩ͡Όͳ͘৭ʑͳ
ελΠϧʹग़དྷΔΑ͏ʹ
Text Fields • FilledͱOutlinedͷ̎ͭͷσβΠϯ͕બΔΑ͏ʹ ͳͬͨ
Text Fields • ̎ͭͷλΠϓಉ͡ػೳΛఏڙ͢ΔͷͰɺͲͪΒΛ બͿ͔ΞϓϦͷελΠϧʹґଘ͢Δ
·ͱΊ • ϚςϦΞϧσβΠϯΨΠυϥΠϯʑਐԽ͍ͯ͠Δɻ • ΨΠυϥΠϯʹͳ͍͕σβΠφʔ͕ಠࣗʹఆ͍ٛͯ͠ ͨΑ͏ͳComponent͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹࠓ·Ͱʮ͜Εඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ
ͪΐͬͱෳࡶͳ͍ʹͳΔ͜ͱ
͓ΘΓ