なかなか使えそうな嬉しい予感がするので、今回は軽く触って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.jsmy-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 件のコメント:
コメントを投稿