Tweet
Tweet

Slide 1

Slide 1 text

Material Design with Polymer 2014-07-28 ୈ49ճ HTML5ͱ͔ษڧձ Ayumu Sato @ahomu

Slide 2

Slide 2 text

ࠤ౻ า ͞ͱ͏ ͋ΏΉ

Slide 3

Slide 3 text

ϋϯυϧωʔϜ ahomu @

Slide 4

Slide 4 text

100ਓ͘Β͍͔ͱࢥͬͯͨΒ 350ਓืूͰϏϏͬͯ·͢ɻ

Slide 5

Slide 5 text

Profile • גࣜձࣾαΠόʔΤʔδΣϯτ • WebϑϩϯτΤϯυΤϯδχΞ • PHPer + SE → Frontend + Node + Android + AWS͋ • HTML5 Experts.jp ʹ͓͚Δ༓ྶ෦һͷͻͱΓ • ࠷ۙͷ೰Έ͸ɺࣾ಺ͰΦοαϯʹݟΒΕΔ͜ͱʢΞϥαʔʣ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Agenda • Google I/O ͷײ૝ • Material Design ͷ͓͞Β͍ • ίϯηϓτ • ΨΠυϥΠϯͷαϚϦʔ • Web Ͱ࢖͏ • Polymer • Papaer Elements

Slide 8

Slide 8 text

Google I/O 2014

Slide 9

Slide 9 text

ॳɾGoogle I/O

Slide 10

Slide 10 text

ͪΌΜͱࢀՃ͠·ͨ͠ Registration ͔Βͯ͠ӳձ࿩ྗͷແ͞Λ௧ײ

Slide 11

Slide 11 text

ӳޠ͕ୡऀͰ͸ͳ͍ͷͰ ࣈນ੮ͷ͓ੈ࿩ʹ

Slide 12

Slide 12 text

͋ͱ͸งғؾͰ ʗ(^o^)ʘ

Slide 13

Slide 13 text

Polymer and Web Components change everything you know about Web development https://www.youtube.com/watch?v=8OJ7ih8EE7s

Slide 14

Slide 14 text

How we built Chrome Dev Editor with the Chrome platform https://www.youtube.com/watch?v=NNLnTz6yIc4

Slide 15

Slide 15 text

Material science: Developing Android applications with material design https://www.youtube.com/watch?v=lSH9aKXjgt8

Slide 16

Slide 16 text

Material design: Visual style and imagery https://www.youtube.com/watch?v=ctzWKRlTYHQ

Slide 17

Slide 17 text

Material design: Motion https://www.youtube.com/watch?v=FBD0VlcVS1E

Slide 18

Slide 18 text

ͱͯ΋ҙ͕ࣝߴ·Γ·ͨ͠ ʢখฒײʣ

Slide 19

Slide 19 text

Material Design ϚςϦΞϧσβΠϯ

Slide 20

Slide 20 text

Android ?

Slide 21

Slide 21 text

HTML5 ͱ͔

Slide 22

Slide 22 text

Google Design http://www.google.com/design/

Slide 23

Slide 23 text

໨త

Slide 24

Slide 24 text

͞·͟·ͳ؀ڥͰ ౷Ұ͞ΕͨମݧΛ࣮ݱ͢Δ

Slide 25

Slide 25 text

across Platforms • Android • iOS • All browsers…

Slide 26

Slide 26 text

across Devices • Smartphone • Tablet • Wearable • Automobile • All PCs…

Slide 27

Slide 27 text

Material is the metapher

Slide 28

Slide 28 text

Design metaphor inspired by paper and ink http://googledevelopers.blogspot.jp/2014/06/this-is-material-design.html

Slide 29

Slide 29 text

఻౷తͳάϥϑΟοΫσβΠϯ ! ۙ୅ٕज़ʹΑΔΠϊϕʔγϣϯ

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Principles

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 34

Slide 34 text

Google Design http://www.google.com/design/

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Guidelines

Slide 37

Slide 37 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Authentic Motion Responsive Interaction Meaningful Transitions Delightful Detail Animation

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Color Typography Icons Imagery Style

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Principles Metrics and Keylines Structure Layout

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Button Sheets Buttons Cards Chips Dialogs Grids … Components

Slide 46

Slide 46 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Selection Gestures Promoted Actions Settings Imagery Treatment Search Patterns

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Accesibility Usability

Slide 49

Slide 49 text

• Animation • Style • Layout • Components • Patterns • Usability • Resources Layout Tempaltes Sticker Sheets Roboto Font Color Palettes Resources

Slide 50

Slide 50 text

iOS 7 Design Resources https://developer.apple.com/library/iOS/design/

Slide 51

Slide 51 text

2010೥ࠒ • ͳΜͰ΋͔ΜͰ΋ iOS ͬΆ͍ײ͕͡ྲྀߦΔ • ActionSheet ΍ AletView Έ͍ͨͳUIΛϒϥ΢βͰ࠶ൃ໌ • ͭΒ͍ • ͋ɺjQuery Mobile ͞Μ… • Android ͷීٴɺσβΠϯϦςϥγʔͷ޲্ɹɹɹɹɹɹɹ ϑϥοτσβΠϯͷོ੝ͳͲͰϑΣʔυΞ΢τ

Slide 52

Slide 52 text

Twitter Bootstrap http://getbootstrap.com/

Slide 53

Slide 53 text

2012೥ࠒ • Twitter Bootstrap ͷྲྀߦ • ਺ଟ͘ͷ؅ཧπʔϧ͕ Bootstrap Խ • ΤϯδχΞʹେਓؾ • ΦʔϓϯιʔεϓϩδΣΫτͷαΠτͱ͔΋ Bootstrap • ͜Ε͸͍·ͩʹଓ͍ͯΔҹ৅

