読者です 読者をやめる 読者になる 読者になる

lxyuma BLOG

開発関係のメモ

polymerの話(GoogleのWeb component使ったjavascriptのlibrary)

polymer.js

Google IO 2013で発表されたweb componentを使ったjavascriptのライブラリ

概要

  • Web componentに対応/非対応に関わらず利用できるようにしたjsのライブラリ。

  • +α 簡易フレームワーク的な幾つかの機能を追加 ※後述

構成

  • 構成

    • Foundation(platform.js)

      • browserのネイティブか、対応してなければpolyfillしてweb componentを実行
    • Core(polymer.js)

      • 土台を補完するhelper。

      • 例えばcomponentとattributeのbindingやEvent mapping等が出来るようになる。

    • Elements

      • coreの上のUI/非UI要素

公式ページの真ん中「What is Polymer?」下の図を見ると分かり易い。

参考

install

$ git clone git://github.com/Polymer/polymer.git --recursive

$ git clone git://github.com/Polymer/toolkit-ui.git --recursive
  • 注意

    • ※polymerと周辺submoduleを入れるので、結構時間かかる。

    • ※2番目のtoolkit-uiはsample

server

動作にlocal web serverが必要なので、

node.jsインストールしてる前提で、

今回は、simple http server使う

$ npm -g install simple-http-server

sample

サンプルソースのmenuを見てみる

server起動

polymerとtool-kitの入っているディレクトリと同じ階層でサーバー起動

$ nserver

source

ソースを見るととても綺麗。

  <script src="../../polymer/polymer.js"></script>
  <link rel="import" href="../elements/g-menu.html">
  <link rel="import" href="../elements/g-menu-item.html">

・・・略・・・

  <g-menu selected="0">
    <g-menu-item src="images/comment.png">Post a Comment</g-menu-item>
    <g-menu-item src="images/hangout.png">Share Link</g-menu-item>
    <g-menu-item src="images/mail.png">Email Link</g-menu-item>
    <g-menu-item src="images/favorite.png">Add to Favorites</g-menu-item>
  </g-menu>

ぱっと見て何がやりたいのかすぐに分かる内容

shadow DOM

google chrome (canary) devtoolsの設定の「show shadow DOM」を有効にすると

f:id:lxyuma:20130608164305p:plain

icon等の描写htmlが入ってる。

※普通のchromeだと、少し表示が違ってたのでcanaryがいいかも。

コンポーネントを作ってみる

①:カスタム要素を作ってみる

公式ページの基本的なscriptやってみる

まずは、カスタム要素だけを作る

html

カスタム要素使うだけならplatform.jsだけ読めば良いらしい。

  • my_poly/index.html
<!DOCTYPE HTML>
<html >
  <head>
    <script src="/polymer/platform/platform.js"></script>
    <link rel="import" href="/my_poly/my-element.html" />
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>
  • my_poly/my-element.html
<element name="my-element">
<section>i am my element</section>
<script >
  if (this !== window) {
    var section = this.querySelector('section');
    this.register({
      prototype: {
        readyCallback: function(){
          this.innerHTML = section.innerHTML;
        }
      }
    });
  }
</script>
</element>
  • ちなみに、chrome devtool見ると、XHRでmy-element呼んだとか出てる。だから、server必要。
    • (HTML importsがサーバー必要。NOTEにも書いてあった)

②:Polymer要素を作ってみる

sampleを参考にtemplateもやってみる。

カスタム要素をPolymer要素として作る。

このためには、polymer.jsを呼び出す

html

  • my_poly/index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="polymer/polymer.js"></script>
    <link rel="import" href="my-element.html">
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

さっきは、platform.jsだったが、polymer.jsに変わってる。

※devtoolsを見ると、platform.jsも呼んでる。polymer.jsから呼ばれてるっぽい。

  • my_poly/my-element
<element name="my-element">
  <template>
    <span>This is Shadow DOM.</span>
  </template>
  <script>
    Polymer.register(this);
  </script>
</element>

③:componentとnative要素をbindingしてみる

これもsample

  • index.html
<!DOCTYPE HTML>
<html >
<head>
<script src="/polymer/polymer.js"></script>
<link rel="import" href="/my_poly/my-element.html" />
</head>
<body>
  <my-element></my-element>
</body>
</html>
  • my-element.html
<element name="my-element">
  <template>
    <p>Name : {{name}}</p>
    <p>Age  : {{age}}</p>
    <input id="ageInput" type="range" value="{{age}}" />
    <input id="nameInput" type="text" value="{{name}}" />
  </template>
  <script >
    Polymer.register(this, {
      age : "29",
      name : "taro",
      nameChanged: function (){
        if(this.name) {
          this.name = this.name[0].toUpperCase() + this.name.slice(1);
        }
      }
    });
  </script>
</element>

おお。formと表示値が連動してる。

公式ページにそれ以外色々紹介されている。

使ってみて

あくまで私見。個人的な感想です。

  • platform.js/polymer.js

    • platform.jsとpolymer.jsの違いが初め分かり辛かった。
    • polymer.jsの記述が独自。これで共通化しようという取り組みなのだろうけど。
  • これから

    • web component自体の考え方は素晴らしい。(流行ってほしい。今のhtmlどれも汚いので)
    • platform.jsでpolyfill用途で使うなら、他のframeworkとの組み合わせもいけそう。
    • polymer.jsは、MV*ではないものの、結局また新しいframeworkに近い物になっていて、既存のフレームワーク等と一緒には使えない。また新たに独自なものを覚えないといけない。
    • angular.jsとくっつく可能性あるようなので、angular.js系のエンジニアがpolymer.jsもセットで使うようになるのかなぁ。