Material Design with Polymer

第49回 HTML5とか勉強会 https://atnd.org/events/53826 で使用したスライドです。本編40分。

YouTube: http://youtu.be/G7hIDm4aK5g?t=1h25m43s

※普段よりもスライドの情報量すくなめで、口頭とデモ多めでした。Paper Elementsを使ったコーディングと、Polymer Designerを使ったコーディング(?)のデモなど。

Transcript

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

   View Slide

2. ࠤ౻ า
   ͞ͱ͏ ͋ΏΉ
   

   View Slide

3. ϋϯυϧωʔϜ
   ahomu
   @
   

   View Slide

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

   View Slide

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

   View Slide

6. View Slide

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

   View Slide

8. Google I/O 2014
   

   View Slide

9. ॳɾGoogle I/O
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Material Design
    ϚςϦΞϧσβΠϯ
    

    View Slide

20. Android ?
    

    View Slide

21. HTML5 ͱ͔
    

    View Slide

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

    View Slide

23. ໨త
    

    View Slide

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

    View Slide

25. across Platforms
    • Android
    • iOS
    • All browsers…
    

    View Slide

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

    View Slide

27. Material is the metapher
    

    View Slide

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

    View Slide

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

    View Slide

30. View Slide

31. Principles
    

    View Slide

32. View Slide

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

    View Slide

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

    View Slide

35. View Slide

36. Guidelines
    

    View Slide

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

    View Slide

38. View Slide

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

    View Slide

40. View Slide

41. View Slide

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

    View Slide

43. View Slide

44. View Slide

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

    View Slide

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

    View Slide

47. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. Twitter Bootstrap
    http://getbootstrap.com/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. ʠ
    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.
    

    View Slide

58. View Slide

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

    View Slide

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

    View Slide

61. ɹɹPolymer
    

    View Slide

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

    View Slide

63. Paper Elements
    Core Elements
    

    View Slide

64. Paper Elements
    Demo
    

    View Slide

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

    View Slide

66. Drawer
    

    View Slide

67. ! !
    

    View Slide

68. >
    
    isToggle>
    Hello my-app
    
    selected="{{$.paper_icon_button.active ? 'drawer' : 'main'}}">
    This is Drawer
    This is Main
    
    

    View Slide

69. !
    
    selected=“{{$.icon_butotn.active…}}”>
    id=“icon_butotn”
    active
    isToggle>
    

    View Slide

70. Tabs
    

    View Slide

71. ●●● ■■■ ●●● ■■■
    

    View Slide

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

    View Slide

73. ●●● ■■■
    
    ONE
    TWO
    
    selected=“{{$.tabs.selected}}”>
    ONE
    TWO
    
    

    View Slide

74. ͳͲͳͲ…
    

    View Slide

75. >
    
    
    
    
    

    View Slide

76. >
    
    OK
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

80. FAQ
    

    View Slide

81. Is this project related
    to Angular JS?
    

    View Slide

82. ʠ
    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.
    

    View Slide

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

    View Slide

84. How is polymer related
    to Material Design?
    

    View Slide

85. ʠ
    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.
    

    View Slide

86. Is polymer
    Production ready?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

90. : )
    

    View Slide

91. Conclusion
    

    View Slide

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

    View Slide

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

    View Slide