page icon

GitHub に Pixela のグラフを埋め込む

GitHub リポジトリの READMEプロフィールなどは、Pixela のグラフを埋め込む場所としては格好の場所かもしれません。
 
例えば、そのリポジトリで実行された CI ワークフローの回数を Pixela に記録し、そのグラフを README に埋め込んでみましょう。そのリポジトリがどれだけ活発に開発されているかを知らせることができるでしょう。
Pixela の GitHub リポジトリでは、Pixela のサービスに対するアラート指標を Pixela グラフにして掲載しています。
Pixela の GitHub リポジトリでは、Pixela のサービスに対するアラート指標を Pixela グラフにして掲載しています。
 
GitHub では Markdown がサポートされています。そのため、README であっても issue であっても、以下のように記述することでグラフを埋め込むことができるでしょう。
 
ただし、気をつける必要があることが1つだけあります。それは、GitHub は画像などのアセットを自動的にキャッシュする、ということです。
上記のような Markdown で画像を表示させても、その画像のURLを確認すると以下のようなものになっているでしょう。
これでは、せっかく Pixela のグラフを更新しても、GitHub に掲載しているグラフの画像はキャッシュされたものが表示されるばかりです。常に最新の情報を表示させる、ということができません。
 
GitHub は、このキャッシュをクリアする方法をすでに提供しています。以下のような独自の HTTP メソッド でリクエストすることで、キャッシュを失効させることができます。
 
そしてこれは、Pixela もサポートをしています。グラフの をしたい対象のURLを設定しておくだけで、「グラフが更新される度に、GitHub のキャッシュに対して リクエストを行う」ことを実現できます。
 
グラフの は、例えば以下のように設定します。 を使用します。
 
これで、GitHub にグラフの画像がキャッシュされているかどうかを気にすることなく、グラフを埋め込むことができますね。

留意事項

仮に埋め込む Pixela グラフが同一でも、GitHub 上の異なる場所にグラフを埋め込むとそれぞれ異なるURL が生成されます。
そのため Pixela では、 プロパティに最大5つの GitHub キャッシュ URL を指定することができるようになっています。

関連

 
Hack it.
Hack it.