Tweet
Tweet

Slide 1

Slide 1 text

Material Design and HTML5 #3 HTML5 minutes! ~ triton-js ~ @yoheiMune 2014/9/26

Slide 2

Slide 2 text

about me ✓ फఆ ༸ฏʢ@yoheiMuneʣ ✓ (ג)αΠόʔΤʔδΣϯτ ✓ ϑϩϯτΤϯυΤϯδχΞ ✓ blog -> http://www.yoheim.net

Slide 3

Slide 3 text

Agenda 1. Material Design 2. Polymer 3. Material Design in HTML5 4. Tasting a Paper Element

Slide 4

Slide 4 text

1. Material Design https://www.google.com/events/io#wtLJPvx7-ys

Slide 5

Slide 5 text

Material Design is … ✓ Google IO 2014Ͱൃද͞Εͨ ✓ GoogleࣾͷϓϩμΫτʹ͓͚Δڞ௨ͷϏδϡΞϧݴޠ ✓ Android L ͳͲ͜Ε͔ΒͷGoogle੡඼ʹ౥ࡌ͞ΕΔ༧ఆ ✓ ࿩୊ʹͳ͍ͬͯΔ͕ɺผʹੈքڞ௨ͱ͍͏༁Ͱ͸ͳ͍

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

·ͣ͸ Material Design Λ ମݧͯ͠Έ·͠ΐ͏ https://www.youtube.com/watch?v=Q8TXgCzxEnw#t=21

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

From Video ✓ ৭ʑͳཁૉ͕׈Β͔ʹಈ͍͍ͯΔ ✓ ༷ʑͳը໘αΠζ͕͋Δ ✓ ࢴͷ্ʹཁૉ͕഑ஔ͞Ε͍ͯΔײ͡Λड͚Δ ✓ etc ✓ ΠϯΫΛਫ໘ʹམͱͨ͠Α͏ͳ೾໲ͷΤϑΣΫτ

Slide 10

Slide 10 text

Goal of Material Design Develop a single underlying system that allows for a unified experience across platforms and device sizes ଟ༷ͳϓϥοτϑΥʔϜ΍σόΠεαΠζͰ ౷Ұͨ͠ମݧΛఏڙ͢Δ

Slide 11

Slide 11 text

Concept of Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 12

Slide 12 text

Material is the metaphor ϚςϦΞϧ͸ϝλϑΝʔͰ͋Δ ✓ ϚςϦΞϧσβΠϯ͸ૉ੖Β͍͠ݱ࣮ੈքΛݩʹ͍ͯ͠Δ ✓ ߹ཧతͳۭؒηΦϦʔͱϞʔγϣϯݪཧΛ౷߹͍ͯ͠Δ ✓ ݱ࣮ੈքͱ͍ۙ͠࢖͍৺஍Λఏڙ͢Δ͜ͱͰ
 Ϣʔβʔ͸͙͢ʹͦͷΞϑΥʔμϯεΛཧղ͢Δ͜ͱ͕Ͱ͖Δ ✓ ࢴ΍ΠϯΫͷੈքΛࢀߟʹ͍ͯ͠Δ

Slide 13

Slide 13 text

Bold, graphic, intentional େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹ ✓ ҹ࡮෺ʹ͓͚ΔλΠϙάϥϑΟ/άϦου/εϖʔε/εέʔϧ/
 Χϥʔ/ը૾ͷ࢖͍ํͱ͍ͬͨཁૉ͸
 ݟͨ໨ͷຬ଍ײ/ώΤϥϧΩʔ/ҙຯ/஫໨Λ࡞Γग़͢ ✓ ҙਤతͳ৭ͷબ୒ɺը໘͍ͬͺ͍ʹ޿͕ΔάϥϑΟοΫɺ
 େ୾ͳλΠϙάϥϑΟɺҙਤతͳۭന͸
 ੜ͖ੜ͖ͱͨ͠ΠϯλʔϑΣʔεΛ࡞Γ্͛Δ

