はじめに
Google I/O報告会 2015 東京会場のブレイクアウトセッションの中でWebコンポーネントの作り方をライブコーディングで紹介して頂きまして、一緒に実際にやって、はじめての自分にとってはすっごくわかりやすくて面白かったので残しておこうとメモ。(公開してもいいことは確認済みです)
当日は、下記の前提がインストールされてなかったので動かすところはできませんでしたが、いまこの記事を書きながら実際に動かしてみています。
前提
- npmをインストールする
- Bowerをインストールする
$HOME/polymer/devfest
ディレクトリがあるとします。
前提の補足
$ nodebrew install latest
でソースからインストールしたが、node -v
などと打つとcommand not found: node
と言われた時の対処法
→バージョンを指定するだけ。
指定するには?
1.インストールされてるバージョンを確認
2.v0.12.5を指定する
3.確認
Webコンポーネントの作り方(ここからライブコーディングでした)
$HOME/polymer/devfest
に移動して、bower init
いろいろ質問されて、bower.jsonが出来上がります。
- 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