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

morita

弊社コーポレートサイトのお問い合わせパーツには会社案内 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 でファイルサイズが単位付きで取得できるようです。

GraphiQLで確認

"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のファイルサイズを取得・表示することができました。

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


morita

投稿者 Morita Sou

フロントエンドチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。
Macやエディタ、開発環境などを快適にすることにいつも燃えています。