BlankSlate

いや、そういう声もあるというだけです

GitHubのContributions Calendarを取得する

「オクラホマりえしょん」コーナー宛 RN:ウエンコタンで漂着していたマネキンを入手on84 ステッカー希望です

「村川梨衣1の a りえしょんぷり~ず❤」、毎週楽しく聞いています!
先日すこし困ったことがあったのでお悩み解決お願いします。

GitHubのプロフィールページにあるContributionsを動的に取得するようなページを作って、リスナーの動向を監視したいのですが、どうしたらいいと思いますか?

草やばない?

実はこのContributionsはSVGというベクターデータで表現されています。難しそうに聞こえますが、中身はXMLです。
このSVGはhttps://github.com/users/ユーザ名/contributionsを叩くと取得できます。

$ curl -sL 'https://github.com/users/844196/contributions'
<svg width="721" height="110" class="js-calendar-graph-svg">
  <g transform="translate(20, 20)">
      <g transform="translate(0, 0)">
          <rect class="day" width="11" height="11" y="13" fill="#eeeeee" data-count="0" data-date="2015-03-09"/>
          ...

これはそのままHTMLに貼り付けることができます。

取得したそのままのSVG

このままでもいいですが、文字の色・大きさを本家からCSSを流用するといい感じになります。

.js-calendar-graph-svg text {
  font-size: 10px;
  fill: #aaa;
}

調整済みSVG

うまくいったかよ〜 SVGのレスポンシブ対応についてはここを参照してみてください。

番組ではリスナーの皆様からのお便りを募集しています! 宛先はお葉書の場合、〒105いちれーごー-8002はっせんに! 文化放送 超A&G+ 「村川梨衣の a りえしょんぷり~ず❤」まで メールの場合はすべて小文字で、rietion@joqr.netまでです。rietionのつづりは「りえしょん」です

また、この番組では公式Twitter公式Vineを展開しています。あわせてフォローよろしくお願いします。

それでは今夜はこの辺でお別れです。お相手は村川梨衣でした。 また来週も a りえしょんぷり~ず❤


このお便りは おさむん家 Advent Calendar 2014 のメールです

  1. 「デモペチノガモットカワイイヨー」の人

History