Kensuke Kousaka's Blog

Notes for Developing Software, Service.

自分のWebサイトにGitHubの草(GitHub Contributions Calendar)を表示する方法

自分のホームページにちょっとしたスペースが空いていて,GitHubの草のやつを入れたら面白いかなーと思い調べていたところ,ちょうどいいライブラリを見つけたが導入に手間取ったのでメモ.

IonicaBizau/github-calendar

使用方法は上記GitHubリポジトリにあるREADMEを読めば大体わかるかと思うが,僕自身少し詰まってしまった部分があるので,以下に記そうと思う.

github-calendar.js関連ファイルのダウンロード

作者のデモページにあるように,ファイルをダウンロードせずにcdn.rawgit.comを利用してもいいのだが,僕はREADMEに書いてある通りにdist/内にあるgithub-calendar.cssgithub-calendar.min.jsをダウンロードして利用する方法を選んだ.

これらファイルをダウンロードし,組み込みたいWebサイトを動かしているWebサーバ上の適当なディレクトリに配置する.

Webページへの組み込み

組み込みたいWebページのHTMLファイルに,以下のようなコードを追加する.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.min.js"></script>
<script src="PATH/TO/github-calendar.min.js/github-calendar.min.js"></script>
<link rel="stylesheet" href="PATH/TO/github-calendar.css/github-calendar.css" />

<div class="calendar">Loading the data...</div>

<script>GitHubCalendar(".calendar", "GITHUB USERNAME YOU WANT TO SHOW");</script>

github-calendar.min.jsgithub-calendar.cssを読み込んでいるが,その際のパスはこれを書いたHTMLファイルから見た相対パスを書く.最後のscriptタグで書いたGitHubCalendarだが,これがgithub-calendar.jsの実行コードである.引数の一つ目には読み込んだGitHub Contributions Calendarの配置先を指定する.二つ目には読み込むGitHubユーザのユーザ名を指定する.例えば僕の場合はk3nsuk3GitHubのユーザ名なので,次のようになる.

<script>GitHubCalendar(".calendar", "k3nsuk3");</script>

また,三つ目の引数でカレンダー下部に表示されるテキストを変更したりといったオプション設定ができるようだ.

READMEには書かれていなかったと思うが,このライブラリを動作させるためにはfetchが必要になるようなので,github-calendar.min.jsを読み込む前にfetch.min.jsを読み込むようにしている.

以上で組み込みが完了となる.組み込んだWebページにアクセスすれば,GitHubの例の草が生えているはずだ.


Appendix

Webサイトのレイアウト構築にBootstrapを用いている場合にgithub-calendar.jsの表示が崩れる場合,以下のCSSスタイルをgithub-calendar.jsに適用すればこれを回避できるかもしれない.

line-height: normal !important;