Slide 54

Slide 54 text

Microsoft Design http://dev.windows.com/ja-jp/design

Slide 55

Slide 55 text

࣮͸ • Microsoft ΋ཱ೿ͳσβΠϯΨΠυϥΠϯΛ๊͍͑ͯͨ • εΠεͷάϥϑΟοΫσβΠϯʹώϯτΛಘͯΔͱ͔ • Metro ͱ͍͏໊લ͕঎ඪ໰୊ͱ͔Ͱ Modern ʹͳͬͯΔͱ͔ • ݸਓతʹ޷͖ͳͷͰ͕Μ͹ͬͯ΄͍͠Ͱ͢ ( ˘ω˘)

Slide 56

Slide 56 text

Flat Pixels (article) http://sachagreif.com/flat-pixels/

Slide 57

Slide 57 text

ʠ http://sachagreif.com/flat-pixels/ This style offers the best of both world: realism's affordances and subtle hints combined with the purity and simplicity off flat design.

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

ࠓޙ • Material Design ͷৄࡉͳεϖοΫ͸ࢀߟʹͳΔ • ࣮૷͢΂͖۩ମత಺༰ͱ࣮૷ࡁͷίʔυ͕ଘࡏ͢Δͷ͕ڧΈ • Android L ΄͔ Android ϑΝϛϦʔͰ׆༂༧ఆʁ • Webϒϥ΢βͷੈքʹ͸ਐग़Ͱ͖Δ͔ʁ • ͕͢͞ʹ౰࣌ͷ iOS ΄Ͳͷঢ়ଶ͸๚Εͳ͍ؾ͕…

Slide 60

Slide 60 text

On the Web Webʹ͓͚ΔϚςϦΞϧσβΠϯ

Slide 61

Slide 61 text

ɹɹPolymer

Slide 62

Slide 62 text

Material design with Polymer www.polymer-project.org/docs/elements/material.html

Slide 63

Slide 63 text

Paper Elements Core Elements

Slide 64

Slide 64 text

Paper Elements Demo

Slide 65

Slide 65 text

Elements Collections http://www.polymer-project.org/docs/elements/

Slide 66

Slide 66 text

Drawer

Slide 67

Slide 67 text

! !

Slide 68

Slide 68 text

>

Hello my-app

This is Drawer This is Main

Slide 69

Slide 69 text

!

Slide 70

Slide 70 text

Tabs

Slide 71

Slide 71 text

●●● ■■■ ●●● ■■■

Slide 72

Slide 72 text

Polymer Designer http://www.polymer-project.org/tools/designer/

Slide 73

Slide 73 text

●●● ■■■ ONE TWO ONE TWO

Slide 74

Slide 74 text

ͳͲͳͲ…

Slide 75

Slide 75 text

>

Slide 76

Slide 76 text

>
OK

Slide 77

Slide 77 text

> :host { display: block color: white; }

Slide 78

Slide 78 text

Unlock the next era of UI development with Polymer https://www.youtube.com/watch?v=HKrYfrAzqFA http://www.slideshare.net/rob_dodson/unlock-the-next-era-of-ui-design-with-polymer

Slide 79

Slide 79 text

Topeka http://www.polymer-project.org/apps/topeka/

Slide 80

Slide 80 text

FAQ

Slide 81

Slide 81 text

Is this project related to Angular JS?

Slide 82

Slide 82 text

ʠ http://www.polymer-project.org/resources/faq.html#frameworks Nope. Polymer isn’t like things that have come before. Polymer is the first of a new kind of library taking advantage of Web Components.

Slide 83

Slide 83 text

angular/material https://github.com/angular/material

Slide 84

Slide 84 text

How is polymer related to Material Design?

Slide 85

Slide 85 text

ʠ http://www.polymer-project.org/resources/faq.html#materialdesign Polymer played a key role in material design’s development: it was used to quickly prototype and iterate on design concepts.

Slide 86

Slide 86 text

Is polymer Production ready?

Slide 87

Slide 87 text

ʠ http://www.polymer-project.org/resources/faq.html#readiness Polymer is currently in “developer preview”.

Slide 88

Slide 88 text

͓ͬ͠Όʔ ϚςϦΞϧͬͧ͆͆͢

Slide 89

Slide 89 text

ΉΉΉ… • Web Components ࣗମ͕ Chrome 36 ͕΍ͬͱ͜ରԠ • Platform.js ͋Δ͚Ͳɺ͍͔ʹ΋ Developer Preview • ϞόΠϧͰ Polymer/Web Componentsେৎ෉͔ • γϟυ΢ͱΞχϝʔγϣϯͷଟ༻͸ϒϥ΢βWebͷఱఢ • Material Design ͦͷ΋ͷ͕ɺAndroid L ʹ޲͚ͯ͜Ε͔Β • Android ͷ UIWidget ྨ΋ɺ·ͩΑ͘͸ಈ͔ͳ͍

Slide 90

Slide 90 text

: )

Slide 91

Slide 91 text

Conclusion

Slide 92

Slide 92 text

• Material Design ͕ྲྀߦΔ͔͸ผͱͯ͠ษڧʹͳΔ • Web ༻ʹ͸ Polymer + Paper Elements Λར༻Ͱ͖Δ • Material Design ΋ Polymer (Web Components) ΋ൃల్্ • ϓϩμΫγϣϯ༻్Ͱීٴ͠͏Δͷ͸ɺ΋͏গ͠ઌͷະདྷ

Slide 93

Slide 93 text

Thanks! http://aho.mu @ahomu github.com/ahomu ! ⌂