TL;DR
最終結果を試したいだけの人はマテリアルデザインのサンプル完成版のデモへどうぞ。
あと、Welcome - PolymerのDemosのセクションにもいくつかデモがあります。
マテリアルデザイン
Google I/O 2014でマテリアルデザインというガイドラインが紹介されました (参考記事: Material design and Android L Developer Preview announcements at I/O 2014… )。
Material design with Polymerを見ると、Polymerのpaper elementsがウェブ用にマテリアルデザインを実装しているとのことです。
Polymer’s paper elements collection implements material design for the web.
チュートリアルを試す
Starter projectのファイルで試すとエラー発生
Getting Started - Polymerを読むと、Starter Projectのファイルをダウンロードして編集していくようになっているのですが、その通りやってみると Uncaught TypeError: undefined is not a function Element.js:104 というエラーが出て動きませんでした。
試したコミットはPolymer/polymer-tutorial at 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のプルリクエストを送ったところ、エラーは修正されました。試したコミットはPolymer/polymer-tutorial at bbf3681afda75fde339997c161f7da61355bb660です。
Polymer 0.3.3はBowerでインストールするのがお勧めとのこと
Getting the code - Polymerでも、Polymerを習うのに一番簡単な方法はStarter Projectのファイルをダウンロードすることだと書いてありますが、上記のようにうまく行かなかったのでこれは一旦諦めました。
その下のInstalling with Bowerを読むと、Polymer 0.3.3はBowerでインストールするのがお勧めとのこと。
マテリアルデザインのチュートリアルの前にHello World的なサンプルを試してみた
Creating elements - PolymerにHello World的なサンプルが書かれていたので、まずはそちらを試してみました。
BowerでPolymerをセットアップする手順
node.jsとbowerはインストール済みという前提とします。サンプルのプロジェクトを1から作る場合の手順は以下のとおりです。
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に以下の記述があります。現状では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にはPythonのSimpleHTTPServerを使う方法が紹介されています。ウェブサーバであれば何でも良いと思いますが、今回はそれで試してみました。
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に添って、サンプルファイルを作って動かしてみました。
Polymerのインポート <link rel="import" href="/components/polymer/polymer.html"> やサンプルアプリで作成しているのウェブコンポーネントの読み込みのURLは適宜調整が必要でした。
出来上がったサンプルはgithubで公開しています。github pageも作ったので実際に動かせます。
サンプルコード: hnakamur/hello-polymer-examples
デモ: http://hnakamur.github.io/hello-polymer-examples/
マテリアルデザインのサンプルアプリを試す
Starter projectのファイルをコピーしてパスを適宜調整
さっきとは別のディレクトリを作って上記の手順でPolymerをインストールし、Starter Projectのファイルをコピーして、インポートやアバターの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秒)をYouTubeに上げました。