2015年5月29日金曜日

Polymer1.0が大幅に軽量化されてリリース!早速HelloWorld!

Polymer 1.0 が遂にリリースされたみたいです。以前のv0.5では、動作がちょっと重たくて使い物にならなそうな雰囲気だったのですが、今回リリースのv1.0では、サイズがなんと1/10にも縮小され、動作も以前より軽くなっていました。
なかなか使えそうな嬉しい予感がするので、今回は軽く触ってHelloWorldしてみたいと思います。


まずはパッケージ管理(プロジェクト作成等)で楽するために Bower をインストール
$ sudo npm install -g bower
すでにインストール済みの場合は最新にアップデートしておく
$ sudo npm update -g bower

・・・とやってみたら、何やら謎のnpmエラー(npm ERR! registry error parsing json)が出まくりで、Bowerのインストールを敢え無く断念。。。
仕方がないのでzip版のプロジェクト雛形を素直にダウンロードしました。なんかモヤっとしますが今は諦めて先に進めたいと思います。

プロジェクト作成


$ mkdir polymer-example && cd polymer-example

polymer-exampleフォルダを新規作成し、その直下にさきほどのzip内の bower_components フォルダを展開します。

$ tree
.
└── 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

my-elementを作成


プロジェクト直下に my-element という名前のDOMモジュールを作成してみます。

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

<dom-module id="my-element">
  <template>
    <p>I'm a my-element. This is my local DOM!</p>
  </template>
</dom-module>

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

my-elementを使う


index.html から my-element を利用してみます。

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

実行


最後にWebサーバを起動して結果を見てみます。

$ python -m SimpleHTTPServer 
Serving HTTP on 0.0.0.0 port 8000 ...

ブラウザから http://localhost:8000 を叩くと以下の画面が表示されます。



以上となります。

これだけでは寂しすぎるので、次回はレイアウトとかアイコンを使ってアプリモドキを作ってみたいと思います。

0 件のコメント:

コメントを投稿