ユーザーに分かりやすいサイトをPolymerとMaterial Designで表現しよう

>>スマートフォン版はこちら
投稿者 admin 2014年12月09日 12:00:01

この記事は、「Google Material Design をPolymerで表現する」で連載している最終回記事です。
Material Designについてや、Polymerについては過去記事をお読みください。

今回作成するサンプルページはこちらで確認することができます。

スマートフォン対応のレイアウトで、ボタンなどには操作したことを分かりやすく伝えるためのアニメーションが付いています。

動画でもポイントを簡単に説明しています。

Application layout

まずは、ページレイアウトです。
Polymerのコアにはいくつかのレイアウト用のエレメントが含まれています。そのエレメントを使いレイアウトを構築する方法です。
Material Designでは「Metrics & keylines」にてレイアウトに関する指標を定義しています。

[ レイアウトを表現するためのエレメント ]

core-header-panel：ヘッダーと、コンテンツ用の単純なコンテナ
core-toolbar：アプリや、カードなどの小さいUI用。ヘッダーのツールバーにも使用できます。
core-drawer-panel：左右にページを分割するためのエレメント
core-scaffold：上記3つのエレメントを組み合わせレイアウトを構築。レイアウトの足場となるエレメント

レイアウトはcore-scaffoldを元に構築します。
core-scaffoldは、core-drawer-panel、core-header-panel、core-toolbarを組み合わせて作るレイアウトですの、まずは3つのエレメントをインストールします。

[Bowerが使える場合]

下記のコマンドを実行ください。

$ bower install Polymer/core-toolbar
$ bower install Polymer/core-drawer-panel
$ bower install Polymer/core-header-panel
$ bower install Polymer/core-scaffold

その他使うエレメント無ければ適宜インストールください。

$ bower install Polymer/core-menu
$ bower install Polymer/core-header-panel

[Bowerが使えない場合]

下記URLより、エレメントをダウンロードしてください。

core-drawer-panel：
https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel

core-header-panel：
https://www.polymer-project.org/docs/elements/core-elements.html#core-header-panel

core-toolbar：
https://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar

core-scaffold：
https://www.polymer-project.org/docs/elements/core-elements.html#core-scaffold

各エレメントはbower_components/フォルダ以下に保存ください。

yourapp/
    bower_components/
        webcomponentsjs/
        polymer/
    elements/
        my-element.html
    index.html

[ソースコード]

各エレメントの読み込み

<!-- Polyfill Web Components support for older browsers -->
<script
src="./bower_components/webcomponentsjs/webcomponentsjs.mini.js"></script>
<!--Polymerのコアを読み込む-->
<link rel="import"
 href="./bower_components/polymer/polymer.html">
<link rel="import"
href="./bower_components/core-toolbar/core-toolbar.html">
<link rel="import"
href="./bower_components/core-menu/core-menu.html">
<link rel="import"
href="./bower_components/core-item/core-item.html">
<link rel="import"
href="./bower_components/core-header-panel/core-header-panel.html">
<link rel="import"
href="./bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import"
href="./bower_components/core-scaffold/core-scaffold.html">

HTMLコード

<core-scaffold>
  <core-header-panel navigation flex>
    <core-toolbar id="navheader">
      <span>Menu</span>
    </core-toolbar>
    <core-menu>
      <core-item label="One"></core-item>
      <core-item label="Two"></core-item>
    </core-menu>
  </core-header-panel>
 
  <span tool>Title</span>
  <div class="content">
      <p>If drawer is hidden, press button to display drawer.</p>
  </div>
</core-scaffold>

CSS

body {
  font-family: sans-serif;
}
#navheader {
  background-color: #56BA89;
}
.content {
  padding: 20px;
}

下記のレイアウトが表示されましたでしょうか。

Icons

アイコンを出力します。デフォルトは24pxの四角です。詳しくは「Polymer core-Icon、Buttons エレメント、スタイル」記事を参照ください。

メニューの「One」と「Two」の横にアイコンを付けます。core-itemエレメントにiconを指定します。

<core-item icon="settings" label="One"></core-item>

アイコンの表示は、icon=" "で指定します。その他のアイコンは下記のサイトより確認することができます。
https://www.polymer-project.org/components/core-icon/demo.html

アイコンが追加されました。

今回は<core-item>エレメントにアイコンを追加しましたが、下記のようにページ内に指定することもできます。

<core-icon icon="star"></core-icon>

詳しくは「Polymer core-Icon、Buttons エレメント、スタイル」記事を参照ください。

Material controls

Material controlsは、ユーザーに何の操作をしたかを直感で伝えるために重要な要素です。

ボタン、チェックボックス、トグルボタン、アイコンボタン、アクションボタン、ラジオボタン、スライダー、プログレスバー、テキストインプットなど様々なエレメントが用意されています。詳細は下記リンクより参照ください。
https://www.polymer-project.org/components/paper-elements/demo.html#paper-button

さて、今回はサンプルとして、チェックボックス、スライダー、テキストインプットを組み込みます。その他のControlsに関しても同様の手順で組み込むことができます。

[チェックボックス]

下記ページより、チェックボックス用のエレメントをダウンロードします。
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-checkbox

エレメントの読み込み

