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
10k
バーチャル男声幼女プログラマーとして活動した1年間の振り返り
kirimin
0
1k
アプリエンジニアでも神絵師になりたい!
kirimin
4
5.4k
Watashi ni Kotlin ga maiorita
kirimin
0
530
NEMのAPIとモザイクであそぼう
kirimin
0
380
はじめようきれいなコード
kirimin
8
3k
Material Components for Android触ってみる
kirimin
7
2k
Hello-kirimin-chan
kirimin
0
140
Other Decks in Technology
See All in Technology
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
7
740
Symfony in 2025: Scaling to 0
fabpot
2
220
製造業の会計システムをDDDで開発した話
caddi_eng
3
1k
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
430
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.3k
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.3k
AWS CDK コントリビュート はじめの一歩
yendoooo
1
120
Riverpod & Riverpod Generatorを利用して状態管理部分の処理を書き換えてみる簡単な事例紹介
fumiyasac0921
0
110
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
大規模サービスにおける カスケード障害
takumiogawa
3
660
テキスト解析で見る PyCon APAC 2025 セッション&スピーカートレンド分析
negi111111
0
130
お問い合わせ対応の改善取り組みとその進め方
masartz
1
430
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Agile that works and the tools we love
rasmusluckow
328
21k
Fireside Chat
paigeccino
37
3.3k
Practical Orchestrator
shlominoach
186
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Code Reviewing Like a Champion
maltzj
522
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
It's Worth the Effort
3n
184
28k
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͕ެࣜʹऔΓೖΕΒΕ͍ͯ͘Π ϝʔδɻ • ΤϯδχΞతʹࠓ·Ͱʮ͜Εඍົ͡ΌͶʁʯͱࢥ ͍ͭͭै͍ͬͯͨΨΠυϥΠϯ͕มΘ͍ͬͯ͘ͷͰɺ
ͪΐͬͱෳࡶͳ͍ʹͳΔ͜ͱ
͓ΘΓ