Polymerで自分のタグを作る

Polymerとは？

HTMLの標準タグ例えば<img>、 <a>、<div>など、それぞれ自分の要素を持っています。<a>タグにhref要素をつけてあげるとリンクとして表示されます。<img>タグのsrc要素に画像のパスを渡せば、その画像がウェブ上に表示されます …

しかし、標準のタグはみんな簡単な機能しか実現できません。

「じゃあ、多数のタグ、CSS、JSの組み合わせを、一つのタグでまとめるのはどうでしょう？」

これがPolymerの提案です。Polymerはフロント要素をコンポーネント化するツールです。

Polymerを使うメリット

web開発者特にフロントエンジニア・デザイナーならよくわかると思うが、webサイトやアプリのフロントエンドはHTML+CSS+JavaScriptで作られています。基本的に：

HTMLコードを書く
CSSで各要素のレイアウトを決める
JavaScriptで各要素（UI)の関連をつける

という流れです。案件によって、デザインはそれぞれ違いますが、共通要素は割と多いです。例えばトップページのスライド、モバイル向けのテーブルビューなど、毎回ほぼ同じのHTMLとJSを書くのがしんどいし、時間が勿体無いです。

それで、よく使う要素をPolymerでコンポーネント化すれば、たった一個のタグを書いて、CSSで少し調整するだけで済むのです。

Polymerをダウンロード

Polymerのライブラリーを取得するには：

1.直接ダウンロード

Polymerはhttps://www.polymer-project.org/1.0/docs/start/getting-the-code.htmlからダウンロードできます。（下までスクロールして、ZIP DOWNLOADというボタンがあります）

2.bowerを使う

こちらは公式おすすめの方法です：

bower init

質問たくさん聞いてくるので、全部Enterでスッキプしても大丈夫です。

bower install --save Polymer/polymer#^1.0.0

タグを作ってみよう

まず簡単な例でPolymerの認識を深めよう：<my-avatar>タグを作ります。

この例で作る<my-avatar>は、srcとcaption要素を持っていて、画像と名前を表示してくれるタグです。

1. まず`index.html`にPolymerのライブラリを読み込む：

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

2. `<my-avatar>`タグを定義する

my-avatar.htmlを作って、下記のコードを書きます：

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

<dom-module id="my-avatar">
    <!-- ここからはmy-avatarタグの定義 --> 
    <script>
    Polymer({
	is: 'my-avatar', // my-avatarタグ定義
    });
    </script>
</dom-module>

<dom-module></dom-module>はPolymer専用のタグで、id要素をmy-avatarにすると、my-avatarのスコープがあ作成されます。

3. `<my-avatar>`のテンプレートを定義する

引き続きmy-avatar.htmlを編集します：

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

<dom-module id="my-avatar">
    <!-- ここからはmy-avatarタグの定義 --> 

       <!-- テンプレート -->
       <template>
           <figure>
               <img src="{{ src }}" alt="{{ caption }}">
               <figcaption>{{ caption }}</figcaption>
           </figure>
       </template>

    <script>
    Polymer({
	is: 'my-avatar', // my-avatarタグ定義
       // my-avatarタグの要素を定義します
       properties : {
           src : String,
           caption : String,
       },
    });
    </script>
</dom-module>

<template>タグで<my-avatar>タグのテンプレートを定義します。{{ src }}と{{ caption }}は、<my-avatar>のsrc要素とcaption要素の値を表示する場所です。要素はPolymer()にpropertiesというパラメタを渡して定義します。

4. スタイルをつける

スタイルは<dom-module></dom-module>間に<style>タグで定義できます。普通のCSSなので、いつものように書けば大丈夫です（スコープとかはPolymerがうまくやってくれるので、考えなくていいです）

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

<dom-module id="my-avatar">
    <!-- ここからはmy-avatarタグの定義 --> 
       <!-- スタイル -->
       <style>
           figure {
               width: 120px;
               height: 120px;
               text-align: center;
           }
           figure>img {
               display: block;
               max-width: 100%;
               height: auto;
               border: 1px solid #DFDFDF;
               border-radius: 120px;
               -webkit-border-radius: 120px;
               -moz-border-radius: 120px;
           }
       </style>

       <!-- テンプレート -->
       <template>
           <figure>
               <img src="{{ src }}" alt="{{ caption }}">
               <figcaption>{{ caption }}</figcaption>
           </figure>
       </template>

    <script>
    Polymer({
	is: 'my-avatar', // my-avatarタグ定義
       // my-avatarタグの要素を定義します
       properties : {
           src : String,
           caption : String,
       },
    });
    </script>
</dom-module>

5. `<my-avatar>`タグを使う

index.htmlを先ほど作ったmy-avatar.htmlをインポートする：

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <!-- my-avatar.htmlをインポート -->
    <link rel="import" href="my-avatar.html">

そして、index.htmlのbodyの間に<my-avatar>タグを書きます：

<my-avatar src="https://avatars1.githubusercontent.com/u/2465402?v=3&s=460" caption="Chain Zhang"></my-avatar>

<my-avatar>タグは標準のHTMLタグではないので、普段だとブラウザに認識されず何も表示されないですが、Polymerを使って<my-avatar>を定義したら期待通り表示されます：

まとめ

<my-avatar>タグはあまり意味ないかもしれないが、もしサイトによく使うコンポーネント、例えばスライド、ギャラリー、ポップアップメニューなど、それぞれ一つのタグで完結できると、効率どれぐらい上がるか考えると、Polymerの良さがわかってくるでしょう。