日記

ブログ内に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

関連記事

C++ 自作物

2020/8/11

言語処理系をつくろう(第6回):変数を実装する

自作の言語処理系開発日記、第6回です。 これまでは四則演算など、電卓レベルの機能実装に取り組んでいましたが、いよいよ変数を扱えるようにしていきたいと思います。これでかなりプログラミング言語っぽくなるかも(・∀・) 今回は新しい仕組みを入れたりと、割と修正がごちゃごちゃしてしまったので、うまくまとめきれていません。ごめんなさい…。 目次変数の実装について実装してみるトークナイザ構文解析器コード生成器実行系(仮想マシン) 変数の実装について これまでは即値しか扱っていなかったので、「値が登場すればそれをスタッ ...

この記事を読む

C++ 自作物

2020/8/10

言語処理系をつくろう(第5回):連続した式の実行

自作の言語処理系開発日記の第5回です。 前回までで括弧を含んだ四則演算ができるようになりましたが、このままでは単なる電卓止まりです。ということで、今回は複数の式を連続して実行できる仕組みを実装していきたいと思います。 目次生成規則を考える実装してみる構文解析器コード生成 生成規則を考える これまでは入力全体を1つの式として解釈していましたが、今回は式の区切りを定義して複数の式として解釈できるようにします。 C言語だと「;」や「,」が区切り文字として使われますが、開発中の言語(rook)では「,」と「\n( ...

この記事を読む

C++ 自作物

2020/8/4

言語処理系をつくろう(第4回):括弧付き計算と単項演算子

自作の言語処理系開発日記の第4回です。前回までで乗除算を実装できたので、この調子でもう少し複雑な計算に対応したいと思います。今回はそれぞれの実装が少ないので、一気に2つのステップを進めます。 目次括弧を含む計算生成規則をいじる単項演算子(+と-)生成規則をいじる 括弧を含む計算 これまでの実装では、乗除算は必ず加減算に先立って実行されます。しかし、それでは不十分なので、括弧を含む計算(例:(1+2)*3)を実行できるようにします。 生成規則をいじる 今回も構文解析器の生成規則を修正することで、括弧付きの計 ...

この記事を読む

C++ 自作物

2020/8/4

言語処理系をつくろう(第3回):乗除算を実装する

自作の言語処理系開発日記の第3回です。前回は加減算を実装したので、今回は乗除算の実装にチャレンジしていきます。 目次実装してみる構文解析器 実装してみる 今回の実装において、トークナイザ・コード生成器・実行系(仮想マシン)については加減算のときと変わりません。単純に各種定義を追加して、それを扱えるようにしてあげるだけです。 一方、構文解析器についてはちょっとややこしいので、そこだけ解説します。 構文解析器 加減算では演算の優先順位がなかったので、単純に左結合(=左から順に計算していく)で処理していけばOK ...

この記事を読む

C++ 自作物

2020/8/2

言語処理系をつくろう(第2回):加減算を実装する

自作の言語処理系開発日記の第2回です。前回は処理系全体の骨格と、数値の読み込みを実装しました。今回は次のステップとして、加減算を扱えるようにしたいと思います。 目次実装してみるトークナイザ構文解析器コード生成器+実行系(仮想マシン) 実装してみる トークナイザ 前回までのトークナイザでは数値しか扱うことができないので、「+」や「-」などの記号をトークン化できるようにします。 まずは、トークン定義を追加します。加算と減算それぞれで追加しても良いのですが、後段の構文解析で特に区別する必要がないので、演算子とい ...

この記事を読む

-日記

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