Material Design とは2014年の Google I/O で Android Lollipop の新しい UI として発表したデザインです。Google のアプリではそれ以前の Android や Web でも使われています。
Google が出している Paper Elements というものを使ことで、そんな Material Design を自分のアプリやWebサイトでも使うことができます。
自分たちでUIをデザインする労力を省けますし、特にAndroidでは他のアプリと統一されたデザインにすることで、ユーザにとって使い方がわかりやすいものにすることができます。
インストールする
bower を使ってインストールするのが推奨されているので、それを使います。
$ bower install Polymer/paper-elements依存関係も一緒にインストールしてくれます。
インストールが終わったら、こんなHTMLを用意しておきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paper Elements</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<!-- ここに色々書いていく -->
</body>
</html>使ってみる
手始めにボタンを作ってみます。さっき作ったHTMLに以下の内容を書き込みます。
<paper-button raised>This is button</paper-button><br>
<paper-button>This is flat button</paper-button><br>
<paper-button raised noink>This is flat button (no effect)</paper-button><br>
<paper-button noink>This is flat button (no effect)</paper-button><br><paper-button> というのは Paper Elements によって定義されたHTMLタグです。このように独自に定義されたHTMLタグを使うことで、UIを作っていきます。どのような要素が使えるかはここを見ればわかります。
ブラウザで確認してみます。普通にファイルをブラウザで開くだけだとエラーが出てきちんと表示されないので、サーバを立てる必要があります。
一番簡単なのは、おそらく Python を使う方法です。HTMLのある場所で以下のコマンドを実行します。
$ python -m SimpleHTTPServerこれで8000番のポートにサーバが立つ。ブラウザでアクセスできるようになったはず。
こんな画面が出ました。上2つはクリックするといい感じにアニメーションします。
CSSで色も変えることもできます。詳しくはここに書いてあります。
もっと使ってみる
ボタン以外にも多くの要素があります。例としてスライダーでページの背景色を変えてみます。
<paper-slider min="0" max="255" value="255" onchange="
document.body.style.backgroundColor = '#' + this.value.toString(16) +
this.value.toString(16) + this.value.toString(16);
"></paper-slider>
ブラウザで確認すると、いい感じのスライダーが表示されます。
onchange に書いたJavaScriptによってスライダーを動かすと背景の明るさが変わるようになっています。
まとめ
- Material Design とは Google が発表したUIのデザインです
- HTMLから使うことができます
$ bower install Polymer/paper-elements
- いろいろな要素がデザインされています
- 例で使ったのは
<paper-button>と<paper-slider>
- 例で使ったのは