2015 7月5日 00:27
LT駆動開発16で「Material Designなサイトをつくってみる」をというLTをした。 ちょっと前にPolymer Starter Kitに遊んだので紹介した。 戯言 ライブコーディングでカバー画像の設定とボタンの設置をやった。 エレメントを使うのにimportをしないといけないことに気づかないでハマったのでその話をした。 Starter Kitで使われているエレメントはapp/elements/elements.htmlでインポートされてる。インポートされてないものはインポートする必要がある。paper-buttonやiron-imageやら。 それだけわかれば結構楽しめるPolymerさん。 カスタムエレメントのHTMLも眺めてみるとどんなことができるのかも結構想像できるんじゃないかと思う。 あまり情報がないので、どんどんみんな試して欲しい。 関連 icon-iconで使えるアイコン Polymer Catalog
2013 5月31日 19:33
Google I/O で紹介されていた Polymer という JavaScript で少し遊びました。 Web Components という Web の UI を コンポーネント化するための仕組みがあります。 これをラップして 使いやすくしてくれる Polymer です。 遊んだ結果はこの辺 rake preview でウェブサーバが起動するので http://localhost:4000 でアクセスできるようにしています。 ポイントは カスタムタグが作れる 属性でコンポーネントに情報を渡せる コンポーネントは独立した HTML ファイル linkタグ で読み込む コンポーネントを指定できる Web Components に比べて記述良が少ない といっところでしょうか。 index.html は下記のようになっています。 <!DOCTYPE html> <html> <head> <script src="polymer.min.js"></script> <link rel="import" href="my-element.html"> </head> <body> <my-element hoge="goro"></my-element> <my-element hoge="mogu"></my-element> </body> </html> Polymer を読み込んで my-element という コンポーネントを読み込んで my-element タグ で利用している という流れです。 hoge属性で my-element コンポーネントのボタンのラベルを変更しています。 my-element.html は下記のようになっています。 <element name="my-element" attributes="hoge"> <template> <div> <span>I'm <b>tk-element</b>.