<link rel="import"
 href="./bower_components/paper-checkbox/paper-checkbox.html">

チェックボックスの出力

<paper-checkbox></paper-checkbox>

[スライダー]

下記ページより、スライダー用のエレメントをダウンロードします。
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-slider

エレメントの読み込み

<link rel="import"
 href="./bower_components/paper-slider/paper-slider.html">

スライダーの出力

<paper-slider min="10" max="200" value="110"></paper-slider>

[テキスト入力フィールド]

下記ページより、テキスト入力用のエレメントをダウンロードします。
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-input

エレメントの読み込み

<link rel="import"
 href="./bower_components/paper-input/paper-input.html">

テキスト入力フィールドの出力

<paper-input label="Your Name"></paper-input>

下記のControlsが追加されました。

使い方が簡単すぎて、紹介するまででも無かったかもしれませんね。
このように予め用意されているエレメントを読み込むことで、ユーザーに分かりやすい操作ボタン等を利用することができます。

Dialogs, snackbars, and toasts

ダイアログ用のエレメントとして、snackbarsとtoastsが用意されています。
これらのエレメントは、メインのページの上にエレメントを表示します。

paper-dialogは、タイトル、テキスト、ボタン操作などを含みます。
paper-toastは、一時的なメッセージを伝えるためのポップアップです。

まずは下記URLより必要なエレメントをダウンロードください。
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-dialog
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button

[paper-dialog、paper-toast]

エレメントの読み込み

<link rel="import"
 href="./bower_components/paper-dialog/paper-dialog.html">
<link rel="import"
 href="./bower_components/paper-button/paper-button.html">
<link rel="import"
 href="./bower_components/paper-toast/paper-toast.html">

dialogのセット

<paper-dialog id="dialog" heading="Dialog Title"
 transition="core-transition-left">
    <p>Hi This is Dialog content</p>
</paper-dialog>

heading : タイトルを指定
transition : Dialogの動作などを指定 (e.g) core-transition-top、core-transion-center ....

toastのセット

<paper-toast id="toast" text="Hi :D "></paper-toast>

paper-buttonからの起動

<paper-button onclick="document.querySelector('#dialog').toggle()">
   Dialog Button
</paper-button>

<paper-button onclick="document.querySelector('#toast').show()">
  Tosat Button
</paper-button>

paper-buttonから、DialogとToastは起動できましたでしょうか。

Material effects

タッチなどの操作を分かりやすくするためエフェクトや、高さを表すエフェクトが用意されています。
Material Designでは、素材の上に素材を重ねる場合、視覚的に高さを変え、どの素材が上にいるかを表現する必要があります。

[Touch ripple effect and Shadow effect]

まずはエレメントをダウンロードします。
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-shadow
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-ripple

エレメントの読み込み

<link rel="import" 
 href="./bower_components/paper-ripple/paper-ripple.html">
<link rel="import"
href="./bower_components/paper-shadow/paper-shadow.html">

rippleエレメント

<div class="ripple box">
      <p>Ripple effect</p>
      <paper-ripple fit></paper-ripple>
</div>

CSS

.box{
  // rippleエフェクトをかける範囲を指定
  height:150px;
  width: 150px;
}

shadow effect

<paper-shadow z="5" class="box-shadow">
  コンテント
</paper-shadow>

rippleエフェクトと、shadowにて高さを表現することができました。高さは0〜5まで用意されています。

Transitions

ページ間の遷移を、視覚の連続性を提供するためにTransition(移行) を利用します。

下記の例を参考にしてみてください。

https://www.polymer-project.org/components/core-animated-pages/demo.html

https://www.polymer-project.org/apps/topeka/

Scrolling techniques

画面をスクロールしている、ツールバーが隠れている、ツールバーが表示されているなどの情報を視覚的に伝えることができます。

「 core-scroll-header-panel」を使ったデモを参照ください。
https://www.polymer-project.org/components/core-scroll-header-panel/demo.html

利用については、こちらの記事にもまとめていますので、参考にしてみてください。
「Polymer Layoutエレメントで簡単レイアウト構築」

その他の記事

[Material Designについて]

Material Designとは(Introduction)

[Polymerを使ってMaterial Designを表現する]

最後に

Polymer使うことにより、アニメーションや、レイアウトは簡単に利用することができます。
やっぱりと言うか仕方がないことですが、デザイナーさんが居ないとかっこいいサイトは作れないなと実感しました。近いうちにデザイナーさんと組んで、このMaterial Designを再現してみたいものです。

この記事を読んだデザイナーさん、一緒に何かMaterial Designのテンプレートでも作りませんか？＾＾

Tags:

ツール

CPIスタッフブログ

ユーザーに分かりやすいサイトをPolymerとMaterial Designで表現しよう

目次

Application layout

Icons

Material controls

Dialogs, snackbars, and toasts

Material effects

Transitions

Scrolling techniques

その他の記事

最後に

タグ一覧

人気記事一覧

CPIスタッフブログ

ユーザーに分かりやすいサイトをPolymerとMaterial Designで表現しよう

目次

Application layout

Icons

Material controls

Dialogs, snackbars, and toasts

Material effects

Transitions

Scrolling techniques

その他の記事

最後に

検索フォーム

タグ一覧

人気記事一覧