Slide 14

Slide 14 text

Motion provides meaning ಈ͖͸ҙຯΛఏڙ͢Δ ✓ ಈ͖Λ༩͑Δ͜ͱͰɺ
 Ϣʔβʔ͕ࣗ෼ࣗ਎Ͱಈ͔͍ͯ͠Δ͜ͱ͕໌֬ʹͳΔ ✓ ಈ͖ʹ͸ҙຯ͕͋Γɺ
 ஫ҙΛҾ͍ͨΓ࿈ଓੑΛҡ࣋͢ΔͨΊʹ༗ޮͰ͋Δ ✓ ݱ࣮ੈքͷಈ͖͸࿈ଓతͰɺ
 มԽͷҰ෦࢝ऴΛཧղ͢Δ͜ͱ͕Ͱ͖Δ

Slide 15

Slide 15 text

Re: Concept of Material Design ݱ࣮ੈքΛݩʹ͍ͯͯ͠ େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹɺσβΠϯͯ͠ ಈ͖ʹ͸ҙຯΛ࣋ͨͤΔ

Slide 16

Slide 16 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability http://www.google.com/design/spec/material-design/introduction.html

Slide 17

Slide 17 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Authentic Motion -Responsive Interaction -Meaningful Transitions -Delightful Details

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Color -Typography -Icons -Imagery

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Principles -Metrics and Keylines -Structure

Slide 22

Slide 22 text

✓ z-space ✓ step ✓ seam

Slide 23

Slide 23 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Bottom Sheets -Buttons -Cards -Chips -Dialogs etc…

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Selection -Gestures -Promoted Actions -Settings -Image Treatment etc…

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Accessibility

Slide 28

Slide 28 text

https://www.youtube.com/watch?v=Q8TXgCzxEnw#t=21 ݱ࣮ੈքΛݩʹ͍ͯͯ͠ େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹɺσβΠϯͯ͠ ಈ͖ʹ͸ҙຯΛ࣋ͨͤΔ ΋͏Ұ౓ Material Design Λ ମݧͯ͠Έ·͠ΐ͏

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Learn More … ✓ Google I/O 2014 Keynote
 https://www.google.com/events/io#wtLJPvx7-ys ✓ Material Design Specification
 http://www.google.com/design/spec/material-design ✓ Material Design Overview
 http://static.googleusercontent.com/media/www.google.com/en//design/material-design.pdf

Slide 31

Slide 31 text

Material Design to the Web ✓ Material Design ΛͲͷΑ͏ʹWebʹద༻͢Δ͔ ✓ Polymer ͕ Material Design Λ࣮૷͍ͯ͠Δ ✓ ಛʹ Animation ෦෼͸͔ͳΓ೉ͦ͠͏

Slide 32

Slide 32 text

2. Polymer

Slide 33

Slide 33 text

What is Polymer ? ✓ Web Components Λϕʔεͱͨ͠ະདྷΛ࡞ΔϥΠϒϥϦ ✓ Google ੡ ✓ Material Design ΋αϙʔτ

Slide 34

Slide 34 text

What is Polymer ? ✓ Web Components Λϕʔεͱͨ͠ະདྷΛ࡞ΔϥΠϒϥϦ ✓ Google ੡ ✓ Material Design ΋αϙʔτ

Slide 35

Slide 35 text

Polymer vs jQuery, Backbone, Bootstrap, etc What is the difference between ޿͘ීٴٕͨ͠ज़Λར༻ ৽ٕज़Λར༻ Point1: ར༻ٕज़

Slide 36

Slide 36 text

Polymer vs jQuery, Backbone, Bootstrap, etc What is the difference between ར༻ٕज़ΛΑΓศརʹ࢖͏ ৽ٕज़ͷར༻ͷ৔Λ͍ͪૣ͘ఏڙ͠ ϑΟʔυόοΫΛฦ͢ Point2: ໨త

