Material Design と HTML5

第3回 HTML5minutes！のキーノート。
Material Design, Polymer, Material Design in HTML5 についての内容です。

Transcript

1. Material Design and HTML5 #3 HTML5 minutes! ~ triton-js ~ @yoheiMune 2014/9/26
2. about me ✓ फఆ ༸ฏʢ@yoheiMuneʣ ✓ (ג)αΠόʔΤʔδΣϯτ ✓ ϑϩϯτΤϯυΤϯδχΞ ✓ blog -> http://www.yoheim.net
3. Agenda 1. Material Design 2. Polymer 3. Material Design in HTML5 4. Tasting a Paper Element
4. 1. Material Design https://www.google.com/events/io#wtLJPvx7-ys
5. Material Design is … ✓ Google IO 2014Ͱൃද͞Εͨ ✓ GoogleࣾͷϓϩμΫτʹ͓͚Δڞ௨ͷϏδϡΞϧݴޠ ✓ Android L ͳͲ͜Ε͔ΒͷGoogle੡඼ʹ౥ࡌ͞ΕΔ༧ఆ ✓ ࿩୊ʹͳ͍ͬͯΔ͕ɺผʹੈքڞ௨ͱ͍͏༁Ͱ͸ͳ͍
6. http://www.google.com/design Google Design
7. ·ͣ͸ Material Design Λ ମݧͯ͠Έ·͠ΐ͏ https://www.youtube.com/watch?v=Q8TXgCzxEnw#t=21
9. From Video ✓ ৭ʑͳཁૉ͕׈Β͔ʹಈ͍͍ͯΔ ✓ ༷ʑͳը໘αΠζ͕͋Δ ✓ ࢴͷ্ʹཁૉ͕഑ஔ͞Ε͍ͯΔײ͡Λड͚Δ ✓ etc ✓ ΠϯΫΛਫ໘ʹམͱͨ͠Α͏ͳ೾໲ͷΤϑΣΫτ
10. Goal of Material Design Develop a single underlying system that allows for a unified experience across platforms and device sizes ଟ༷ͳϓϥοτϑΥʔϜ΍σόΠεαΠζͰ ౷Ұͨ͠ମݧΛఏڙ͢Δ
11. Concept of Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning
12. Material is the metaphor ϚςϦΞϧ͸ϝλϑΝʔͰ͋Δ ✓ ϚςϦΞϧσβΠϯ͸ૉ੖Β͍͠ݱ࣮ੈքΛݩʹ͍ͯ͠Δ ✓ ߹ཧతͳۭؒηΦϦʔͱϞʔγϣϯݪཧΛ౷߹͍ͯ͠Δ ✓ ݱ࣮ੈքͱ͍ۙ͠࢖͍৺஍Λఏڙ͢Δ͜ͱͰ
 Ϣʔβʔ͸͙͢ʹͦͷΞϑΥʔμϯεΛཧղ͢Δ͜ͱ͕Ͱ͖Δ ✓ ࢴ΍ΠϯΫͷੈքΛࢀߟʹ͍ͯ͠Δ
13. Bold, graphic, intentional େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹ ✓ ҹ࡮෺ʹ͓͚ΔλΠϙάϥϑΟ/άϦου/εϖʔε/εέʔϧ/
 Χϥʔ/ը૾ͷ࢖͍ํͱ͍ͬͨཁૉ͸
 ݟͨ໨ͷຬ଍ײ/ώΤϥϧΩʔ/ҙຯ/஫໨Λ࡞Γग़͢ ✓ ҙਤతͳ৭ͷબ୒ɺը໘͍ͬͺ͍ʹ޿͕ΔάϥϑΟοΫɺ
 େ୾ͳλΠϙάϥϑΟɺҙਤతͳۭന͸
 ੜ͖ੜ͖ͱͨ͠ΠϯλʔϑΣʔεΛ࡞Γ্͛Δ
