Material DesignをPolymerで表現しよう（神戸ITフェスティバル × HTML5fun@神戸）
•Download as PPTX, PDF•
2 likes•1,392 views
「Material DesignをPolymerを使い表現する」セッションで使用したスライドです
Recommended
More Related Content
What's hot
What's hot (17)
Viewers also liked
Viewers also liked (20)
Similar to Material DesignをPolymerで表現しよう（神戸ITフェスティバル × HTML5fun@神戸）
Similar to Material DesignをPolymerで表現しよう（神戸ITフェスティバル × HTML5fun@神戸） (20)
More from Masayuki Abe
More from Masayuki Abe (13)
Recently uploaded
Recently uploaded (10)
Material DesignをPolymerで表現しよう（神戸ITフェスティバル × HTML5fun@神戸）
- 1. 神戸ITフェスティバル× HTML5fun Material Design の概要と導入方法 KDDIウェブコミュニケーションズ 阿部正幸
- 2. 阿部正幸（あべまさゆき） 神戸生まれ、横浜育ち、7月31日生まれ ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト統括 ● KDDIウェブ公認CPI スタッフブログ編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う プログラマーディレクタープロマネEvangelist
- 3. Venture Since 1998 Web Service Hosting
- 6. 直近こんな記事書きました 企業からイベント協賛費をもらうた めの提案書と御作法 Facebookの「いいね」を押さずに 記事を読む方法 CMS選定に困ったWeb担当者様。 失敗しないCMSの選び方
- 8. まずカメラの歴史をみてみます 参照：From Dries Buytaert , 「Future of the Web」 https://www.youtube.com/watch?v=gnERPdAiuSo#t=127
- 15. Webの世界はどうでしょか
- 16. まだまだ大変
- 17. Webサイトは作って終わりではない 顧客管理 SEO メルマガ キャンペーン EC ブログ 動画 コーポレート Analytics 集客 販促 管理画面 ソーシャル And more… Site ライティング セキュリティ アップデート モバイル
- 19. 本日は 「Material Designの概要と導入方法」 Polymerで表現することができる Web Components をモダンブラウザ以外でも 使えるようにしたライブラリと、Polymer独自の エレメントが存在する
- 20. 本日は 「Material Designの概要と導入方法」 WePbo Clymoemrでp表on現eすntるsこはと、がWでeきbる標準になるかも Web Components をモダンブラウザ以外でも 使えるようにしたライブラリと、Polymer独自の エレメントが存在する
- 25. Material Designの今後 ● スマートフォンアプリ ● Android Wear (ウェアラブル) ● Android TV（テレビ） ● Android Auto（車） デザインを統一 ユーザーに『分かりやすいUI 』を提供
- 26. Material Designとは、ユーザーに分かりやすい デザインを提供するための指標 どうやって？ 昔からある良いデザイン（紙のデザイン）と、 現在のテクノロジーを融合し、ユーザーに 分かりやすいデザインを提供
- 27. ガイドライン ● アニメーション● スタイル ● レイアウト● コンポーネント ● パターン● ユーザビリティ
- 29. ん？で？ これをどう実装するの？
- 30. CSS・JSライブラリ ● Polymer ● Web Starter Kit ● AngularJS ● Mateliarize ● Material UI
- 31. Material Design対応の使える CSS・JSフレームワーク集 - CPIスタッフブログ-
- 32. PolymerのElementガイドに Material designを再現するドキュメント http://www.polymer-project.org/docs/elements/material.html
- 33. Polymerとは JavaScript UIフレームワークで、Web Componentsを、 モダンブラウザ以外でも利用できるようにしたライブラリ Web Componentsとは、今後、Web標準になる予定の 技術で、Webページで利用する各パーツを、コンポーネント （カプセル化）にし、ページを作成します。
- 34. Polymerの使い方 （１）Polymerファイルをダウンロード yourapp/ bower_components/ webcomponentsjs/ polymer/ elements/ my-element.html index.html
- 35. Polymerの使い方 （２）Polyfillと、Polymerを読み込み <!-- Polyfill のファイルを読み込む--> <script src=”webcomponents.js"></script> <!-- Polymerのコアを読み込む--> <link rel="import" href=“polymer.html">
- 36. Polymerの使い方 （3）カスタムエレメントを作る or コンポーネントを読み込む （4）エレメントを使う <my-element></my-element>
- 37. 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>
- 38. 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>
- 39. 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>
- 40. Web Componentsとは ● Templates ( 各パーツごとのテンプレートを作成) ● Shadow DOM ( ShadowRootで隠し、ページに埋め込む) ● Custom Elements ( 分かりやすタグを独自に作成し、挿入) ● Imports ( 各パーツをファイルごとに分解し、インポート)
- 41. DEMO
- 42. I respect Rob Dodson. Special Thanks. http://www.slideshare.net/rob_dodson/ unlock-the-next-era-of-ui-design-with-polymer
- 43. Agenda Layout Icon Controls
- 44. Layout
- 45. <link rel="import" href=“core-toolbar.html"> <body fullbleed unresolved> <core-toolbar> <div>Polymer Test</div> </core-toolbar>
- 46. <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>
- 47. <core-toolbar class=“tall”> <core-icon-button icon="menu"> </core-icon-button> <div>Polymer Test</div> </core-toolbar>
- 48. <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>
- 50. <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>
- 51. ナビゲーション <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>
- 52. 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>
- 53. Icon
- 54. Core-Icon
- 55. Core-Icon-button
- 56. Controls
- 58. <link rel="import" href="paper-button.html"> <paper-button label="flat button"></paper-button> <paper-button label="raised button" raisedButton></paper-button>
- 60. さいごに Material Designに限らず、近い将来ユーザーに 分かりやすいデザインを提供する必要がある。 そのユーザーに分かりやすいデザインを提供するための １つの手段としてMaterial Design With Polymerを紹介 しました。 そしてWeb Componentsは、将来Web標準 になるかもしれない技術なので要チェックです！