Slide 37

Slide 37 text

✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding What Polymer depends on ?

Slide 38

Slide 38 text

- HTML Imports - HTML Template - Custom Elements - Shadow DOM UIίϯϙʔωϯτͷඪ४Խ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding What does Polymer use ?

Slide 39

Slide 39 text

- CSS3 Transitions - CSS3 Animations - SVG Animations - requestAnimationFrame ந৅Խ͞ΕͨAnimationϞσϧ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding What does Polymer use ?

Slide 40

Slide 40 text

What does Polymer use ? - Object.observe - MutationObserver DOMͱJSͱͷσʔλ࿈ܞ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding

Slide 41

Slide 41 text

What does Polymer use ? - polymer-gestures σόΠεґଘ͠ͳ͍δΣενϟ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

How is Polymer related to material design ? Polymer played a key role in material design’s development: it is used to quickly prototype and iterate on design concepts. Polymer ͸ Material Design ͷϓϩτλΠϓͱͯ͠ ར༻͞Ε͍ͯͯɺͦͷσβΠϯίϯηϓτ͕ ܁Γฦ͠ద༻͞Ε͍ͯΔ http://www.polymer-project.org/resources/faq.html

Slide 44

Slide 44 text

3. Material Design in HTML5

Slide 45

Slide 45 text

Core Elements Paper Elements

Slide 46

Slide 46 text

Core Elements Paper Elements ✓ core-header-panel ✓ core-toolbar ✓ core-drawer-panel ✓ core-icon ✓ core-ajax ✓ etc… about 40 items ✓ paper-button ✓ paper-icon-button ✓ paper-tab ✓ paper-ripple ✓ paper-shadow ✓ etc… about 20 items http://www.polymer-project.org/docs/elements/layout-elements.html

Slide 47

Slide 47 text

Example : Header + Contents

Slide 48

Slide 48 text

Example : Header + Contents ಋೖ $ bower install Polymer/core-toolbar $ bower install Polymer/core-header-panel $ bower install Polymer/core-icons $ bower install Polymer/paper-icon-button ※ gitܦ༝΍zipϑΝΠϧͱͯ͠΋ೖखͰ͖·͢

Slide 49

Slide 49 text

Example : Header + Contents ·ͨ͸શ෦Λಋೖ $ bower install Polymer/core-elements $ bower install Polymer/paper-elements ※ gitܦ༝΍zipϑΝΠϧͱͯ͠΋ೖखͰ͖·͢

Slide 50

Slide 50 text

Example : Header + Contents HTML Import CSS

Slide 51

Slide 51 text

Example : Header + Contents HTML Import CSS ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢

Slide 52

Slide 52 text

Example : Header + Contents HTML Import CSS ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢

Slide 53

Slide 53 text

Example : Header + Contents HTML Import CSS Title

Sample Content.

Slide 54

Slide 54 text

Example : Header + Contents HTML Import CSS Title

Sample Content.

Slide 55

Slide 55 text

Example : Header + Contents HTML Import CSS Title

Sample Content.

Slide 56

Slide 56 text

Example : Header + Contents HTML Import CSS Title

Sample Content.

Slide 57

Slide 57 text

Example : Header + Contents HTML Import CSS Title

Sample Content.

Slide 58

Slide 58 text

Example : Header + Contents HTML Import CSS Title

Sample Content.

Slide 59

Slide 59 text

