GatsbyJSでファイルサイズを表示する

弊社コーポレートサイトのお問い合わせパーツには会社案内 PDF ファイルのダウンロードリンクがあるのですが、アクセシビリティに配慮してファイルサイズを表示しています。

以前は手入力していたのですが、ここは資料をアップデートをするたびにファイルサイズの数値も更新が必要になってくる箇所です。更新するたびに手入力で管理するのは無駄なので、ファイルサイズを自動で取得・表示することにしました。

弊社サイトは GatsbyJS で作られているのでその方法を解説します。

gatsby-source-filesystem プラグインをインストール

ファイル情報の取得には gatsby-source-filesystem プラグインを使います。

npm でインストールし、gatsby-config.js に以下を追加し有効にします。

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pdf`,
        path: `${__dirname}/static`,
      },
    },
  ],
}

「static」ディレクトリに会社案内PDFである 「gaji-labo_company-profile.pdf」を置いているので、ここでは「static」ディレクトリを指定します。

GraphiQLで確認

GraphiQLでファイル情報を取得できるか確認します。

query MyQuery {
  allFile(filter: {name: {eq: "gaji-labo_company-profile"}}) {
    edges {
      node {
        prettySize
      }
    }
  }
}

上記のクエリの prettySize でファイルサイズが取得することができました。

filter でファイル名を指定し、 prettySize でファイルサイズが単位付きで取得できるようです。

"prettySize": "3.57 MB" と取得できました。

コンポーネント作成

先ほどデータの取得は確認できたので、各要素で使用するためコンポーネント化します。

コンポーネントで GraphQL のデータを使用できる StaticQuery を使います。

Gatsby v2 introduces StaticQuery, a new API that allows components to retrieve data via a GraphQL query.

Querying Data in Components using StaticQuery | GatsbyJS

先ほど GraphiQL で確認したクエリを使用します。
今回は1ファイルのみなのでファイル名をそのまま使用します。

import { StaticQuery, graphql } from 'gatsby';
import PropTypes from 'prop-types';
import React from 'react';

const PdfFileSize = ({ data }) => (
  <span>{data.allFile.edges[0].node.prettySize}</span>
);

export default () => (
  <StaticQuery
    query={graphql`
      query {
        allFile(filter: { name: { eq: "gaji-labo_company-profile" } }) {
          edges {
            node {
              prettySize
            }
          }
        }
      }
    `}
    render={data => <PdfFileSize data={data} />}
  />
);

PdfFileSize コンポーネントとして作成しました。

確認と微調整

手書きだったお問い合わせコンポーネントのフィイルサイズの箇所を PdfFileSize コンポーネントに差し替えます。

- 会社案内PDF(3.6MB)もご用意しております。
+ 会社案内PDF(
+ <PdfFileSize />
+ )もご用意しております。

ビルドして確認します。

表示されました。

しかし、「3.57 MB」と数値と値の間に半角スペースがあるので replace メソッドでスペースを消してしまいましょう。　　

<span>{data.allFile.edges[0].node.prettySize.replace(/\s+/g, '')}</span>

これで再度ビルドし確認します。

スペースも消えて「3.57MB」とイメージ通りです。
これでビルドごとにPDFのファイルサイズを取得・表示することができました。