概要
rhombus-listというひし形を隙間なく並べる web component を Polymer を使い作りました。
bower に登録したので bower i rhombus-list でお使いください。
web components の Github Page の作成や bower への登録の際の忘備録です。
PolymerでWeb Componentsを自作してbowerで公開すると
Building and Publishing your Web Component in 9 Steps
を参考にさせていただきました。
はじめに（動機）
『Web Designing』 2014年9月号でdiamond-listというcssサンプルが公開されていました。
かっこいいなあと思いつつ
- ひし形の大きさを簡単に変えたい
- 一列の数を簡単に変えたい
- ひし形の枠の幅を簡単に変えたい
- ひし形が接している枠のとこが太くなっているのが変
という気持ちがあり、特に使っていなかったのですが
この度、自作した web component を bower で公開するまでやってみようと思ったときに上記４点の解決と共に題材にさせていただきました。
components へのパス
my-component内で使用する別のコンポーネントをbower.jsonのdependenciesに記載すると思いますが
この際のパスをどうすのか気になっていました。
...
<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のインストール先を指定するにあるようにインストール先を設定できるのを知らなかったので、、、
強引に２つ上の階層にbower.jsonをコピペしやりました汗
Github Page の作成
my-component.html以外につくるべきもの
-
index.html=> ドキュメントページ（Github Page で公開した時に） -
demo.html=> デモページ（名前はdemo.htmlであるとよい）
デモページは名前以外は自由につくればいいと思われたのでとりあえずドキュメントページについて。
ドキュメントページの作成
core-component-page
Polymerのコンポーネントのindex.htmlをみると
core-component-pageというのを使って超簡潔に終わっています。
<!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 フラグ
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のページたちとスクショです。
よかったら使ってください汗