Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Material Design と HTML5

Yohei Munesada
September 26, 2014

Material Design と HTML5

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

Yohei Munesada

September 26, 2014
Tweet

More Decks by Yohei Munesada

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Material is the metaphor
    ϚςϦΞϧ͸ϝλϑΝʔͰ͋Δ
    ✓ ϚςϦΞϧσβΠϯ͸ૉ੖Β͍͠ݱ࣮ੈքΛݩʹ͍ͯ͠Δ
    ✓ ߹ཧతͳۭؒηΦϦʔͱϞʔγϣϯݪཧΛ౷߹͍ͯ͠Δ
    ✓ ݱ࣮ੈքͱ͍ۙ͠࢖͍৺஍Λఏڙ͢Δ͜ͱͰ

    Ϣʔβʔ͸͙͢ʹͦͷΞϑΥʔμϯεΛཧղ͢Δ͜ͱ͕Ͱ͖Δ
    ✓ ࢴ΍ΠϯΫͷੈքΛࢀߟʹ͍ͯ͠Δ

    View full-size slide

  12. Bold, graphic, intentional
    େ୾ʹɺੜ͖ੜ͖ͱɺҙਤతʹ
    ✓ ҹ࡮෺ʹ͓͚ΔλΠϙάϥϑΟ/άϦου/εϖʔε/εέʔϧ/

    Χϥʔ/ը૾ͷ࢖͍ํͱ͍ͬͨཁૉ͸

    ݟͨ໨ͷຬ଍ײ/ώΤϥϧΩʔ/ҙຯ/஫໨Λ࡞Γग़͢
    ✓ ҙਤతͳ৭ͷબ୒ɺը໘͍ͬͺ͍ʹ޿͕ΔάϥϑΟοΫɺ

    େ୾ͳλΠϙάϥϑΟɺҙਤతͳۭന͸

    ੜ͖ੜ͖ͱͨ͠ΠϯλʔϑΣʔεΛ࡞Γ্͛Δ

    View full-size slide

  13. Motion provides meaning
    ಈ͖͸ҙຯΛఏڙ͢Δ
    ✓ ಈ͖Λ༩͑Δ͜ͱͰɺ

    Ϣʔβʔ͕ࣗ෼ࣗ਎Ͱಈ͔͍ͯ͠Δ͜ͱ͕໌֬ʹͳΔ
    ✓ ಈ͖ʹ͸ҙຯ͕͋Γɺ

    ஫ҙΛҾ͍ͨΓ࿈ଓੑΛҡ࣋͢ΔͨΊʹ༗ޮͰ͋Δ
    ✓ ݱ࣮ੈքͷಈ͖͸࿈ଓతͰɺ

    มԽͷҰ෦࢝ऴΛཧղ͢Δ͜ͱ͕Ͱ͖Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. ✓ z-space
    ✓ step
    ✓ seam

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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

    View full-size slide

  36. 3. Material Design in HTML5

    View full-size slide

  37. Core Elements
    Paper Elements

    View full-size slide

  38. 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

    View full-size slide

  39. Example : Header + Contents

    View full-size slide

  40. 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ϑΝΠϧͱͯ͠΋ೖखͰ͖·͢

    View full-size slide

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

    View full-size slide

  42. Example : Header + Contents
    HTML
    Import CSS

    View full-size slide

  43. Example : Header + Contents
    HTML
    Import CSS





    ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢

    View full-size slide

  44. Example : Header + Contents
    HTML
    Import CSS





    ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢

    View full-size slide

  45. Example : Header + Contents
    HTML
    Import CSS



    Title


    Sample Content.

    View full-size slide

  46. Example : Header + Contents
    HTML
    Import CSS



    Title


    Sample Content.

    View full-size slide

  47. Example : Header + Contents
    HTML
    Import CSS



    Title


    Sample Content.

    View full-size slide

  48. Example : Header + Contents
    HTML
    Import CSS



    Title


    Sample Content.

    View full-size slide

  49. Example : Header + Contents
    HTML
    Import CSS



    Title


    Sample Content.

    View full-size slide

  50. Example : Header + Contents
    HTML
    Import CSS



    Title


    Sample Content.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Example : Header + Contents

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. How to use paper-ripple

    ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢






    View full-size slide

  61. How to use paper-ripple

    ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢






    View full-size slide


  62. ※ bowerؔ࿈ͷύεΛলུͯ͠هड़͍ͯ͠·͢






    How to use paper-ripple

    View full-size slide

  63. paper-ripple in Developer Tools


    ▼#shadow-root




    View full-size slide

  64. paper-ripple in Developer Tools


    ▼#shadow-root




    View full-size slide

  65. paper-ripple in Developer Tools


    ▼#shadow-root




    CanvasΛ࢖͍ͬͯΔ!!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. paper-ripple in Developer Tools


    ▼#shadow-root





    2014/9/20Ͱ͸

    View full-size slide

  69. paper-ripple in Developer Tools


    ▼#shadow-root





    2014/9/20Ͱ͸
    CSS3 TransitionΛར༻͍ͯ͠Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide