google material designをpolymerで表現しよう
DESCRIPTION
HTML5fun@金沢のスライドですTRANSCRIPT
HTML5fun KANAZAWA
Google Material Design を Polymer で表現しよう
KDDI ウェブコミュニケーションズ阿部 正幸
● ACE01 / SmartRelease プロダクトマネージャー● CPI エバンジェリスト 統括● KDDI ウェブ 公認 CPI スタッフブログ 編集長● Drupal(g.d.o Japan) 日本コミュニティー● 日本ディレクション協会 講演部● HTML5 Fun 理事
OSS を広げる活動、 Web 制作に関する情報発信を行う
神戸生まれ、横浜育ち、 7 月 31 日生まれ
阿部 正幸（あべ まさゆき）
ディレクタープログラマー プ ロ マ ネ Evangelist
VentureSince 1998
Web Service
Hosting
Web 制作を 『超ラク』 にする
https://www.youtube.com/watch?v=gnERPdAiuSo#t=127
まずカメラの歴史をみてみます
参照： From Dries Buytaert , 「 Future of the Web 」
カメラの世界では標準化がすすみ、写真を撮って
シェアする行程が少なくなっていきました。
Web の世界はどうでしょか
まだまだ大変
Web サイトは作って終わりではない
顧客管理
SEOメルマガ
キャンペーン
EC
ブログ
コーポレート
Analytics 販促
販促
管理画面管理画面
And more…
Site
ライティング
セキュリティ
アップデート
モバイル
動画
Web も標準化していくことで
将来ステップを省けるはず
35mm フィルムのように
本日は
「 Material Design を Polymer で表現しよう」
Web Components をモダンブラウザ以外でも使えるようにしたライブラリと、 Polymer 独自のエレメントが存在する
Web 標準化になるかも
Material Design 事例
Material Design とは
Material Design とは、ユーザーに分かりやすいデザインを提供するための指標
どうやって？
昔からある良いデザイン（紙のデザイン）と、現在のテクノロジーを融合し、ユーザーに分かりやすいデザインを提供
ガイドライン
● アニメーション ● スタイル
● レイアウト ● コンポーネント
● パターン ● ユーザビリティ
http://www.google.com/design/spec/animation/authentic-motion.html
ん？で？ これをどう実装すんの？
Polymer の Element ガイドにMaterial design を再現するドキュメントを発見
http://www.polymer-project.org/docs/elements/material.html
Polymer とは
JavaScript UI フレームワークで、 Web Components を、
モダンブラウザ以外でも利用できるようにしたライブラリ
Web Components とは、今後、 Web 標準になる予定の
技術で、 Web ページで利用する各パーツを、コンポーネント
（カプセル化）にし、ページを作成します。
Polymer の使い方
<!-- Polyfill のファイルを読み込む --><script src="platform/platform.js"></script>
<!-- Polymer のコアを読み込む --><link rel="import" href="polymer/polymer.html">
（１） Polymer ファイルをダウンロード
（２） Polyfill と、 Polymer を読み込み
Polymer の使い方
（ 3 ）カスタムエレメントを作るor
コンポーネントを読み込む
（ 4 ）エレメントを使う
<my-element></my-element>
DEMO
I respect Rob Dodson. Special Thanks.
http://www.slideshare.net/rob_dodson/unlock-the-next-era-of-ui-design-with-polymer
Agenda
Layout Icon Controls
Layout
<link rel="import" href=“core-toolbar.html">
<body fullbleed unresolved><core-toolbar> <div>Polymer Test</div></core-toolbar>
<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>
<core-toolbar class=“tall”> <core-icon-button icon="menu"> </core-icon-button> <div>Polymer Test</div></core-toolbar>
<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>
Icon
Core-Icon
Core-Icon-button
Controls
<link rel="import" href="paper-button.html">
<paper-button label="flat button"></paper-button><paper-button label="raised button" raisedButton></paper-button>
Paler Elements を参照
Web ICON のように、エレメントを読み込み、構築。各パーツの再利用、複数人での作業などがしやすくなり、メンテナンス制が向上する。
近い将来
さいごに
Web Components が Web 標準になるかも
ご清聴ありがとうございました
ID ： chiyo.abe阿部 正幸