たまにサイト見てると、右上に "Fork me on GitHub" って書かれたラベルがついていて
クリックすると GitHub のレポジトリに飛んでソースコードが確認できるものがある。
（キャプチャは自分の Polymer チュートリアルアプリに設置したもの。
コードは https://github.com/zaki-yama/gae-polymer から見られます）
これやってみたいなと思って調べてみた。
Fork me on GitHub Ribbon とか単に GitHub Ribbon とか呼ぶらしい。
せっかくなので Polymer のカスタムエレメントとして作ってみた。
GitHub Ribbon を設置する方法いくつか
今回主に参考にした記事はこちら。
画像で
こちは公式の記事。
気に入った色のコードを自分のサイトに貼付けることで、
画像として左上または右上にリボンを設置できる。
CSS で
http://codepo8.github.io/css-fork-on-github-ribbon/
このサイトで生成したコードを貼付ければ設置できる。
画像と比べていいところは
- マウスオーバー時に色を変更することができる
- クリック領域が純粋にリボン上だけ
- 画像だと、リボンを囲む矩形領域がクリック可能になるので
他の要素と重ねたりするとかえって邪魔になる
- 画像だと、リボンを囲む矩形領域がクリック可能になるので
また、ここに載ってるやつだと下にも置けるっぽい。
http://simonwhitaker.github.io/github-fork-ribbon-css/
（応用）Polymer で
せっかく Polymer を勉強してるので Custom Element として作ってみようかと思ったら
既にいくつかあるっぽい。
- https://github.com/sabarasaba/github-ribbon
- https://github.com/reggi/polymer-github-ribbon
- https://github.com/tcyrus/fork-me-on-github
せっかくなので自分でもやってみた。
とりあえず GitHub のユーザー名とレポジトリ名しか渡せないけど、
もうちょっとがんばると色・サイズ・位置とかも attributes として指定できそう。
