web component を bower に登録したメモ


## 概要

[rhombus-list](http://sosuke-k.github.io/rhombus-list/)というひし形を隙間なく並べる web component を Polymer を使い作りました。
bower に登録したので `bower i rhombus-list` でお使いください。

web components の Github Page の作成や bower への登録の際の忘備録です。

[PolymerでWeb Componentsを自作してbowerで公開する](http://qiita.com/tejitak/items/bbb466a3afcddf9934fd)と
[Building and Publishing your Web Component in 9 Steps](http://thejackalofjavascript.com/building-and-publishing-your-web-component/)
を参考にさせていただきました。


## はじめに（動機）

[『Web Designing』 2014年9月号](https://book.mynavi.jp/wd/2014/09.html)で`diamond-list`というcssサンプルが公開されていました。

![diamond-list.png](https://qiita-image-store.s3.amazonaws.com/0/32636/9b88225b-fbc6-4a0b-3097-ea05fe3d391e.png "diamond-list.png")

かっこいいなあと思いつつ

* ひし形の大きさを簡単に変えたい
* 一列の数を簡単に変えたい
* ひし形の枠の幅を簡単に変えたい
* ひし形が接している枠のとこが太くなっているのが変

という気持ちがあり、特に使っていなかったのですが
この度、自作した web component を bower で公開するまでやってみようと思ったときに上記４点の解決と共に題材にさせていただきました。

## components へのパス

`my-component`内で使用する別のコンポーネントを`bower.json`の`dependencies`に記載すると思いますが
この際のパスをどうすのか気になっていました。

```html:my-component.html
...
<link rel="import" href="?path/to/components?/polymer/polymer.html">

<!-- (1) --><link rel="import" href="../polymer/polymer.html">
<!--  or -->
<!-- (2) --><link rel="import" href="bower_components/polymer/polymer.html">
...
```

実際に公開するときは`(1)`ですが
`my-component.html`と同じ階層に`bower.json`があり、そこで`bower i --save <tag>`していると`(2)`でないと。。。

[bowerのdependenciesのインストール先を指定する](http://qiita.com/sys1yagi/items/0a7b13395cf5c16ecd57)にあるようにインストール先を設定できるのを知らなかったので、、、
強引に２つ上の階層に`bower.json`をコピペしやりました汗

## Github Page の作成

`my-component.html`以外につくるべきもの

* `index.html` => ドキュメントページ（Github Page で公開した時に）
* `demo.html` => デモページ（名前は`demo.html`であるとよい）

デモページは名前以外は自由につくればいいと思われたのでとりあえずドキュメントページについて。

### ドキュメントページの作成

#### core-component-page

Polymerのコンポーネントの`index.html`をみると
[core-component-page](https://github.com/Polymer/core-component-page)というのを使って超簡潔に終わっています。

```html:index.html
<!doctype html>
<html>
<head>

  <script src="../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../core-component-page/core-component-page.html">

</head>
<body unresolved>

  <core-component-page></core-component-page>

</body>
</html>
```

`core-component-page`が`bower.json`や`my-component.html`から情報をとってきて勝手にページを生成してくれるみたいです。

勝手にといっても
自分で`my-component.html`のコメントアウトの中などに`@`とか使って記載しなければなりません。

#### 記載のしかた

下記のようにしっかりコメントアウト内に説明をかくと
そこからパースしてくれてドキュメントページを生成してくれるようです。

```
<!--
  
  ここに説明を記載
  マークダウンでかけました

  @group ？？？
  @element タグ名
  @homepage ホームページのURL
-->

<polymer-element name="タグ名" attributes="要素達">
  <template>
    ...
  </template>
  <script>
    Polymer("タグ名", {

      /**
       * 要素の説明
       *
       * @attribute 要素名
       * @type 要素の型
       * @default デフォルト値
       */
      要素: デフォルト値,

    });
  </script>
</polymer-element>
```

## bower への登録

### provate フラグ
[`bower.json`の項目についてかかれたページ](http://bower.io/docs/creating-packages/)をみると

> `private boolean`: Set to true if you want to keep the package private and do not want to register the package in the future.

という記載があるので公開するには当然`private: false`にすべきだと思うのですが

Polymer のコンポーネントを参考にしていたので最初`true`にしていて
`bower search <tag>`してもでてこなくて困りました。

## おわりに（おまけ）

今回作成した`rhombus-list`のページたちとスクショです。

[ドキュメントページ](http://sosuke-k.github.io/rhombus-list/)
[デモページ](http://sosuke-k.github.io/rhombus-list/demo.html)
[github](https://github.com/sosuke-k/rhombus-list)

![rhombus-list.png](https://qiita-image-store.s3.amazonaws.com/0/32636/df1fa6a6-7a2d-f0ec-3a21-26ed79076811.png "rhombus-list.png")


よかったら使ってください汗