🔌

ツールチップ付きのグラフを任意のサイトに埋め込む - simple mode & iframe

GET - /v1/users/<username>/graphs/<graphID>.html は、 mode オプションをサポートしています(APIドキュメント)。例えば /v1/users/<username>/graphs/<graphID>.html?mode=simple をブラウザで開くと、以下のように表示されます。
とあるグラフを ?mode=simple でアクセスした様子。
とあるグラフを ?mode=simple でアクセスした様子。
これは GET - /v1/users/<username>/graphs/<graphID> と何が違うのでしょうか?その答えは、この画面ではツールチップがサポートされているところです。
グラフの Pixel にマウスオーバーするとツールチップが表示されます。
グラフの Pixel にマウスオーバーするとツールチップが表示されます。
それでは、この GET - /v1/users/<username>/graphs/<graphID>.html?mode=simple は何のために用意されているのでしょうか。その答えは、ツールチップが使える状態でグラフを任意のサイトに埋め込みたいときに使うためです。
このグラフを任意のサイトに埋め込む際には、 iframe を用います。例えば以下のように使用します。
<iframe src="https://pixe.la/v1/users/a-know/graphs/emotion.html?mode=simple" height="155" width="720" frameborder="0"></iframe>
HTML
このテクニックを活用するには、埋め込む対象のサイトが iframe に対応している必要がありますが、とても手軽に Pixela のグラフを任意のサイトに埋め込むことができます。

関連