BEFOOL

ボードゲームで遊んでばかりいる開発会社

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を使う

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

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>タグのテンプレートを定義します。とは、<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の良さがわかってくるでしょう。

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

関連記事