m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

Polymerをちょっと試す

https://www.polymer-project.org/1.0/

WebComponentsを結構楽にすることができる

通常の方法の場合はいろいろと手間がかかる
AngularJSのディレクティブとかと同じようなことができるイメージ

環境構築

指定のディレクトリより以下のコマンドを実行
bower init
bower install --save Polymer/polymer#^1.0.0

※bowerのインストールや初期化はよしなに

ファイル構成
$ tree
.
├── bower.json
└── bower_components
    ├── polymer
    │   ├── LICENSE.txt
    │   ├── bower.json
    │   ├── build.log
    │   ├── polymer-micro.html
    │   ├── polymer-mini.html
    │   └── polymer.html
    └── webcomponentsjs
        ├── CustomElements.js
        ├── CustomElements.min.js
        ├── HTMLImports.js
        ├── HTMLImports.min.js
        ├── MutationObserver.js
        ├── MutationObserver.min.js
        ├── README.md
        ├── ShadowDOM.js
        ├── ShadowDOM.min.js
        ├── bower.json
        ├── build.log
        ├── package.json
        ├── webcomponents-lite.js
        ├── webcomponents-lite.min.js
        ├── webcomponents.js
        └── webcomponents.min.js

3 directories, 23 files
$

Quick tour of Polymerを試した

proto-element.html

sample1.htm

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body>
</html>

proto-element.html

<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>

※Polymerで出来上がり。意外と簡単。

f:id:m_shige1979:20150827232016p:plain

dom-element.html

sample2.htm

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="dom-element.html">
</head>
<body>
<dom-element></dom-element>
</body>
</html>

dom-element.html

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

<dom-module id="dom-element">

    <template>
        <p>I'm a DOM element. This is my local DOM!</p>
    </template>

    <script>
        Polymer({
            is: "dom-element"
        });
    </script>

</dom-module>

※dom-moduleで挟んでスコープ制限みたいなことができそう

f:id:m_shige1979:20150827232033p:plain

picture-frame.html

sample3.htm

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="picture-frame.html">
</head>
<body>
<picture-frame>
    <img src="p-logo.png">
</picture-frame>
</body>
</html>

picture-frame.html

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

<dom-module id="picture-frame">

    <template>
        <!-- scoped CSS for this element -->
        <style>
            div {
                display: inline-block;
                background-color: #ccc;
                border-radius: 8px;
                padding: 4px;
            }
        </style>
        <div>
            <!-- any children are rendered here -->
            <content></content>
        </div>
    </template>

    <script>
        Polymer({
            is: "picture-frame",
        });
    </script>

</dom-module>

cssもスコープで制限できるので全体のスタイルとは個別に考えられる?

f:id:m_shige1979:20150827232056p:plain

name-tag.html

sample4.htm

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="name-tag.html">
</head>
<body>
<name-tag></name-tag>
</body>
</html>

name-tag.html

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

<dom-module id="name-tag">

  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s name-tag element.
  </template>

  <script>
  Polymer({
    is: "name-tag",
    ready: function() {
      // set this element's owner property
      this.owner = "Daniel";
    }
  });
  </script>
  
</dom-module>

※指定の値を設定。データ自体は外部変数や他の方法で取得する。

f:id:m_shige1979:20150827232118p:plain

configurable-name-tag.html

sample5.htm

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="configurable-name-tag.html">
</head>
<body>
<!-- configure a property from markup by setting
     the corresponding attribute                 -->
<configurable-name-tag owner="Scott"></configurable-name-tag>
</body>
</html>

configurable-name-tag.html

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

<dom-module id="configurable-name-tag">

    <template>
        <!-- bind to the "owner" property -->
        This is <b>{{owner}}</b>'s configurable-name-tag element.
    </template>

    <script>
        Polymer({
            is: "configurable-name-tag",
            properties: {
                // declare the owner property
                owner: {
                    type: String,
                    value: "Daniel"
                }
            }
        });
    </script>

</dom-module>

※指定値が存在しない場合は初期値を定義

f:id:m_shige1979:20150827232130p:plain

双方向データバインディング

なんか別のやつがいるらしい
https://github.com/PolymerElements/iron-input

追加

bower install --save PolymerElements/iron-input#^1.0.0

sample6.htm

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="editable-name-tag.html">
</head>
<body>
<editable-name-tag></editable-name-tag>
</body>
</html>

editable-name-tag.html

<link rel="import"
      href="bower_components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<link rel="import"
      href="bower_components/iron-input/iron-input.html">

<dom-module id="editable-name-tag">

    <template>
        <p>
            This is a <strong>{{owner}}</strong>'s editable-name-tag.
        </p>
        <!-- iron-input exposes a two-way bindable input value -->
        <input is="iron-input" bind-value="{{owner}}"
               placeholder="Your name here...">
    </template>

    <script>
        Polymer({
            is: "editable-name-tag",
            properties: {
                owner: {
                    type: String,
                    value: "Daniel"
                }
            }
        });
    </script>

</dom-module>

※他のパーツ?が必要でした

f:id:m_shige1979:20150827233429p:plain

所感

web componentsを使うとしたらこちらのほうがいいかも的な感じはしました。
ajaxなどの機能や他のライブラリとの相性がどこまであるかはわからないのでGoサイン出せるかまでは
断定できませんが複雑なことを行いたくなったらJQueryに依存している分、慣れるのは難しいかもしれない。

なんか見つけた

developers.google.com
ある程度のデザインが固まったものがある

githubにも機能に応じた部品などがあるみたいなのでいろいろやってみるものアリかも知れない