14. Motion provides meaning ಈ͖͸ҙຯΛఏڙ͢Δ ✓ ಈ͖Λ༩͑Δ͜ͱͰɺ
 Ϣʔβʔ͕ࣗ෼ࣗ਎Ͱಈ͔͍ͯ͠Δ͜ͱ͕໌֬ʹͳΔ ✓ ಈ͖ʹ͸ҙຯ͕͋Γɺ
 ஫ҙΛҾ͍ͨΓ࿈ଓੑΛҡ࣋͢ΔͨΊʹ༗ޮͰ͋Δ ✓ ݱ࣮ੈքͷಈ͖͸࿈ଓతͰɺ
 มԽͷҰ෦࢝ऴΛཧղ͢Δ͜ͱ͕Ͱ͖Δ
15. Re: Concept of Material Design ݱ࣮ੈքΛݩʹ͍ͯͯ͠ େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹɺσβΠϯͯ͠ ಈ͖ʹ͸ҙຯΛ࣋ͨͤΔ
16. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability http://www.google.com/design/spec/material-design/introduction.html
17. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Authentic Motion -Responsive Interaction -Meaningful Transitions -Delightful Details
19. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Color -Typography -Icons -Imagery
21. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Principles -Metrics and Keylines -Structure
22. ✓ z-space ✓ step ✓ seam
23. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Bottom Sheets -Buttons -Cards -Chips -Dialogs etc…
25. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Selection -Gestures -Promoted Actions -Settings -Image Treatment etc…
27. Parts of Material Design ✓ Animation ✓ Style ✓ Layout ✓ Components ✓ Patterns ✓ Usability -Accessibility
28. https://www.youtube.com/watch?v=Q8TXgCzxEnw#t=21 ݱ࣮ੈքΛݩʹ͍ͯͯ͠ େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹɺσβΠϯͯ͠ ಈ͖ʹ͸ҙຯΛ࣋ͨͤΔ ΋͏Ұ౓ Material Design Λ ମݧͯ͠Έ·͠ΐ͏
30. 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
31. Material Design to the Web ✓ Material Design ΛͲͷΑ͏ʹWebʹద༻͢Δ͔ ✓ Polymer ͕ Material Design Λ࣮૷͍ͯ͠Δ ✓ ಛʹ Animation ෦෼͸͔ͳΓ೉ͦ͠͏
32. 2. Polymer
33. What is Polymer ? ✓ Web Components Λϕʔεͱͨ͠ະདྷΛ࡞ΔϥΠϒϥϦ ✓ Google ੡ ✓ Material Design ΋αϙʔτ
34. What is Polymer ? ✓ Web Components Λϕʔεͱͨ͠ະདྷΛ࡞ΔϥΠϒϥϦ ✓ Google ੡ ✓ Material Design ΋αϙʔτ
35. Polymer vs jQuery, Backbone, Bootstrap, etc What is the difference between ޿͘ීٴٕͨ͠ज़Λར༻ ৽ٕज़Λར༻ Point1: ར༻ٕज़
36. Polymer vs jQuery, Backbone, Bootstrap, etc What is the difference between ར༻ٕज़ΛΑΓศརʹ࢖͏ ৽ٕज़ͷར༻ͷ৔Λ͍ͪૣ͘ఏڙ͠ ϑΟʔυόοΫΛฦ͢ Point2: ໨త
37. ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding What Polymer depends on ?
38. - HTML Imports - HTML Template - Custom Elements - Shadow DOM UIίϯϙʔωϯτͷඪ४Խ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding What does Polymer use ?
39. - CSS3 Transitions - CSS3 Animations - SVG Animations - requestAnimationFrame ந৅Խ͞ΕͨAnimationϞσϧ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding What does Polymer use ?
40. What does Polymer use ? - Object.observe - MutationObserver DOMͱJSͱͷσʔλ࿈ܞ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding
41. What does Polymer use ? - polymer-gestures σόΠεґଘ͠ͳ͍δΣενϟ ✓ Web Components ✓ Web Animations ✓ Pointer Events ✓ Data Binding
43. 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
44. 3. Material Design in HTML5
45. Core Elements Paper Elements
46. 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
47. Example : Header + Contents
48. 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ϑΝΠϧͱͯ͠΋ೖखͰ͖·͢
49. Example : Header + Contents ·ͨ͸શ෦Λಋೖ $ bower install Polymer/core-elements $ bower install Polymer/paper-elements ※ gitܦ༝΍zipϑΝΠϧͱͯ͠΋ೖखͰ͖·͢
50. Example : Header + Contents HTML Import CSS
51. Example : Header + Contents HTML Import CSS <script src="platform.js"></script> <link rel="import" href="core-toolbar.html"> <link rel="import" href="core-header-panel.html"> <link rel="import" href="paper-icon-button.html"> <link rel="import" href="core-icons.html"> ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢
52. Example : Header + Contents HTML Import CSS <script src="platform.js"></script> <link rel="import" href="core-toolbar.html"> <link rel="import" href="core-header-panel.html"> <link rel="import" href="paper-icon-button.html"> <link rel="import" href="core-icons.html"> ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢
53. Example : Header + Contents HTML Import CSS <core-header-pannel> <core-toolbar> <paper-icon-button icon="add"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon="search"></paper-icon-button> </core-toolbar> <p>Sample Content.</p> </core-header-pannel>
54. Example : Header + Contents HTML Import CSS <core-header-pannel> <core-toolbar> <paper-icon-button icon="add"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon="search"></paper-icon-button> </core-toolbar> <p>Sample Content.</p> </core-header-pannel>
55. Example : Header + Contents HTML Import CSS <core-header-pannel> <core-toolbar> <paper-icon-button icon="add"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon="search"></paper-icon-button> </core-toolbar> <p>Sample Content.</p> </core-header-pannel>
56. Example : Header + Contents HTML Import CSS <core-header-pannel> <core-toolbar> <paper-icon-button icon="add"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon="search"></paper-icon-button> </core-toolbar> <p>Sample Content.</p> </core-header-pannel>
57. Example : Header + Contents HTML Import CSS <core-header-pannel> <core-toolbar> <paper-icon-button icon="add"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon="search"></paper-icon-button> </core-toolbar> <p>Sample Content.</p> </core-header-pannel>
58. Example : Header + Contents HTML Import CSS <core-header-pannel> <core-toolbar> <paper-icon-button icon="add"></paper-icon-button> <span flex>Title</span> <paper-icon-button icon="search"></paper-icon-button> </core-toolbar> <p>Sample Content.</p> </core-header-pannel>
59. Example : Header + Contents HTML Import CSS core-header-pannel { background-color: white; width: 100vw; height: 100vh; } core-toolbar { background-color: #03A9F4; }
60. Example : Header + Contents HTML Import CSS core-header-pannel { background-color: white; width: 100vw; height: 100vh; } core-toolbar { background-color: #03A9F4; }
61. Example : Header + Contents HTML Import CSS core-header-pannel { background-color: white; width: 100vw; height: 100vh; } core-toolbar { background-color: #03A9F4; }
62. Example : Header + Contents
63. http://www.polymer-project.org/docs/start/tutorial/intro.html Tutorial
64. http://www.polymer-project.org/components/paper-elements/demo.html Demo
65. 4. Tasting a Paper Element https://flic.kr/p/5rkLhP
66. Tasting paper-ripple ✓ ೾໲͕޿͕ΔΞχϝʔγϣϯ ✓ ͲΜͳ࣮૷ͳͷ͔ʁ
67. Install paper-ripple $ bower install Polymer/paper-ripple
68. How to use paper-ripple <!— Πϯϙʔτ —> ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢ <div style=“position: relative;”> <paper-ripple fit></paper-ripple> </div> <script src=“platform.js”></script> <link rel="import" href=“paper-ripple.html"> <!— ࣮૷ —>
69. How to use paper-ripple <!— Πϯϙʔτ —> ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢ <div style=“position: relative;”> <paper-ripple fit></paper-ripple> </div> <script src=“platform.js”></script> <link rel="import" href=“paper-ripple.html"> <!— ࣮૷ —>
70. <!— Πϯϙʔτ —> ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢ <div style=“position: relative;”> <paper-ripple fit></paper-ripple> </div> <script src=“platform.js”></script> <link rel="import" href=“paper-ripple.html"> <!— ࣮૷ —> How to use paper-ripple
71. paper-ripple in Developer Tools ▼<div style=“position: relative;”> ▼<paper-ripple fit> ▼#shadow-root <style> … </style> <canvas id=“canvas”> </paper-ripple> </div>
72. paper-ripple in Developer Tools ▼<div style=“position: relative;”> ▼<paper-ripple fit> ▼#shadow-root <style> … </style> <canvas id=“canvas”> </paper-ripple> </div>
73. paper-ripple in Developer Tools ▼<div style=“position: relative;”> ▼<paper-ripple fit> ▼#shadow-root <style> … </style> <canvas id=“canvas”> </paper-ripple> </div> CanvasΛ࢖͍ͬͯΔ!!
74. ͱɺ࠷ۙ·Ͱ͸ ͜ͷ࣮૷ͩͬͨΜͰ͕͢
75. ࠷৽ͷ࣮૷Ͱ͸มΘͬͯ·ͨ͠
76. paper-ripple in Developer Tools ▼<div style=“position: relative;”> ▼<paper-ripple fit> ▼#shadow-root <style> … </style> <div id=“bg”></div> <div id=“waves”></div> </paper-ripple> </div> 2014/9/20Ͱ͸
77. paper-ripple in Developer Tools ▼<div style=“position: relative;”> ▼<paper-ripple fit> ▼#shadow-root <style> … </style> <div id=“bg”></div> <div id=“waves”></div> </paper-ripple> </div> 2014/9/20Ͱ͸ CSS3 TransitionΛར༻͍ͯ͠Δ
78. detail of paper-ripple https://github.com/Polymer/paper-ripple/blob/master/paper-ripple.html Polymer/paper-ripple @Github
79. paper-ripple ͸JavaScript͔Β΋ૢ࡞Ͱ͖Δ var pr = document.querySelector(‘paper-ripple’); // Ξχϝʔγϣϯ։࢝ pr.downAction({x:10,y:10}); // Ξχϝʔγϣϯऴྃ pr.upAction();
80. Summary
81. ✓ .BUFSJBM
    %FTJHO
    ✓ (PPHMFࣾͷϏδϡΞϧݴޠ
    ✓ ݱ࣮ੈքΛݩʹ࡞ΒΕ͍ͯΔ
    ✓ Ξχϝʔγϣϯʹ͍ͭͯͷఆ͕ٛ͞Ε͍ͯΔ ✓ 1PMZNFS
    ✓ (PPHMF੡ͰະདྷΛ࡞ΔϥΠϒϥϦ
    ✓ ৽͍ٕ͠ज़͕ͨ͘͞Μར༻͞Ε͍ͯΔ 㾎 .BUFSJBM
    %FTJHO
    JO
    )5.-
    㾎 1PMZNFSΛ࢖࣮ͬͯݱ͢Δ͜ͱ͕Ͱ͖Δ
    㾎 CPXFS
    JOTUBMMͰಋೖ͸؆୯
    㾎 ࢖͏͜ͱͰίϯϙʔωϯτͷ֓೦ʹ৮ΕΔ͜ͱ͕Ͱ͖Δ Summary
82. Thank you http://github.com/yoheiMune http://www.yoheim.net http://twitter.com/yoheiMune