nagu log

忘れないために

AWSボタンを使ってGitHub Contributions風の草を生やしてみた

はじめに

GitHubに草を生やしていくとやっている感があっていい。
自分のGitHubページにアクセスして進捗草が生い茂っていたら「今日も頑張るぞい」ってなるに違いない。
何かをやったということが視覚的にわかるので、自己肯定感もアゲアゲなはず。

こんなふうに、毎日たくさんの進捗草に囲まれていたら、きっと人生楽しくなっちゃいますね。

というわけで、AWS進捗ボタンを利用してGitHub風の芝生を作ってみました。

実際に生えてくるのは青い草です。
青臭いという自戒と、草青むという希望を込めて

動機

  • APIサーバという概念を仕入れたからなんか作ってみたい
  • そういえばAWS進捗ボタン使ってない…そや、再利用しよう
  • GitHubの芝生が枯れてる…人生の進捗はコードだけじゃないはず
  • AWS進捗ボタンはPythonでデータ処理しているからAPIサーバはflaskで作る
  • heroku使ってみよ

こんな動機で出来上がったアーキテクチャ図(作ってみたかっただけ)

f:id:csnagu:20190629150942p:plain
なんちゃってアーキテクチャ図 icon by https://icons8.jp

  1. GitHub Pagesで運用している https://naguu.info へアクセス
  2. herokuで動かしているflask製のapiサーバへGETリクエストを飛ばす
  3. apiサーバが S3 から記録データを取得
  4. apiサーバ内でデータ処理してjson形式でreturn
  5. jsでヒートマップカレンダーとして出力

どんなもの

実際に使っているのがこんな感じ。

f:id:csnagu:20190629145716p:plain
青い芝のdemo

ヒートマップカレンダーはDKirwan氏のcalendar-heatmapをほぼそのまま利用しています。
便利。

github.com

なんちゃってapiサーバの実装はgistを参照。

現状の課題や未来の自分へのTodo

  • naguu.info/ へのリクエストごとにAWS S3からcsvファイルをダウンロードしているから表示が遅い
  • flask製のAPIサーバではGETのたびにデータに前処理を施しているから遅い
  • AWS進捗ボタン側のデータを使ってcontributions毎の時間をグラフで出したら面白いかも
  • ヒートマップカレンダーの実装が人に頼り切り

良い感じの実装方法などあればコメント等で教えてください!