View
397
Download
5
Category
Preview:
DESCRIPTION
「Material DesignをPolymerを使い表現する」セッションで使用したスライドです
Citation preview
神戸ITフェスティバル × HTML5fun
Material Design の概要と導入方法
KDDIウェブコミュニケーションズ
阿部正幸
● ACE01 / SmartReleaseプロダクトマネージャー● CPI エバンジェリスト統括● KDDIウェブ公認 CPI スタッフブログ編集長● Drupal(g.d.o Japan)日本コミュニティー●日本ディレクション協会 講演部● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち、7月31日生まれ
阿部正幸（あべまさゆき）
ディレクタープログラマー プロマネ Evangelist
VentureSince
1998
Web
ServiceHosting
Web制作を 『超ラク』 にする
直近こんな記事書きました
企業からイベント協賛費をもらうための提案書と御作法
Facebookの「いいね」を押さずに記事を読む方法
CMS選定に困ったWeb担当者様。失敗しないCMSの選び方
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の概要と導入方法」
Web Components をモダンブラウザ以外でも使えるようにしたライブラリと、Polymer独自のエレメントが存在する
Polymerで表現することができる
本日は
「Material Designの概要と導入方法」
Web Components をモダンブラウザ以外でも使えるようにしたライブラリと、Polymer独自のエレメントが存在する
Polymerで表現することができるWeb Components は、Web標準になるかも
Material Designとは
Material Design事例
Material Designの今後
●スマートフォンアプリ
● Android Wear (ウェアラブル)
● Android Auto（車）
● Android TV（テレビ）
デザインを統一
ユーザーに『 分かりやすいUI 』を提供
Material Designとは、ユーザーに分かりやすいデザインを提供するための指標
どうやって？
昔からある良いデザイン（紙のデザイン）と、現在のテクノロジーを融合し、ユーザーに分かりやすいデザインを提供
ガイドライン
●アニメーション ●スタイル
●レイアウト ●コンポーネント
●パターン ●ユーザビリティ
http://www.google.com/design/spec/animation/authentic-motion.html
ん？で？ これをどう実装するの？
CSS・JSライブラリ
● Polymer
● Web Starter Kit
● AngularJS
● Mateliarize
● Material UI
Material Design対応の使えるCSS・JSフレームワーク集
- CPIスタッフブログ -
PolymerのElementガイドにMaterial designを再現するドキュメント
http://www.polymer-project.org/docs/elements/material.html
Polymerとは
JavaScript UIフレームワークで、Web Componentsを、
モダンブラウザ以外でも利用できるようにしたライブラリ
Web Componentsとは、今後、Web標準になる予定の
技術で、Webページで利用する各パーツを、コンポーネント
（カプセル化）にし、ページを作成します。
Polymerの使い方
（１）Polymerファイルをダウンロード
yourapp/
bower_components/
webcomponentsjs/
polymer/
elements/
my-element.html
index.html
Polymerの使い方
<!-- Polyfillのファイルを読み込む -->
<script src=”webcomponents.js"></script>
<!-- Polymerのコアを読み込む -->
<link rel="import" href=“polymer.html">
（２）Polyfillと、Polymerを読み込み
Polymerの使い方
（3）カスタムエレメントを作る
or
コンポーネントを読み込む
（4）エレメントを使う
<my-element></my-element>
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>
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>
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>
Web Componentsとは
● Templates
● Shadow DOM
● Custom Elements
● Imports
( 各パーツごとのテンプレートを作成 )
( ShadowRootで隠し、ページに埋め込む )
( 分かりやすタグを独自に作成し、挿入 )
( 各パーツをファイルごとに分解し、インポート )
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>
レイアウトはGridシステム採用の
Materializeが使いやすい
<html>
<head>
<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>
Mateliarize使い方
ナビゲーション
<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>
Grid システム
<div class="section">
<div class="container">
<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>
Small screens ： 480px
Medium screens ： 768px
Large screen ： 992px
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>
Paper Elementsを参照
Material Designに限らず、近い将来ユーザーに
分かりやすいデザインを提供する必要がある。
そのユーザーに分かりやすいデザインを提供するための１つの手段としてMaterial Design With Polymerを紹介しました。
そしてWeb Componentsは、将来Web標準になるかもしれない技術なので要チェックです！
さいごに
ご清聴ありがとうございました
ID：chiyo.abe
阿部正幸
Recommended