Example : Header + Contents HTML Import CSS core-header-pannel { background-color: white; width: 100vw; height: 100vh; } core-toolbar { background-color: #03A9F4; }

Slide 60

Slide 60 text

Example : Header + Contents HTML Import CSS core-header-pannel { background-color: white; width: 100vw; height: 100vh; } core-toolbar { background-color: #03A9F4; }

Slide 61

Slide 61 text

Example : Header + Contents HTML Import CSS core-header-pannel { background-color: white; width: 100vw; height: 100vh; } core-toolbar { background-color: #03A9F4; }

Slide 62

Slide 62 text

Example : Header + Contents

Slide 63

Slide 63 text

http://www.polymer-project.org/docs/start/tutorial/intro.html Tutorial

Slide 64

Slide 64 text

http://www.polymer-project.org/components/paper-elements/demo.html Demo

Slide 65

Slide 65 text

4. Tasting a Paper Element https://flic.kr/p/5rkLhP

Slide 66

Slide 66 text

Tasting paper-ripple ✓ ೾໲͕޿͕ΔΞχϝʔγϣϯ ✓ ͲΜͳ࣮૷ͳͷ͔ʁ

Slide 67

Slide 67 text

Install paper-ripple $ bower install Polymer/paper-ripple

Slide 68

Slide 68 text

How to use paper-ripple ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢

Slide 69

Slide 69 text

How to use paper-ripple ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢

Slide 70

Slide 70 text

※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢
How to use paper-ripple

Slide 71

Slide 71 text

paper-ripple in Developer Tools ▼
▼ ▼#shadow-root …

Slide 72

Slide 72 text

paper-ripple in Developer Tools ▼
▼ ▼#shadow-root …

Slide 73

Slide 73 text

paper-ripple in Developer Tools ▼
▼ ▼#shadow-root …
CanvasΛ࢖͍ͬͯΔ!!

Slide 74

Slide 74 text

ͱɺ࠷ۙ·Ͱ͸ ͜ͷ࣮૷ͩͬͨΜͰ͕͢

Slide 75

Slide 75 text

࠷৽ͷ࣮૷Ͱ͸มΘͬͯ·ͨ͠

Slide 76

Slide 76 text

paper-ripple in Developer Tools ▼
▼ ▼#shadow-root …
2014/9/20Ͱ͸

Slide 77

Slide 77 text

paper-ripple in Developer Tools ▼
▼ ▼#shadow-root …
2014/9/20Ͱ͸ CSS3 TransitionΛར༻͍ͯ͠Δ

Slide 78

Slide 78 text

detail of paper-ripple https://github.com/Polymer/paper-ripple/blob/master/paper-ripple.html Polymer/paper-ripple @Github

Slide 79

Slide 79 text

paper-ripple ͸JavaScript͔Β΋ૢ࡞Ͱ͖Δ var pr = document.querySelector(‘paper-ripple’); // Ξχϝʔγϣϯ։࢝ pr.downAction({x:10,y:10}); // Ξχϝʔγϣϯऴྃ pr.upAction();

Slide 80

Slide 80 text

Summary

Slide 81

Slide 81 text

✓ .BUFSJBM%FTJHO ✓ (PPHMFࣾͷϏδϡΞϧݴޠ ✓ ݱ࣮ੈքΛݩʹ࡞ΒΕ͍ͯΔ ✓ Ξχϝʔγϣϯʹ͍ͭͯͷఆ͕ٛ͞Ε͍ͯΔ ✓ 1PMZNFS ✓ (PPHMF੡ͰະདྷΛ࡞ΔϥΠϒϥϦ ✓ ৽͍ٕ͠ज़͕ͨ͘͞Μར༻͞Ε͍ͯΔ 㾎 .BUFSJBM%FTJHOJO)5.- 㾎 1PMZNFSΛ࢖࣮ͬͯݱ͢Δ͜ͱ͕Ͱ͖Δ 㾎 CPXFSJOTUBMMͰಋೖ͸؆୯ 㾎 ࢖͏͜ͱͰίϯϙʔωϯτͷ֓೦ʹ৮ΕΔ͜ͱ͕Ͱ͖Δ Summary

Slide 82

Slide 82 text

Thank you http://github.com/yoheiMune http://www.yoheim.net http://twitter.com/yoheiMune