読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

Material Design + Web Components = Polymer

polymer

フレームワークの調査を終え、AngularJS+Bootstrapを実際に使ってみようとしたころ、Android5.0 Lollipopがリリースされました。「せっかくだから、Material DesignのUIで作ろう」と思い、いろいろ調べていくと「Polymer」というフレームワークに遭遇しました。

そう、またまたフレームワークです。

Material DesignをWebで実現する方法

Polymerの存在は知っていたのですが、調べてみると、Material DesignをWebで実現する一つの方法と捉えることができそうです。というのも、CSSフレームワークとして、Material Designを再現する方法がいくつかあるからです。

こちらの記事を参照すると、「Materialize」「Material UI」の2つがCSSフレームワークとして、Material Designを実現できるようです。
ただし、「Materialize」に関しては、jQueryを利用しているので、AngularJSなどのMVCフレームワークとの相性があまりよくなさそうです。
「Material UI」は知見があまりなく、公式サイトをちょっと見ただけでは、使い方が謎ですね。

Polymerとは

「Materialize」「Material UI」がCSSにフォーカスしたフレームワークなのに対し、Polymerは「Web Components」という新しいhtmlの仕組みも提供するフレームワークです。なので、(やる価値は置いておいて)htmlをいじるMVCフレームワークとの共存は無理でしょう。
しかし、YeomanにPolymerのGenratorが提供されているようで、それを使って共存を試みた例がありました。やはり不具合があるようですが。。

今のところ、Polymerは単独で使うのが良さそうです。


数多存在するフレームワーク、もしかしたらPolymerのように、単独で使えるものが、一番使いやすかったりするのかも。
これからまた増えてくるのでしょうが。。