Gatsby製のブログにPixelaグラフをツールチップ付きで表示する
2021/10/19
Pixelaグラフをツールチップ付きで表示する方法を見つけたので、さっそくブログ下部に表示させてみた
今までもSVG画像では表示させていて、ツールチップ付きで表示できたらいいなと思っていたところだった
草グラフを iframe タグで簡単に埋め込む（Pixela v1.12.1） - えいのうにっき
<iframe src="https://pixe.la/v1/users/a-know/graphs/test-graph.html?mode=simple" height="155" width="720" frameborder="0"></iframe>手順
コンポーネントの作成
src/components/pixela-graph.js
import React from "react"
const PixelaGraph = () => {
const userName = "takagi"
const graphId = "task-durations"
return (
<div className="pixela-graph">
<iframe src={`https://pixe.la/v1/users/${userName}/graphs/${graphId}.html?mode=simple`} title="pixela-graph" frameborder="0"></iframe>
</div>
)
}
export default PixelaGraphスタイルの定義
レスポンシブに対応するため
src/css/style.css
.pixela-graph {
position: relative;
padding-bottom: 23%;
height: 0;
overflow: hidden;
}
.pixela-graph iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}padding-bottom: 23%; はアスペクト比
横720：縦155（1：0.2153）
正確には21.53%だけど、横幅を狭くするとズレが発生したのでいろいろ試して23%にした
作成したコンポーネントの読み込み
src/components/layout.js
import React from "react"
import { Link } from "gatsby"
+import PixelaGraph from "../components/pixela-graph"
import { rhythm } from "../utils/typography"
const Layout = ({ location, title, children }) => {
@@ -61,7 +61,7 @@ const Layout = ({ location, title, children }) => {
<header>{header}</header>
<main>
{children}
+ <PixelaGraph />
</main>
<footer>
© {new Date().getFullYear()}, Built with確認
マウスオーバーでちゃんとツールチップも表示された！
追記
サーチコンソールでモバイルユーザビリティのエラーが出てしまった（「クリック可能な要素同士が近すぎます」）
対応策として画面サイズが小さい場合は、今まで通りSVG画像を表示する
return (
<div className="pixela-graph">
{
window.innerWidth < 500 ? (
<img src={`https://pixe.la/v1/users/${username}/graphs/${graphId}`} alt="pixela-graph"/>
) : (
<iframe src={`https://pixe.la/v1/users/${username}/graphs/${graphId}.html?mode=simple`} title="pixela-graph" frameborder="0"></iframe>
)
}
</div>
)雑に書くとこんな感じ？
