Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)

1,051 views

Published on

「Material DesignをPolymerを使い表現する」セッションで使用したスライドです

Published in: Technology
  • Be the first to comment

Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)

  1. 1. 神戸ITフェスティバル× HTML5fun Material Design の概要と導入方法 KDDIウェブコミュニケーションズ 阿部正幸
  2. 2. 阿部正幸(あべまさゆき) 神戸生まれ、横浜育ち、7月31日生まれ ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト統括 ● KDDIウェブ公認CPI スタッフブログ編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う プログラマーディレクタープロマネEvangelist
  3. 3. Venture Since 1998 Web Service Hosting
  4. 4. Web制作を『超ラク』にする
  5. 5. 直近こんな記事書きました 企業からイベント協賛費をもらうた めの提案書と御作法 Facebookの「いいね」を押さずに 記事を読む方法 CMS選定に困ったWeb担当者様。 失敗しないCMSの選び方
  6. 6. まずカメラの歴史をみてみます 参照:From Dries Buytaert , 「Future of the Web」 https://www.youtube.com/watch?v=gnERPdAiuSo#t=127
  7. 7. カメラの世界では標準化がすすみ、写真を撮って シェアする行程が少なくなっていきました。
  8. 8. Webの世界はどうでしょか
  9. 9. まだまだ大変
  10. 10. Webサイトは作って終わりではない 顧客管理 SEO メルマガ キャンペーン EC ブログ 動画 コーポレート Analytics 集客 販促 管理画面 ソーシャル And more… Site ライティング セキュリティ アップデート モバイル
  11. 11. 35mmフィルムのように Webも標準化していくことで 将来ステップを省けるはず
  12. 12. 本日は 「Material Designの概要と導入方法」 Polymerで表現することができる Web Components をモダンブラウザ以外でも 使えるようにしたライブラリと、Polymer独自の エレメントが存在する
  13. 13. 本日は 「Material Designの概要と導入方法」 WePbo Clymoemrでp表on現eすntるsこはと、がWでeきbる標準になるかも Web Components をモダンブラウザ以外でも 使えるようにしたライブラリと、Polymer独自の エレメントが存在する
  14. 14. Material Design とは
  15. 15. Material Design事例
  16. 16. Material Designの今後 ● スマートフォンアプリ ● Android Wear (ウェアラブル) ● Android TV(テレビ) ● Android Auto(車) デザインを統一 ユーザーに『分かりやすいUI 』を提供
  17. 17. Material Designとは、ユーザーに分かりやすい デザインを提供するための指標 どうやって? 昔からある良いデザイン(紙のデザイン)と、 現在のテクノロジーを融合し、ユーザーに 分かりやすいデザインを提供
  18. 18. ガイドライン ● アニメーション● スタイル ● レイアウト● コンポーネント ● パターン● ユーザビリティ
  19. 19. http://www.google.com/design/spec/animation/authentic-motion.html
  20. 20. ん?で? これをどう実装するの?
  21. 21. CSS・JSライブラリ ● Polymer ● Web Starter Kit ● AngularJS ● Mateliarize ● Material UI
  22. 22. Material Design対応の使える CSS・JSフレームワーク集 - CPIスタッフブログ-
  23. 23. PolymerのElementガイドに Material designを再現するドキュメント http://www.polymer-project.org/docs/elements/material.html
  24. 24. Polymerとは JavaScript UIフレームワークで、Web Componentsを、 モダンブラウザ以外でも利用できるようにしたライブラリ Web Componentsとは、今後、Web標準になる予定の 技術で、Webページで利用する各パーツを、コンポーネント (カプセル化)にし、ページを作成します。
  25. 25. Polymerの使い方 (1)Polymerファイルをダウンロード yourapp/ bower_components/ webcomponentsjs/ polymer/ elements/ my-element.html index.html
  26. 26. Polymerの使い方 (2)Polyfillと、Polymerを読み込み <!-- Polyfill のファイルを読み込む--> <script src=”webcomponents.js"></script> <!-- Polymerのコアを読み込む--> <link rel="import" href=“polymer.html">
  27. 27. Polymerの使い方 (3)カスタムエレメントを作る or コンポーネントを読み込む (4)エレメントを使う <my-element></my-element>
  28. 28. Basicテンプレート [index.html] <head> <script src="webcomponents.js"></script> <link rel="import" href="proto-element.html"> </head> <proto-element></proto-element> [proto-element.html] <link rel="import" href=“polymer.html”> <polymer-element name="proto-element” noscript> <template> <h1>Hello</h1> </template> </polymer-element>
  29. 29. Ready Function <template> This element has a ready() method. <span id="el">Not ready...</span> </template> <script> Polymer({ owner: "Abechiyo", ready: function() { this.$.el.textContent = this.owner + " is ready!"; } }); </script>
  30. 30. Data binding <template> <b>{{old}}</b> years old. My like color is <b>{{color}}</b>. Name : <input type="range” value="{{old}}”> Color : <input value="{{color}}” placeholder="Enter name...”> </template> <script> Polymer({ old: ’25‘, //永遠の color: 'green', }); </script>
  31. 31. Web Componentsとは ● Templates ( 各パーツごとのテンプレートを作成) ● Shadow DOM ( ShadowRootで隠し、ページに埋め込む) ● Custom Elements ( 分かりやすタグを独自に作成し、挿入) ● Imports ( 各パーツをファイルごとに分解し、インポート)
  32. 32. DEMO
  33. 33. I respect Rob Dodson. Special Thanks. http://www.slideshare.net/rob_dodson/ unlock-the-next-era-of-ui-design-with-polymer
  34. 34. Agenda Layout Icon Controls
  35. 35. Layout
  36. 36. <link rel="import" href=“core-toolbar.html"> <body fullbleed unresolved> <core-toolbar> <div>Polymer Test</div> </core-toolbar>
  37. 37. <link rel="import” href=“core-icon-button.html"> <body fullbleed unresolved> <core-toolbar> <core-icon-button icon="menu"> </core-icon-button> <div>Polymer Test</div> </core-toolbar>
  38. 38. <core-toolbar class=“tall”> <core-icon-button icon="menu"> </core-icon-button> <div>Polymer Test</div> </core-toolbar>
  39. 39. <link rel="import” href=“core-header-panel.html"> <core-header-panel> <core-toolbar class=“tall”> <core-icon-button icon="menu"> </core-icon-button> <div>Polymer Test</div> </core-toolbar> </core-header-panel>
  40. 40. レイアウトはGridシステム採用の Materialize が使いやすい
  41. 41. <html> <head> Mateliarize使い方 <link rel="stylesheet" href="css/materialize.min.css" /> </head> <body> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="js/materialize.min.js"></script> </body> </html>
  42. 42. ナビゲーション <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo">Logo</a> <ul class="right side-nav" id="nav-mobile"> <li><a href="">Sass</a></li> <li><a href="">Components</a></li> <li><a href="">JavaScript</a></li> </ul> <a class="button-collapse" href="#” data-activates='nav-mobile'> <i class="mdi-navigation-menu"></i> </a> </div> </nav>
  43. 43. Grid システム <div class="section"> <div class="container"> Small screens : 480px Medium screens : 768px Large screen : 992px <div class="row"> <div class="col s12><p>s12</p></div> <div class="col s12 m3"><p>s12 m3</p></div> <div class="col s12 m6"><p>s12 m6</p></div> <div class="col s12 m3"><p>s12 m3</p></div> </div> </div> </div>
  44. 44. Icon
  45. 45. Core-Icon
  46. 46. Core-Icon-button
  47. 47. Controls
  48. 48. <link rel="import" href="paper-button.html"> <paper-button label="flat button"></paper-button> <paper-button label="raised button" raisedButton></paper-button>
  49. 49. Paper Elementsを参照
  50. 50. さいごに Material Designに限らず、近い将来ユーザーに 分かりやすいデザインを提供する必要がある。 そのユーザーに分かりやすいデザインを提供するための 1つの手段としてMaterial Design With Polymerを紹介 しました。 そしてWeb Componentsは、将来Web標準 になるかもしれない技術なので要チェックです!
  51. 51. ご清聴ありがとうございました 阿部正幸 ID:chiyo.abe

×