アドベントカレンダーの数合わせ @hchaki です。
最終日を仰せつかったのでがんばりたいと思います。うっひょー超メリー！
はい。
というわけで今日は Polymer について書きます。
PolymerはWebComponents1のライブラリのひとつで、テンプレート機能やデータバインディング、イベントリスナーなんかも一通り揃ってるかなり使えるライブラリです。
んで、このPolymerを使って、クリックすると中身を取り出せる箱「adv-box」という自作のコンポーネントを作りながら、それを実例に解説します。
以下がデモです。
テンプレートを使う
さて、さっそくPolymer使っていきましょう。「中身の入れられる箱」カスタムPolymerコンポーネントのadv-boxを作ります。利用側の記述は、
<adv-box>中身</adv-box>
これだけです。
定義側の記述はこんな感じ。
<dom-module id="adv-box">
<template>
<div class="futa"></div>
<div class="box">
<content></content>
</div>
</template>
Polymer({
is: "adv-box"
});
</dom-module>
templateタグ内に注目してください。
実行時に<template>の記述が<adv-box>に置き換えられ、さらに「中身」が<content>に置き換えられます。
ここでは割愛しますが、他には、mustacheっぽい{{}}や[[]]みたいな書き方で属性値を埋め込んだり、<dom-repeat>や<dom-if>をつかった条件文やループ文でのテンプレート指定もできます。
スタイルをあてる
定義側
<template>
<style>
:host{
position: relative;
}
:host ::content{}
:host .futa{}
</style>
略
</template>
スタイルは
- <style>内に直書きする
- 別ファイルの読み込み記述する
このどちらの方法でも大丈夫です。どちらの場合でも ここでのcss宣言は外に漏れないので記述の衝突を気にする必要はあまりありません。
特別な宣言記述があって、:hostがadv-box自身を指し、::contentが置き換えられた「中身」の要素を指す記述になります。それ以外はいつもみたいにスタイリングして大丈夫です。ひゅう便利！
プロパティを使う
定義側
<dom-module id="adv-box">
Polymer({
is: "adv-box",
properties: {
isOpen: {
type: Boolean,
reflectToAttribute: true
},
},
ready: function(){
console.log( this.isOpen );
}
});
</dom-module>
利用側
<adv-box is-open="1">中身</adv-box>
定義側properties節に注目してください。
propertiesで宣言したものが利用側のhtmlタグの属性値(attribute)と対応します。
例だとpropertiesで指定した値のキャメルケースisOpenとhtmlタグの属性値とスネークケースis-openが対応していて、メソッドの中で this.isOpen の形で利用できます。
さらにreflectToAttribute:trueを指定すると、逆にpropertiesの値の変更でhtmlの属性値も変更されるので、これを利用してステータス別のcssを記述をすることもできます。
イベントリスナーを使う
定義側
<dom-module id="adv-box">
Polymer({
listeners: {
"tap": "_onTap"
},
_onTap: function() {
this.isOpen = true;
}
});
</dom-module>
イベントリスナーはlistenersに記述します。マウスイベントとタッチイベントのラップされたものが用意されていて便利です。
今回は割愛しますが、propertiesの値の変化を見張ることもできるし、要素内にidが指定されていればその要素に対してid.tapのようにしてリスナーを登録することもできます。
まとめ
というわけで、まとめに入ります。Polymerは...
ここがすごい！
- cssスタイルシートの影響が外に漏れない
- html属性値 - プロパティ値の自動連携が便利
- イベントリスナーの指定方法がラクチン。
これはちょっと...
- 内部の要素にアクセスするにはPolymer指定の関数を使用しないといけない（shadowDOMだかの関係）
- idをつけてpolymer要素を呼び出すと、そのid名でグローバルにメンバー登録される（過激派！）
最後に
ご清聴ありがとうございました。
adv-boxを並べて、アニメーションだの包装紙だのも加えて、本来の意味でのアドベントカレンダー2にしました。これくらいのことはできるんだぜ！
自分の担当した日付のプレゼントを開けよう！