PolymerでMaterial Design

どうもこんにちは、中川です。
1回当番を忘れてしまっていて、今日になりました。(・ω<) てへぺろ
　
そんな前置きはさておき、ここのところ個人的にWeb Componentsを勉強しているのですが、ちょうど最近社内でMaterial Designについてちょっと話す機会ができたので、ちょっとpolymer触ってMaterial Designを実装してみようかと思いました。

　

そもそもMaterial designとは

Material Designと言っても自分の中ではおぼろげなので、本家サイトで確認しました。

　
YouTubeに動画も上がっています。

　
ひと通り読んでみたのですが、個人的にはデザインのTipsのようなものではなく、デザインに対する概念のようなものかと捉えました。個人的にはものすごく好きです。
　

Polymerでの実装

ひととおり、本家サイトを読んだところで、実際に実装するにあたり今回はタイトルにあるようにPolymerを使って実装してみました。
Polymerのサイトに書かれている通りに今回は進めました。
　

インストール

　 サイトにはbowerでインストールするのをおすすめしていたので、ローカルにディレクトリを作成してから、そこに素直にbowerでインストールします。

bower install --save Polymer/polymer

　 その後、エレメントもまとめてインストールします。

bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

　 これで最初の準備は終わりです。便利な世の中になったもんですね。。。 　　

実装してみる

　 今回はサイトに載っていたチュートリアルを素直に実装しました。 　 その前に、ローカルで作成したファイルをブラウザで表示させようとしても意図したようには表示されないので、ローカルサーバーを立ち上げるなどして表示させる必要があります。 チュートリアルでは、Pythonを使っていましたが、今回はMAMPを使って作成→確認をしていました。 　 。 。。 。。。 　 できました。(Chrome canaryの最新版で確認しています。) チュートリアルの通りにコードを叩いていくと、これが作成できます。 　 いろいろ調べながら触っていたのですが、それでも2時間もあれば作成できると思います。 サイトに書かれている通りに触っていけば誰でも同じものは作成できるかと思いますが、 やはりWeb Componentsの知識は必要になってくるので、敷居はそこそこ高い気がしました。 　 　　

最後に

Web Components自体、まだ触り始めてそんなに経っていないので、分かっていないことのほうがはるかに多いです。 cssが破綻することは今までより減るかな。。でもパフォーマンスは落ちないの？など、まだまだ未知のことが多すぎる分野です。それに「未来の技術！」みたいな感じで話されてはいますが、もしかしたら2年後とかには、きれいさっぱりなくなっているかもしれない。。。。 　 それでも僕はWeb Componentsと同じように、Polymerには未来というかドキドキを感じました。 実案件でpolymer使ってWeb Componetsを実装するのはまだ時期尚早かとは思いますが、個人的にはWeb Componentsをこれからも追いかけつつ、polymerについても同じように見て行きたいと思います。