· polymer

はじめてのPolymer1.0(Webコンポーネントの作り方)

  • このエントリーをはてなブックマークに追加

はじめに

Google I/O報告会 2015 東京会場のブレイクアウトセッションの中でWebコンポーネントの作り方をライブコーディングで紹介して頂きまして、一緒に実際にやって、はじめての自分にとってはすっごくわかりやすくて面白かったので残しておこうとメモ。(公開してもいいことは確認済みです)

当日は、下記の前提がインストールされてなかったので動かすところはできませんでしたが、いまこの記事を書きながら実際に動かしてみています。

前提

  1. npmをインストールする
  2. Bowerをインストールする
  3. $HOME/polymer/devfestディレクトリがあるとします。

前提の補足

$ nodebrew install latestでソースからインストールしたが、node -vなどと打つとcommand not found: nodeと言われた時の対処法

→バージョンを指定するだけ。

指定するには?

1.インストールされてるバージョンを確認

$ nodebrew ls
v0.12.5

2.v0.12.5を指定する

$ nodebrew use v0.12.5

3.確認

% node -v
v0.12.5

Webコンポーネントの作り方(ここからライブコーディングでした)

  1. $HOME/polymer/devfest に移動して、bower init
$ bower init

いろいろ質問されて、bower.jsonが出来上がります。

  1. polymerをインストール
$ bower install polymer
bower polymer#*             not-cached git://github.com/Polymer/polymer.git#*
bower polymer#*                resolve git://github.com/Polymer/polymer.git#*
...

webcomponentsjs#0.7.5 bower_components/webcomponentsjs

bower_componentsディレクトリが作成されている。

$ ls
bower.json        bower_components/

3.index.htmlを作成する。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"><script>
    <!-- load component -->
</head>
<body>
  <!-- これから作る部品 -->
  <devfest-component></devfest-component>
</body>
</html>

4.devfest-componentを作成する

4.1. コンポーネントを入れるディレクトリを作成

$ mkdir components

4.2. devfestComponent.htmlを作成

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

  <dom-module id="devfest-component">
    // テンプレート
    <template>
      <h1>{{title}}</h1>
      <p>Hey!</p>
    </template>
    // スタイル
    <style>
      h1 {
        color:red;
      }
    </style>
    // 部品に対して動くスクリプト
    <script>
      Polymer ({
        // どのコンポーネントかのひもづけ
        is :"devfest-component",
        properties : {
            title : {
                type:String,
                value: "Yes, Polymer!"
            }
        }
      });
    </script>
  </dom-module>

メモだけでは動かなかったので、ここらへんも参考にした

5.index.htmlに4で作ったコンポーネントをインポートする。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <!-- load component -->
    <link rel="import" href="components/devfestComponent.html">
</head>
<body>
  <!-- これから作る部品 -->
  <devfest-component></devfest-component>
</body>
</html>

6.動かすにはWebサーバーが必要だが、polyserveというのが用意されているので、インストールする。

$ npm install polyserve -g
$ polyserve
Starting Polyserve on port 8080
Files in this directory are available at localhost:8080/components/devfest/...

7.確認

polymer_finish

以上

  • このエントリーをはてなブックマークに追加
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket