この記事について

CSS nite in Kyoto参加レポートその３です。

セッション中にとったメモに、URLや個別に質問して頂いた情報などを付け加えた内容となっています。

公開されているスライドについても見つかり次第記事内に追加予定です。

その他のまとめ

セッション２：コンテンツマーケティングは恋のライセンス
GoogleAnalytics&KH coderを活用してSEOに使える「共起語」を見つけよう

KDDIウェブコミュニケーションズ　阿部正幸

３行ハイライト

Webもカメラのようにいずれ標準化・簡略化が進む
Material Designは紙のデザインを基に提案された「新しい指標」
Web ComponentsとMaterial Designが標準になる日は遠くない

今回のテーマ：Polymerを使ってMaterial Designを作る

Polymerって？

Web Componentsを実装するためのポリフィル。

Web Componentsは動作するブラウザが現在非常に少ないので、擬似的に実装させるJavaScriptライブラリを使用する。

アイスブレイク：カメラの歴史を振り返る

１８３９年：カメラの登場

• 複雑な撮影工程
• 「撮影ができる」レベルの品質

１８８８年：No.1コダックの登場

• 「シャッターを押すだけで写真が取れる」
• 安価でカンタンに操作ができるカメラが次々と登場するようになる

その後、カメラ・フィルムは次第に簡略化・共通規格化が進行し・・・

現在：iPhone

• カメラの世界では標準化が進み、使うための工程が減っていった。
• じゃあWEBの世界はどうだろう？
• まだまだ複雑な工程が残されている。

Webも標準化していくことで将来工程が少なくなっていく。
実際、欧米ではWEB制作会社は減少し、アプリ制作にシフトしていっている。

Webの標準規格としてGoogleが提唱したガイドライン＝Material Design

Material Designの概要と導入方法

Material Designとは？

Googleが2014年8月に発表した「ユーザーにわかりやすいデザインを提供するための指標」。

Googleの紹介動画

「ユーザーにわかりやすいデザインを提供する」ことを実現するため、DTPなどの「昔からある良いデザイン」と「現在のテクノロジー」との融合を目指した内容となっている。

最近ではEvernoteやGoogleMapが採用した。

ガイドライン

ドキュメントは日々増加し続けていて、比率などの具体的な指標が設けられている。

• アニメーション
• レイアウト
• パターン
• スタイル
• コンポーネント
• ユーザービリティ

しかし「どうやって実装するのか」は掲載されていない。

CSS/JSライブラリを使用した実装

2014年11月時点で

• Polymer
• Web Starter Kit
• AngularJS
• Materialize
• Material UI

の5種類がある。

Polymerを使って構築する

事前準備

• Polymerをダウンロード
• PolyfilとPolymerを読み込む

gulpやYoemanを使用するとより効率的

Polymerで構築する

• カスタムエレメントをHTMLで作成する。
• 作成したカスタムエレメントをHTMLタグとして埋め込む。

デモメインのため、具体的なステップは以下の記事を参照してください。
Google Material Design をPolymerで表現する | レンタルサーバーのCPIスタッフブログ

Web Componentsの特徴１：ShadowDOM

カスタムエレメントの中「だけの」CSSを書くことができる。

カスタムエレメント内に書かれたCSSはそのエレメント外の要素には適用されない。

CSSの衝突が非常に発生しにくくなり、変更・追加・削除がよりカンタンに行えるようになる！

Web Componentsの特徴２：Import

カスタムエレメントをhtmlファイルとして外部ファイル化することができる。

今までPHPやJavaScriptなどで実装させていたテンプレートエンジンを、HTML5で行うことが可能になる。

PolymerでMaterial Designを作る

PolymerにはMaterial Designを採用した「コアツール」が用意されている。
HTMLでコアツールを呼び出すだけで、GoogleMapやスクロールで非表示になるナビゲーションなどもカンタンに作ることができる。
更にはフォームやボタンにアニメーションがデフォルトで付いているなど非常にお得。

Polymerを使わずにMaterial Design使用する

MaterializeというCSSフレームワークが2014年11月にリリースされたので、これをお勧めしたい。

Bootstrapなどのフレームワーク感覚で扱えるので、Web ComponentsやJavaScriptに苦手意識のある方はまずこちらで試して欲しい。

まとめ

今後遅かれ早かれ「Web Components」を使用したマークアップが標準になる。

「どんなブラウザでも動作する・閲覧できる」サイト・アプリを目指すならば、Material Designを１つの指標としてデザイン・構築していくことをお勧めしたい。