日記

ブログ内にGithubの草を生やしてみた

今回はちょっとした小ネタです。

お気づきの方もいるかもしれませんが、PC限定でブログのページ上部にGithubのコントリビューションを表示してみました。俗にいう「草を生やす」というやつです。

特に深い意図はありませんが、これがあるだけでぐっと技術系ブログ色が強まるので、遊び半分で組み込んでみました。そこまで難しくないので、その方法を紹介しようと思います。

生やすだけなら簡単

Githubから情報を引っ張ってくるというと、パッと見は難しそうに見えますが、実は草を生やすだけなら簡単です。

上記のGrass-Graphというサービスを使えば、URLの一部にGithubのユーザーIDを入れるだけで、コントリビューションのグラフをPNG形式で取得できます。取得した画像はこんな感じです。

もちろん、imgタグのsrcにもそのURLは指定できるので、普通の画像を貼りつける感覚で簡単に表示させることができます。

ちょっとひと工夫

やりたいことはこれで達成できるのですが、上記の方法ではページを開く度にグラフを再取得する形になります。

四六時中にコミットしている人ならリアルタイムでグラフに反映された方が嬉しいですが、私程度のコミット頻度では毎回取得するだけ無駄です。1日1回でも多すぎるくらいだと思います。

そこで今回は以下のように、グラフ画像を定期的にサーバーに落としてきて、それを表示させる仕組みとしました。これなら、サーバー側にキャッシュした画像を返すだけなので、サービスへのアクセスも発生しません。

画像の取得はwget+Cronで

肝心の定期取得については、wget+Cronの組み合わせで作りました。このブログはエックスサーバーというレンタルサーバー上で運用しているのですが、標準でCronによるスクリプトの定期実行が可能です。

ということで、まずはこんなシェルスクリプトを書いてサーバー内に設置しました。Grass-Graphからダウンロードした画像を指定場所に保存するだけの処理です。

あとはサーバー管理画面からCron設定に入り、指定した時間にスクリプトを実行するように設定します。今回は1日1回、午前0時に実行するようにしました。

実行コマンドについては、動かしたいスクリプトがシェルなので以下のような感じになります(パスはサーバーの環境依存です)

あとはブログ内に貼るだけ

あとは、保存先にあるグラフ画像を表示させるだけで完成です。ブログ内のデザインに合わせて装飾すると、見た目が馴染んで良い感じになります。Cronで定期的に画像が更新されるので、それに合わせて表示されるグラフも変わるはずです。

キャッシュプラグインなどを使っている場合は、表示が一向に更新されないということもあるかもしれません。そのときは定期的にキャッシュを削除するなど、設定の見直しが必要になるかと思います。

以上、ブログ内にGithubの草を生やす方法でした(・∀・)

お使いのサーバーがCronなどの定期実行をサポートしていれば簡単に設定できるので、興味のある方は試してみてはいかがでしょうか?

ではではノシ

後日談:自分でグラフをつくってみました

その後、コントリビューションの情報を元にグラフを生成する仕組みを作ったので、このブログのトップに貼っているグラフもそれに置き換えています。

詳細が気になる方はこちらもご覧くださいm(_ _)m

関連記事

日記 自作物

2020/5/14

GitHubのコントリビューション数をグラフ化してみた

先日、ブログのトップページにGitHubの草を表示してみたという記事をあげました。 Corgi Lab. ~備忘録のための技術ブログ~ブログ内にGithubの草を生やしてみた今回はちょっとした小ネタです。お気づきの方もいるかもしれませんが、PC限定でブログのページ上部にGithubのコントリビューションを表示してみました。俗にいう「草を生やす」というやつです。特に深い意図はありませんが、これがあるだけでぐっと技術系ブログ色が... GitHubの草(コントリビューション)は日々の活動が可視化されるので、個 ...

この記事を読む

RaspberryPi

2020/5/6

Raspberry Pi4上のUbuntu ServerでCPUクロックを制限する方法

Raspberry Pi4は消費電力が大きく発熱がちょっと心配です。そのため、用途によっては意図的にCPUの動作クロックを絞って消費電力と発熱を抑えるという運用もアリかと思います。 CPUクロックの設定方法の多くはRaspbianを例に挙げていますが、Ubuntu Serverでも同じ方法で設定できたので、備忘録として残しておきたいと思います。 動作環境は、 ・Raspberry Pi4本体:モデルB(メモリ4GB) ・OS:Ubuntu Server 20.04 です。 目次CPU状態のチェッククロック ...

この記事を読む

RaspberryPi Linux

2020/5/2

RaspberryPi4でUbuntu Server 20.04を動かしてみた

新しい遊び道具として、RaspberryPi4(ModelB 4GBメモリ)を買いました。 前モデルと比べて大幅に性能アップしているということで、学習用のLinux環境としても実用的なものになりそうです。ということで、今回はRaspbian(ラズパイの標準OS)ではなく、Ubuntu Serverをインストールして使ってみたいと思います(・∀・) 目次OSイメージのダウンロードSDカードにイメージを書き込む初期起動+設定固定IPアドレスを設定する OSイメージのダウンロード まずはUbuntu Serve ...

この記事を読む

日記

2020/5/14

ブログ内にGithubの草を生やしてみた

今回はちょっとした小ネタです。 お気づきの方もいるかもしれませんが、PC限定でブログのページ上部にGithubのコントリビューションを表示してみました。俗にいう「草を生やす」というやつです。 特に深い意図はありませんが、これがあるだけでぐっと技術系ブログ色が強まるので、遊び半分で組み込んでみました。そこまで難しくないので、その方法を紹介しようと思います。 目次生やすだけなら簡単ちょっとひと工夫画像の取得はwget+Cronであとはブログ内に貼るだけ後日談:自分でグラフをつくってみました 生やすだけなら簡単 ...

この記事を読む

Flutter

2020/4/12

【Flutter】リリースチャンネルについて調べてみた

この記事を書いている2020/04/12時点で、FlutterのiOS実機ビルドが以下のようなエラーで通らなくなっています(´・ω・) Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator. どうやら、最新のXcode11.4とstableチャンネルの組み合わせが原因らしく、Flutterのチャンネルを切り替えてあげればOKとのことでした。 とりあえず、stab ...

この記事を読む

-日記

© 2020 Corgi Lab. ~備忘録のための技術ブログ~