Google Material DesignをPolymerで表現しよう
•Télécharger en tant que PPTX, PDF•
10 j'aime•1,634 vues
HTML5fun@金沢のスライドです
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Google Material DesignをPolymerで表現しよう
Similaire à Google Material DesignをPolymerで表現しよう (20)
Plus de Masayuki Abe
Plus de Masayuki Abe (13)
Dernier
Dernier (11)
Google Material DesignをPolymerで表現しよう
- 1. HTML5fun KANAZAWA Google Material DesignをPolymerで表現しよう 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. まずカメラの歴史をみてみます 参照：From Dries Buytaert , 「Future of the Web」 https://www.youtube.com/watch?v=gnERPdAiuSo#t=127
- 13. Webの世界はどうでしょか
- 14. まだまだ大変
- 15. Webサイトは作って終わりではない 顧客管理 SEO メルマガ キャンペーン EC ブログ 動画 コーポレート Analytics 販促 販促 管理画面 管理画面 And more… Site ライティング セキュリティ アップデート モバイル
- 17. 本日は 「Material DesignをPolymer で表現しよう」 Web Components をモダンブラウザ以外でも 使えるようにしたライブラリと、Polymer独自の エレメントが存在する Web標準化になるかも
- 21. Material Designとは、ユーザーに分かりやすい デザインを提供するための指標 どうやって？ 昔からある良いデザイン（紙のデザイン）と、 現在のテクノロジーを融合し、ユーザーに 分かりやすいデザインを提供
- 22. ガイドライン ● アニメーション● スタイル ● レイアウト● コンポーネント ● パターン● ユーザビリティ
- 24. ん？で？ これをどう実装すんの？
- 25. PolymerのElementガイドに Material designを再現するドキュメントを発見 http://www.polymer-project.org/docs/elements/material.html
- 26. Polymerとは JavaScript UIフレームワークで、Web Componentsを、 モダンブラウザ以外でも利用できるようにしたライブラリ Web Componentsとは、今後、Web標準になる予定の 技術で、Webページで利用する各パーツを、コンポーネント （カプセル化）にし、ページを作成します。
- 27. Polymerの使い方 （１）Polymerファイルをダウンロード （２）Polyfillと、Polymerを読み込み <!-- Polyfill のファイルを読み込む--> <script src="platform/platform.js"></script> <!-- Polymerのコアを読み込む--> <link rel="import" href="polymer/polymer.html">
- 28. Polymerの使い方 （3）カスタムエレメントを作る or コンポーネントを読み込む （4）エレメントを使う <my-element></my-element>
- 29. DEMO
- 30. I respect Rob Dodson. Special Thanks. http://www.slideshare.net/rob_dodson/ unlock-the-next-era-of-ui-design-with-polymer
- 31. Agenda Layout Icon Controls
- 32. Layout
- 33. <link rel="import" href=“core-toolbar.html"> <body fullbleed unresolved> <core-toolbar> <div>Polymer Test</div> </core-toolbar>
- 34. <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>
- 35. <core-toolbar class=“tall”> <core-icon-button icon="menu"> </core-icon-button> <div>Polymer Test</div> </core-toolbar>
- 36. <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>
- 37. Icon
- 38. Core-Icon
- 39. Core-Icon-button
- 40. Controls
- 42. <link rel="import" href="paper-button.html"> <paper-button label="flat button"></paper-button> <paper-button label="raised button" raisedButton></paper-button>
- 44. Web ICONのように、エレメントを読み込み、構築。 各パーツの再利用、複数人での作業などが しやすくなり、メンテナンス制が向上する。 近い将来 さいごに Web ComponentsがWeb標準になるかも