Top - Pixela Help Center/🇯🇵Pixela ヘルプセンター/GitHub に Pixela のグラフを埋め込む
page icon

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

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

留意事項

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

関連