アペフチ

Polymerでマテリアルデザインする時に読むといい物

Polymer 0.5、0.8の頃は、Polymerでマテリアルデザインするのが(少なくともその取っ掛かりは)簡単だったように思うけど、1.0になって難しくなったと感じていた。0.8でも1.0でも同様に、Paper Elementsというコンポーネントセット(paper-*というタグ集)が予め用意されていて、それを使うとマテリアルデザインが始められるようになっているのに、どこが違うんだろう。

というところでググったりしていて思い付いたのは、チュートリアルがないからだ。Polymer 1.0自体のチュートリアルはある(Quick tour of Polymer)。でもこれは、Polymerを使って自分で要素を作り、それを使うというチュートリアルだ。名前もチュートリアルではなくクイックツアーになっている。他に公式サイトで探して見付かるのはPaper Elementsカタログの各要素のサンプルと、あとはPolymer Starter Kitくらい。前者はリファレンスなので全体の考え方が掴みにくいし、後者はあっさりしすぎている。

でもPolymer 0.5は、自分でPaper Elementsを使いながら一つのウェブアプリケーションを作るチュートリアルがあった(Getting the starter project)。これをやっていたので0.5でPaper Elementsを使ってページを作るのに、細々したところはともかく、「全体としてはこういう流れてやるんだな」というところに躓いた憶えがなかったのだ(と、いうほど、使っていないけれど)。

日記をこのGitHub Pages+Middlemanにするにあたって、フレームワークにPolymerを選んだところで改めて探して、ようやく、Paper Elementsの使い方にふさわしい公式ドキュメントを見付けた。

Responsive Material Design layoutsだ。

細かいステップを通じて、レイアウトする時の「枠」を教えてくれる。各ステップでデモンストレーションも用意されているので分かりやすい。おすすめ。

Polymerの公式サイトを探しているのではだめで、Element Catalogの下の方にあるガイドを探すべきだった。上のドキュメントから参照しているFlexbox layout with iron-flex-layoutもほぼ必読のドキュメントだと言っていいと思う。まだ読んでいないけどneon-animationも気になっている。確か今策定中のWeb Animationsを使う要素のコレクションだったと思う。