高木のブログ

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

確認

マウスオーバーでちゃんとツールチップも表示された! Pixelaグラフ

追記

サーチコンソールでモバイルユーザビリティのエラーが出てしまった(「クリック可能な要素同士が近すぎます」)

対応策として画面サイズが小さい場合は、今まで通り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>
)

雑に書くとこんな感じ?

参考

iframeで埋め込むときのレスポンシブ対応について - naeco.jp


ytkg

Written by ytkg, Twitter, GitHub