Polymerで自分のタグを作る

ChainZ(クリエイター)
いろいろやってます。

Polymerとは?

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

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

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

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

Polymerを使うメリット

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

  1. HTMLコードを書く
  2. CSSで各要素のレイアウトを決める
  3. 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を使う

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

1
bower init

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

1
bower install --save Polymer/polymer#^1.0.0

タグを作ってみよう

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
<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を編集します:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link rel="import" href="bower_components/polymer/polymer.html">

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

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

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

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

4. スタイルをつける

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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="" alt="">
               <figcaption></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をインポートする:

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

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

1
<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の良さがわかってくるでしょう。

Polymerについてもっと深く掘ります: