Polymerのチュートリアルでマテリアル・デザインのサンプルアプリを試してみた

# TL;DR

最終結果を試したいだけの人は[マテリアルデザインのサンプル完成版のデモ](http://hnakamur.github.io/polymer-tutorial-using-bower/)へどうぞ。
あと、[Welcome - Polymer](http://www.polymer-project.org/)のDemosのセクションにもいくつかデモがあります。

# マテリアルデザイン

Google I/O 2014で[マテリアルデザインというガイドライン](http://www.google.com/design/spec/material-design/introduction.html#introduction-goals)が紹介されました (参考記事: [Material design and Android L Developer Preview announcements at I/O 2014…](https://plus.google.com/+GoogleDevelopers/posts/Mhq2p6QpbtT) )。

[Material design with Polymer](http://www.polymer-project.org/docs/elements/material.html)を見ると、Polymerの[paper elements](http://www.polymer-project.org/docs/elements/paper-elements.html)がウェブ用にマテリアルデザインを実装しているとのことです。

> Polymer’s <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">paper elements</a> collection implements material design for the web.

# チュートリアルを試す

## Starter projectのファイルで試すとエラー発生

[Getting Started - Polymer](http://www.polymer-project.org/docs/start/tutorial/intro.html)を読むと、[Starter Project](https://github.com/Polymer/polymer-tutorial)のファイルをダウンロードして編集していくようになっているのですが、その通りやってみると ```Uncaught TypeError: undefined is not a function Element.js:104``` というエラーが出て動きませんでした。

試したコミットは[Polymer/polymer-tutorial at 42ae88dece6c6b9e11061192dedd984a4e1e08ab](https://github.com/Polymer/polymer-tutorial/tree/42ae88dece6c6b9e11061192dedd984a4e1e08ab)で、ブラウザはChrome 34.0.1847.131です。

### その後エラーは修正されました

2014-06-28 13:55頃追記
[Uncaught TypeError: undefined is not a function Element.js:104 error at Step 1 · Issue #10 · Polymer/polymer-tutorial](https://github.com/Polymer/polymer-tutorial/issues/10)のプルリクエストを送ったところ、エラーは修正されました。試したコミットは[Polymer/polymer-tutorial at bbf3681afda75fde339997c161f7da61355bb660](https://github.com/Polymer/polymer-tutorial/tree/bbf3681afda75fde339997c161f7da61355bb660)です。

## Polymer 0.3.3はBowerでインストールするのがお勧めとのこと

[Getting the code - Polymer](http://www.polymer-project.org/docs/start/getting-the-code.html)でも、Polymerを習うのに一番簡単な方法は[Starter Project](https://github.com/Polymer/polymer-tutorial)のファイルをダウンロードすることだと書いてありますが、上記のようにうまく行かなかったのでこれは一旦諦めました。

その下の[Installing with Bower](http://www.polymer-project.org/docs/start/getting-the-code.html#using-bower)を読むと、Polymer 0.3.3はBowerでインストールするのがお勧めとのこと。

# マテリアルデザインのチュートリアルの前にHello World的なサンプルを試してみた

[Creating elements - Polymer](http://www.polymer-project.org/docs/start/creatingelements.html)にHello World的なサンプルが書かれていたので、まずはそちらを試してみました。

## BowerでPolymerをセットアップする手順

node.jsとbowerはインストール済みという前提とします。サンプルのプロジェクトを1から作る場合の手順は以下のとおりです。

```shell-session
mkdir hello-polymer
cd hello-polymer
bower init
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
```

`hello-polymer` のところはお好みの名前にしてください。 `bower init` ではいろいろ質問されるので適当に答えます。間違えても後から `bower.json` を編集すればいいです。 `what types of modules does this package expose?` のところは選ばずにただenterで進めればOKです。

## ローカルで試すときはウェブサーバが必要

[Using elements - Polymer](http://www.polymer-project.org/docs/start/usingelements.html#install)に以下の記述があります。現状ではHTML Imports polyfillが正しく動くためにはウェブサーバからアプリを開く必要があるとのこと。将来HTML Importsがブラウザでネイティブにサポートされれば、ブラウザでファイルを直接開いても大丈夫になるそうです。

> Note: You must run your app from a web server for the HTML Imports polyfill to work properly. This requirement goes away when the API is available natively.

[Getting Started - Polymer](http://www.polymer-project.org/docs/start/tutorial/intro.html)にはPythonのSimpleHTTPServerを使う方法が紹介されています。ウェブサーバであれば何でも良いと思いますが、今回はそれで試してみました。

```shell-session
python -m SimpleHTTPServer
```

で起動すると http://localhost:8000/ でアクセスできるようになります。

### ウェブサーバはプロジェクトの親ディレクトリで動かすのがお勧め

上記の例だと hello-polymer ディレクトリの親ディレクトリで動かして、ブラウザでは http://localhost:8000/hello-polymer/ でアクセスします。hello-polymer ディレクトリで動かして http://localhost:8080/ でアクセスするのでもダメなわけではないです。

が、htmlファイルから他のファイルを読み込むときに `/foo.html` のように `/` からの絶対パスで書いていても後者では動くのですが、プロジェクト用のgithub pageにデプロイするときはドキュメントルートではなくプロジェクト名のサブディレクトリに配置されてリンク切れになってしまいます。なので、ローカルでも前者の構成にしておいて相対パスで書くようにしました。

## Hello World的なサンプル完成版

あとは[Creating elements - Polymer](http://www.polymer-project.org/docs/start/creatingelements.html)に添って、サンプルファイルを作って動かしてみました。
Polymerのインポート `<link rel="import" href="/components/polymer/polymer.html">` やサンプルアプリで作成しているのウェブコンポーネントの読み込みのURLは適宜調整が必要でした。
出来上がったサンプルはgithubで公開しています。github pageも作ったので実際に動かせます。

サンプルコード: [hnakamur/hello-polymer-examples](https://github.com/hnakamur/hello-polymer-examples)
デモ: http://hnakamur.github.io/hello-polymer-examples/

# マテリアルデザインのサンプルアプリを試す

## Starter projectのファイルをコピーしてパスを適宜調整

さっきとは別のディレクトリを作って上記の手順でPolymerをインストールし、[Starter Project](https://github.com/Polymer/polymer-tutorial)のファイルをコピーして、インポートやアバターのSVGファイルへの相対パスなどを調整すると今度はうまく動きました。step-1, step-2, step-3, finishedのディレクトリに各ステップのファイルがあるので、コピーしてファイルから別のファイルを参照するパスを適宜調整すると今度はうまく動きました。

## マテリアルデザインのサンプル完成版

サンプルコード: https://github.com/hnakamur/polymer-tutorial-using-bower
デモ: http://hnakamur.github.io/polymer-tutorial-using-bower/

このサンプルアプリはSNSのコンタクトリストをイメージしたものです。

* 画面上部のタブでALLを選ぶと登録済みの全員が表示されます。
* 人のカードの右上のハートをクリックするとお気に入りに追加／削除をトグルで切り替えられます。
* 画面上部のタブでFAVORITESを押すと、お気に入りに追加した人だけが表示されます。

タブをクリックすると、クリックに対するフィードバックのアニメーションが表示されます。[デモ動画(6秒)](https://www.youtube.com/watch?v=7nxZmBkh3dw)をYouTubeに上げました。