Polymerをつかってみる

PolymerはWebcomponentを実装したライブラリです。Polymerがサポートしている機能としては、

  • カスタムエレメント
  • HTMLインポート
  • テンプレート
  • Shadow Dom

です。

カスタムエレメント

HTMLにはspanなどの要素がありますが、自分で新しい要素を作れるようになります。

HTMLインポート

今まで.cssや.jsは別ファイルに分けれてたのに.htmlは別ファイルに分けられませんでした。
WebComponentでは分割できます。

テンプレート

<template>タグを使うことでテンプレートを記述できます。

Shadow Dom

CSSにスコープの概念を導入します。CSSやJSをカプセル化できます。

Polymerでは<dom-module>タグを使ってカスタムエレメントを表現していきます。<dom-module>はShadow Domの機能を備えているのでCSSやJSをカプセル化することができます。<dom-module>タグ内の<template>タグでカスタムエレメントのDOMを定義します。

またPolymerはデータバインディングという便利な機能もあります。Angular.jsでも同様な機能が使えますね。

Polymerを使ってみる

Polymerを使ったアプリの簡単なサンプルPolymer starter kitがあるのでそれをダウンロード、ビルドして遊んでみましょう。
なお以下では全てMacでの説明になります。Windowsの場合は宗教上の問題により説明できません。
まずgitからレポジトリをクローンしましょう。

<br />
git clone https://github.com/PolymerElements/polymer-starter-kit.git polymer-s<br />

次にNode.jsやBowerの依存パッケージをインストールします。
npmやbowerが使えることを念のため確認。

<br />
node -v    #=&gt; v0.12.7<br />
npm -v     #=&gt; 3.4.0</p>
<p>cd polymer-s<br />
npm install -g gulp bower &amp;&amp; npm install &amp;&amp; bower install<br />

結構時間かかります。

無事インストールできたらビルドしてみましょう。

<br />
gulp serve<br />

これでアプリをプレビューできます。このコマンドで立ち上がるサーバーはソースファイルに変更を加えたときに自動的にページをリロードしてくれるのでとてもはかどります。
…うまくいくはずなのですが、Error: Cannot find module ‘dateformat’というエラーが出てしまいました。

<br />
npm install dateformat #=&gt;これだけでは直らなかった</p>
<p>npm uninstall gulp -g<br />
npm install gulp -g</p>
<p>gulp serve<br />

今度こそうまくいきました。

テキストボックスの文字列を編集するとタイトルの文字もリアルタイムに変わります。これはデータバインディングの機能ですね。

次回（があったら次回）からはStarterKitを使わずにフルスクラッチでキッチンタイマーアプリを作っていきたいと思います。

参考

  • http://qiita.com/masashi127/items/9d81b0396f4834062ead
  • http://stackoverflow.com/questions/33328403/error-cannot-find-module-dateformat-in-gulp
Posted on: 2016年2月6日, by : kumassy
Exit mobile version