日記

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

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

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

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

生やすだけなら簡単

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

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

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

ちょっとひと工夫

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

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

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

画像の取得はwget+Cronで

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

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

SAVE_PATH="<画像の保存場所>"

pushd $SAVE_PATH
wget "<Glass-Graphの画像取得URL>" -O glass.png
popd

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

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

/usr/bin/sh "スクリプトのフルパス"

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

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

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

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

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

ではではノシ

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

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

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

広告の表示がブロックされています。
広告の表示がブロックされています。

関連記事

Flutter プログラミング

2021/8/2

【Flutter】アプリ内の設定値を実装する方法

アプリ内で独自の設定を作る場合、そのデータを保持する方法を考える必要があります。 SQL、テキストファイルなど選択肢は多々ありますが、shared_preferencesというパッケージを使えば簡単に実装することができます。 Dart packages  1 User 29 Pocketsshared_preferences | Flutter PackageFlutter plugin for reading and writing simple key-value pairs. Wraps ...

この記事を読む

RaspberryPi Linux

2021/4/18

YoctoでRaspberryPi4のイメージをビルドしてみた

昨今、様々なデバイスでLinuxが動くようになっている中、組み込みLinuxのデファクトスタンダードとなりつつあるのが「Yocto」と呼ばれるビルドシステムです。 組み込みの現場ではその名前を聞くことが増えましたが、まだまだ日本ではドキュメントも乏しくイマイチ掴み所がありません。そこで、まずは使ってみようということでRaspberry Pi4のイメージをビルドしてみることにしました。 目次1 Yoctoとは?2 Raspberry Pi4のイメージを作ってみる2.1 下準備2.2 Yocto本体+ラズパイ ...

この記事を読む

C++ 自作物

2021/8/1

言語処理系をつくろう(第7回):比較演算子を実装する

自作の言語処理系開発日記の第7回です。前回までで変数の実装が終わったので、ここからはいよいよ制御構文を実装…と思ったのですが、制御のためには比較演算子を実装する必要がありました。 ということで、今回は比較演算子を実装していきます。基本的には四則演算と変わりないのであまり難しくはありません。 目次1 比較演算子の仕様2 実装してみる2.1 トークナイザ2.2 構文解析器2.3 コード生成器2.4 実行系(仮想マシン) 比較演算子の仕様 比較演算子を実装する前に、その仕様について少し考えておきます。 比較演算 ...

この記事を読む

C++ 自作物

2021/8/1

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

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

この記事を読む

C++ 自作物

2021/8/1

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

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

この記事を読む

  • このブログの中の人

Ryo Yoneyama

とある会社でソフトウェアエンジニアをしています。技術的な備忘録を中心にまとめてます。ネタがあれば日記も書きます。

-日記

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