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

Posted by kwmt on Tue, Jun 23, 2015

はじめに

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

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

前提

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

前提の補足

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

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

指定するには?

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

2.v0.12.5を指定する

3.確認

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

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

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

  1. polymerをインストール

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

3.index.htmlを作成する。

4.devfest-componentを作成する

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

4.2. devfestComponent.htmlを作成

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

  • Feature overview – Polymer
  • API developer guide – Polymer

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

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

7.確認

以上



comments powered by Disqus