Gatsby.js で作ったサイトから Tableau を読み込む方法

9447 ワード
Tableau React gatsby codeforjapan codeforjapan テキストリンク

Gatsby.js で作ったサイトでに Tableau を埋め込む

総務省がPDFで公開しているマイナンバーカードの交付状況というファイルから CSV ファイルを作り、Tableau で取り込み表示しています。

Gatsby を使って生成したファイルを、Github Pages でホストしています。(リポジトリ)

char.js などを使ってグラフを自前で作成しても良かったのですが、データを色々いじりながら試行錯誤したかったので、Tableau をそのまま取り込むことにしてみました。

2020年7月12日現在、以下のように表示されています。

マイナンバーカード普及状況ダッシュボード

tableau-react コンポーネントを使う

React から Tableau のグラフを表示する、tableau-react というコンポーネントがあります。

こちらを使うことで、Gatsby でも Tableau のグラフをサイトに埋め込むことができます。

yarn add tableau-react

これを導入することにより、Tableau のシートをサイトに埋め込むことができるようになります。Tableau Public にシート公開（例えばこちらのグラフ）し、シェアボタンからシェア用のLinkを取得し、以下のようなコンポーネントを作ります。

PrefectureReport.tsx
//@ts-ignore  (TypeScript の定義が無いのでエラー回避)
import TableauReport from 'tableau-react'

const SimpleReport = () => (
  <TableauReport url="https://public.tableau.com/views/26693/sheet0?:language=en&:display_count=y&publish=yes&:origin=viz_share_link" />
)

export default SimpleReport

このコンポーネントを使うことで、Tableau をEmbedできます。今はグラフが一つなので固定にしていますが、URLはパラメータで渡せるようにしても良いかもしれませんね。

Code Splitting でyarn build のエラー対応をする

この状態で、gatsby develop ではサイトは表示できても、yarn build でファイルを生成しようとすると、以下のようなエラーがでます。

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  521 | tab.WindowHelper._cancelAnimationFrameFunc = null;
  522 | (function () {
> 523 |     if (('innerWidth' in window)) {
      | ^
  524 |         tab.WindowHelper._innerWidthFunc = function(w) {
  525 |             return w.innerWidth;
  526 |         };


  WebpackError: ReferenceError: window is not defined

  - tableau-2.0.0.js:523 
    [lib]/[tableau-api]/tableau-2.0.0.js:523:1

tableau.js は事前コンパイルする必要はないので、loadable-component を導入し Code Splitting します。

yarn add @loadable/component @types/loadable__component
index.tsx
import loadable from '@loadable/component'

import Page from '../components/Page'
import Container from '../components/Container'
import IndexLayout from '../layouts'
const PrefectureReport = loadable(() => import('../components/PrefectureReport'))

const IndexPage = () => (
  <IndexLayout>
    <Page>
      <Container>
        (省略)
        <PrefectureReport></PrefectureReport>
      </Container>
    </Page>
  </IndexLayout>
)

export default IndexPage

以上で、無事に build を行うことができました。

このプロジェクトでは、ご協力いただける仲間を募集中です。

GitHub：https://github.com/codeforjapan/mynumbercard_statistics/issues

もしご協力いただける方がいたら、ぜひ Issue にコメントいただければと思います。

Code for Japan の Slack に入り、Hal Seki(@hal_sk) にお声がけいただいても大丈です。