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
2. ࠤ౻ า ͞ͱ͏ ͋ΏΉ
3. ϋϯυϧωʔϜ ahomu @
4. 100ਓ͘Β͍͔ͱࢥͬͯͨΒ 350ਓืूͰϏϏͬͯ·͢ɻ
5. Profile • גࣜձࣾαΠόʔΤʔδΣϯτ • WebϑϩϯτΤϯυΤϯδχΞ • PHPer + SE → Frontend + Node + Android + AWS͋ • HTML5 Experts.jp ʹ͓͚Δ༓ྶ෦һͷͻͱΓ • ࠷ۙͷ೰Έ͸ɺࣾ಺ͰΦοαϯʹݟΒΕΔ͜ͱʢΞϥαʔʣ
7. Agenda • Google I/O ͷײ૝ • Material Design ͷ͓͞Β͍ • ίϯηϓτ • ΨΠυϥΠϯͷαϚϦʔ • Web Ͱ࢖͏ • Polymer • Papaer Elements
8. Google I/O 2014
9. ॳɾGoogle I/O
10. ͪΌΜͱࢀՃ͠·ͨ͠ Registration ͔Βͯ͠ӳձ࿩ྗͷແ͞Λ௧ײ
11. ӳޠ͕ୡऀͰ͸ͳ͍ͷͰ ࣈນ੮ͷ͓ੈ࿩ʹ
12. ͋ͱ͸งғؾͰ ʗ(^o^)ʘ
13. Polymer and Web Components change everything you know about Web development https://www.youtube.com/watch?v=8OJ7ih8EE7s
14. How we built Chrome Dev Editor with the Chrome platform https://www.youtube.com/watch?v=NNLnTz6yIc4
15. Material science: Developing Android applications with material design https://www.youtube.com/watch?v=lSH9aKXjgt8
16. Material design: Visual style and imagery https://www.youtube.com/watch?v=ctzWKRlTYHQ
17. Material design: Motion https://www.youtube.com/watch?v=FBD0VlcVS1E
18. ͱͯ΋ҙ͕ࣝߴ·Γ·ͨ͠ ʢখฒײʣ
19. Material Design ϚςϦΞϧσβΠϯ
20. Android ?
21. HTML5 ͱ͔
22. Google Design http://www.google.com/design/
23. ໨త
24. ͞·͟·ͳ؀ڥͰ ౷Ұ͞ΕͨମݧΛ࣮ݱ͢Δ
25. across Platforms • Android • iOS • All browsers…
26. across Devices • Smartphone • Tablet • Wearable • Automobile • All PCs…
27. Material is the metapher
28. Design metaphor inspired by paper and ink http://googledevelopers.blogspot.jp/2014/06/this-is-material-design.html
29. ఻౷తͳάϥϑΟοΫσβΠϯ ! ۙ୅ٕज़ʹΑΔΠϊϕʔγϣϯ
31. Principles
33. Material is the metaphor Bold, graphic, intentional Motion provides meaning
34. Google Design http://www.google.com/design/
36. Guidelines
37. • Animation • Style • Layout • Components • Patterns • Usability • Resources Authentic Motion Responsive Interaction Meaningful Transitions Delightful Detail Animation
39. • Animation • Style • Layout • Components • Patterns • Usability • Resources Color Typography Icons Imagery Style
42. • Animation • Style • Layout • Components • Patterns • Usability • Resources Principles Metrics and Keylines Structure Layout
45. • Animation • Style • Layout • Components • Patterns • Usability • Resources Button Sheets Buttons Cards Chips Dialogs Grids … Components
46. • Animation • Style • Layout • Components • Patterns • Usability • Resources Selection Gestures Promoted Actions Settings Imagery Treatment Search Patterns
48. • Animation • Style • Layout • Components • Patterns • Usability • Resources Accesibility Usability
49. • Animation • Style • Layout • Components • Patterns • Usability • Resources Layout Tempaltes Sticker Sheets Roboto Font Color Palettes Resources
50. iOS 7 Design Resources https://developer.apple.com/library/iOS/design/
51. 2010೥ࠒ • ͳΜͰ΋͔ΜͰ΋ iOS ͬΆ͍ײ͕͡ྲྀߦΔ • ActionSheet ΍ AletView Έ͍ͨͳUIΛϒϥ΢βͰ࠶ൃ໌ • ͭΒ͍ • ͋ɺjQuery Mobile ͞Μ… • Android ͷීٴɺσβΠϯϦςϥγʔͷ޲্ɹɹɹɹɹɹɹ ϑϥοτσβΠϯͷོ੝ͳͲͰϑΣʔυΞ΢τ
52. Twitter Bootstrap http://getbootstrap.com/
53. 2012೥ࠒ • Twitter Bootstrap ͷྲྀߦ • ਺ଟ͘ͷ؅ཧπʔϧ͕ Bootstrap Խ • ΤϯδχΞʹେਓؾ • ΦʔϓϯιʔεϓϩδΣΫτͷαΠτͱ͔΋ Bootstrap • ͜Ε͸͍·ͩʹଓ͍ͯΔҹ৅
54. Microsoft Design http://dev.windows.com/ja-jp/design
55. ࣮͸ • Microsoft ΋ཱ೿ͳσβΠϯΨΠυϥΠϯΛ๊͍͑ͯͨ • εΠεͷάϥϑΟοΫσβΠϯʹώϯτΛಘͯΔͱ͔ • Metro ͱ͍͏໊લ͕঎ඪ໰୊ͱ͔Ͱ Modern ʹͳͬͯΔͱ͔ • ݸਓతʹ޷͖ͳͷͰ͕Μ͹ͬͯ΄͍͠Ͱ͢ ( ˘ω˘)
56. Flat Pixels (article) http://sachagreif.com/flat-pixels/
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.
59. ࠓޙ • Material Design ͷৄࡉͳεϖοΫ͸ࢀߟʹͳΔ • ࣮૷͢΂͖۩ମత಺༰ͱ࣮૷ࡁͷίʔυ͕ଘࡏ͢Δͷ͕ڧΈ • Android L ΄͔ Android ϑΝϛϦʔͰ׆༂༧ఆʁ • Webϒϥ΢βͷੈքʹ͸ਐग़Ͱ͖Δ͔ʁ • ͕͢͞ʹ౰࣌ͷ iOS ΄Ͳͷঢ়ଶ͸๚Εͳ͍ؾ͕…
60. On the Web Webʹ͓͚ΔϚςϦΞϧσβΠϯ
61. ɹɹPolymer
62. Material design with Polymer www.polymer-project.org/docs/elements/material.html
63. Paper Elements Core Elements
64. Paper Elements Demo
65. Elements Collections http://www.polymer-project.org/docs/elements/
66. Drawer
67. ! !
68. </> <core-toolbar> <paper-icon-button id="paper_icon_button" icon="menu" isToggle></paper-icon-button> <p>Hello my-app</p> </core-toolbar> <core-drawer-panel id="core_drawer_panel" selected="{{$.paper_icon_button.active ? 'drawer' : 'main'}}"> <section drawer>This is Drawer</section> <section main>This is Main</section> </core-drawer-panel>
69. ! <core-toolbar> <core-drawer-panel selected=“{{$.icon_butotn.active…}}”> <paper-icon-button id=“icon_butotn” active isToggle>
70. Tabs
71. ••• ▪▪▪ ••• ▪▪▪
72. Polymer Designer http://www.polymer-project.org/tools/designer/
73. ••• ▪▪▪ <paper-tabs id=“tabs” selected=“0”> <paper-tab>ONE</paper-tab> <paper-tab>TWO</paper-tab> </paper-tabs> <core-animated-pages selected=“{{$.tabs.selected}}”> <section>ONE</section> <section>TWO</section> </core-nimated-pages>
74. ͳͲͳͲ…
75. </> <div class="card"> <paper-shadow z="1"></paper-shadow> </div> <paper-shadow>
76. </> <div class="button raised green"> <div class="center" fit>OK</div> <paper-ripple fit></paper-ripple> </div> <paper-ripple>
77. </> <core-style id=“shared”> :host { display: block color: white; } </core-style> <polymer-element noscript> <template> <core-style ref=“shared”> </core-style> </template> </polymer-element> <core-style>
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
79. Topeka http://www.polymer-project.org/apps/topeka/
80. FAQ
81. Is this project related to Angular JS?
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.
83. angular/material https://github.com/angular/material
84. How is polymer related to Material Design?
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.
86. Is polymer Production ready?
87. ʠ http://www.polymer-project.org/resources/faq.html#readiness Polymer is currently in “developer preview”.
88. ͓ͬ͠Όʔ ϚςϦΞϧͬͧ͆͆͢
89. ΉΉΉ… • Web Components ࣗମ͕ Chrome 36 ͕΍ͬͱ͜ରԠ • Platform.js ͋Δ͚Ͳɺ͍͔ʹ΋ Developer Preview • ϞόΠϧͰ Polymer/Web Componentsେৎ෉͔ • γϟυ΢ͱΞχϝʔγϣϯͷଟ༻͸ϒϥ΢βWebͷఱఢ • Material Design ͦͷ΋ͷ͕ɺAndroid L ʹ޲͚ͯ͜Ε͔Β • Android ͷ UIWidget ྨ΋ɺ·ͩΑ͘͸ಈ͔ͳ͍
90. : )
91. Conclusion
92. • Material Design ͕ྲྀߦΔ͔͸ผͱͯ͠ษڧʹͳΔ • Web ༻ʹ͸ Polymer + Paper Elements Λར༻Ͱ͖Δ • Material Design ΋ Polymer (Web Components) ΋ൃల్্ • ϓϩμΫγϣϯ༻్Ͱීٴ͠͏Δͷ͸ɺ΋͏গ͠ઌͷະདྷ
93. Thanks! http://aho.mu @ahomu github.com/ahomu ! ⌂