Polymer1.0 の入門を始める

Polymer ってなんぞ？

What is Polymer? - Polymer

Custom elements extend the web

一言でビルトイン以外のカスタムタグを追加すると。
カスタムなイベントや、デフォルトのスタイルも含めてコンポーネントとして定義できるらしい。

面白いのは「フレームワーク」とは名乗ってない所か。HTML5とか勉強会で聞いた通りだ。

ソースを読む

Polymer の導入そのものは、bower さえ入ってれば速攻できるらしい。 Get the code - Polymer
簡単なことはいいことだ。

その上でコンポーネント製作テンプレートを眺めてみた。

Create a reusable element - Polymer

結構いろいろ入ってるが、コンポーネントを作って GitHub で共有するところまであるらしい。
テンプレートを見る限り、基本的にテストも含む全件が入っていそうな感じだ。

Play で導入するなら、画面切り離しでサブプロジェクトでコンポーネントを作ってアクセスするのが良さそうに見える。

後でやってみよう。

ドキュメントを読んでみる

Quick tour of Polymer - Polymer

そして先ほども思ったが、非常にシンプルに作れるっぽい。
コンポーネント製作部分。下記の例だと、proto-element というタグを定義（ファイル名もproto-element"）

<link rel="import"
      href="bower_components/polymer/polymer.html">

<script>
  // register a new element called proto-element
  Polymer({
    is: "proto-element",
    // add a callback to the element's prototype
    ready: function() {
      this.textContent = "I'm a proto-element. Check out my prototype!"
    }
  });
</script>

このコンポーネントはどうも JavaScript 上の運用もできる模様。Registration and lifecycle - Polymer

既存のタグを継承して作ることもできる。

MyInput = Polymer({

  is: 'my-input',

  extends: 'input',

  created: function() {
    this.style.border = '1px solid red';
  }

});

var el1 = new MyInput();
console.log(el1 instanceof HTMLInputElement); // true

var el2 = document.createElement('input', 'my-input');
console.log(el2 instanceof HTMLInputElement); // true

作ったコンポーネントは、is 属性を使って既存タグに適用することもできる

<input is="my-input">

ライフサイクルについても読んでみた

順序別配置。

• created: 初期化後に呼ばれるイベントハンドラ
• （ローカルDOM作成）
• ready: DOM が作成されたタイミングでコールされるイベントハンドラ
• factoryImpl: コンストラクタ
  ただし、HTML上にタグとして定義した場合は動作しない。
• attached: 見たまま。利用可能になった際のイベント。

また、この後に、以下の事が書かれてる。

• create は必ず ready 前に実行される
• ready は必ず attached の前に実行される
• ready は子要素から順に呼ばれる

残りのイベントハンドラは

• detached: 見たまま。画面から外された時だと思われ
• attributeChanged: 見たまま、属性変更時。

var MyElement = Polymer.Class({

  is: 'my-element',

  // See below for lifecycle callbacks
  created: function() {
    this.textContent = 'My element!';
  }

});

document.registerElement('my-element', MyElement);

// Equivalent:
var el1 = new MyElement();
var el2 = document.createElement('my-element');

後は、registerElement でタグを定義して、 createElement で貼り付けができるらしい。

とりあえず、初回導入とコンポーネント追加以外では bower 要らなそうなので、Play にもそのまま組み込めると思われ。