GatsbyJS サイトを公開するための準備 チュートリアル part.8

よくここまでたどり着いたね!あなたは以下を学習してきましたね。 この最後のセクションでは、Lighthouseと呼ばれる強力なサイト診断ツールを導入して、サイトを稼働させる準備をするための一般的な手順を説明します。それに沿って、ギャツビーサイトでよく使いたくなるプラグインをいくつか紹介していきます。

LightHouseで調査

LightHouseのホームページから引用:
Lighthouseは、Webページの品質を向上させるためのオープンソースの自動化ツールです。
任意のウェブページ、公開されているページ、または認証が必要なページに対して実行することができます。 パフォーマンス、アクセシビリティ、プログレッシブウェブアプリ(PWA)などの監査があります。
LighthouseはChrome DevToolsに含まれています。監査を実行して、見つかったエラーに対処し、提案された改善策を実行することは、サイトを稼働させるための準備をするのに最適な方法です。それは、あなたのサイトが可能な限り高速でアクセス可能であるという自信を与えるのに役立ちます。

試してみてください。

まず、Gatsbyサイトの本番ビルドを作成する必要があります。ギャツビーの開発サーバは開発を高速化するために最適化されていますが、生成されるサイトは製品版に近いものの最適化されていません。

サイトをビルドする

  1. 開発サーバー(まだ起動している場合)を停止し、以下のコマンドを実行します。
gatsby build
💡 パート1で学んだように、これはあなたのサイトの本番ビルドを行い、ビルドされた静的ファイルを公開ディレクトリに出力します。
  1. ビルドしたサイトをローカルで実行する
gatsby serve
サーバーが起動するとhttp://localhost:9000で閲覧出来ます。

LightHouseで調査を開始

では、最初のLightHouseテストを実行してみましょう。
  1. まだの方は、テストに拡張機能が干渉しないように、Chromeのインコグニートモードでサイトを開きましょう。そして、Chrome DevToolsを開きます。
  2. 「LightHouse」タブをクリックすると、次のような画面が表示されます。

  1. 「Run audit」をクリックします。(デフォルトでは、利用可能なすべての監査タイプが選択されている必要があります)。そして、「Run audit」をクリックします。(その後、Run auditを実行するのに1分ほどかかります)。監査が完了すると、このような結果が表示されるはずです。

ご覧のように、ギャッツビーのパフォーマンスは、箱から出してみると非常に優れていますが、PWA、アクセシビリティ、ベストプラクティス、SEOのために、スコアを向上させるためのいくつかのことを見逃しています(そして、その過程で、サイトを訪問者や検索エンジンによりフレンドリーなものにします)。

マニフェストファイルの追加する

プログレッシブWebアプリ」カテゴリのスコアがかなり不足しているように見えます。それに対処しましょう。

しかし、その前に、PWAとは何か?

彼らは、アプリのような機能や利点を備えたウェブ体験を強化するために、現代のブラウザの機能を活用している通常のウェブサイトです。PWA体験を定義するものについて、Googleの概要をチェックしてみましょう。

Web アプリ マニフェストのインクルードは、PWA の 3 つの一般的に受け入れられているベースライン要件の 1 つです。

Googleを引用します。
ウェブアプリのマニフェストは、ウェブアプリケーションについてブラウザに伝え、ユーザーのモバイルデバイスやデスクトップに「インストール」されたときにどのように動作するかを伝えるシンプルなJSONファイルです。

Gatsbyのmanifestプラグインは、すべてのサイトのビルドでmanifest.webmanifestファイルを作成するようにGatsbyを設定します。

gatsby-plugin-manifestを使う

  1. プラグインをインストール
npm install --save gatsby-plugin-manifest
  1. src/images/icon.pngの下にアプリのファビコンを追加します。このチュートリアルの目的のために、利用可能なアイコンがない場合は、この例のアイコンを使用することができます。アイコンは、マニフェストのすべてのイメージを構築するために必要です。詳細は gatsby-plugin-manifest のドキュメントを参照してください。
  2. gatsby-config.jsファイルのplugins配列にプラグインを追加します。
gatsby-config.js

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#6b37bf`,
        theme_color: `#6b37bf`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
  ]
}
ギャツビーサイトにWebマニフェストを追加することから始めるのに必要なことはこれだけです。 この例は基本的な設定を反映しています - より多くのオプションについてはプラグインのリファレンスを参照してください。

オフラインサポートを追加する

サイトがPWAとしての資格を得るためのもう一つの条件は、サービスワーカーの利用です。サービスワーカーがバックグラウンドで動作し、接続性に基づいてネットワークまたはキャッシュされたコンテンツの提供を決定し、シームレスで管理されたオフライン体験を可能にします。

Gatsbyのオフラインプラグインは、サイトのサービスワーカーを作成することで、Gatsbyサイトをオフラインで動作させ、ネットワークの悪条件に強くします。

gatsby-plugin-offlineを使う

  1. プラグインのインストール
npm install --save gatsby-plugin-offline
  1. gatsby-config.jsファイルのplugins配列にプラグインを追加します。
gatsby-config.js

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#6b37bf`,
        theme_color: `#6b37bf`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-offline`,
  ]
}
ギャツビーでサイトを公開するにはこれで十分です。
オフラインプラグインは、作成された manifest.webmanifest をキャッシュできるように、マニフェストプラグインの後にリストアップする必要があります。

ページにメタデータを追加する

ページにメタデータ(タイトルや説明文など)を追加することは、Googleなどの検索エンジンがコンテンツを理解し、検索結果に表示するタイミングを決める上で重要です。

React Helmetは、ドキュメントヘッドを管理するためのReactコンポーネントインターフェイスを提供するパッケージです。

Gatsbyのreact helmetプラグインは、React Helmetで追加されたサーバーレンダリングデータをドロップインでサポートします。 プラグインを使用すると、React Helmetに追加した属性は、Gatsbyが構築する静的なHTMLページに追加されます。

React Helmet と gatsby-plugin-react-helmetを使う

  1. 2つのパッケージをインストール
npm install --save gatsby-plugin-react-helmet react-helmet
  1. siteMetadata オブジェクトの中に説明と作者が設定されていることを確認してください。また、gatsby-config.jsファイルのplugins配列にgatsby-plugin-react-helmetプラグインを追加します。
gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
    description: `A simple description about pandas eating lots...`,
    author: `gatsbyjs`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#6b37bf`,
        theme_color: `#6b37bf`,
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: `standalone`,
        icon: `src/images/icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
  ],
}
  1. src/components ディレクトリに seo.js というファイルを作成し、以下を追加します。
src/components/seo.js

import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

function SEO({ description, lang, meta, title }) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default SEO
上記のコードは、最も一般的なメタデータタグのデフォルトを設定し、プロジェクトの残りの部分で動作するための<SEO>コンポーネントを提供します。カッコいいでしょ?

  1. これで、テンプレートやページで<SEO>コンポーネントを使用してpropsを渡すことができるようになりました。例えば、以下のようにblog-post.jsテンプレートに追加します。
src/templates/blog-post.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default function BlogPost({ data }) {
  const post = data.markdownRemark
  return (
    <Layout>
      <SEO title={post.frontmatter.title} description={post.excerpt} />
      <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
      excerpt
    }
  }
`
上記の例は、ギャツビースターターブログを参考にしています。propsを<SEO>コンポーネントに渡すことで、投稿のメタデータを動的に変更することができます。この場合、gatsby-config.jsファイルのデフォルトのsiteMetadataプロパティの代わりに、ブログ記事のタイトルと抜粋(ブログ記事のマークダウンファイルに存在する場合)が使用されます。

さて、上記のように再度灯台監査を実行すれば、100点満点ではなくても、100点に近いスコアを得ることができるはずです。
さらに詳しい読み物と例については、SEOコンポーネントの追加React Helmetのドキュメントをチェックしてください!

より良いものを作るために

このセクションでは、サイトのパフォーマンスを向上させ、本番に備えるためのギャツビーに特化したツールをいくつか紹介しました。

Lighthouseはサイトの改善や学習に最適なツールです。

次のステップ

公式ドキュメント

公式ドキュメントクイックスタート詳細ガイドAPI リファレンス などの公式ドキュメントをご覧ください。

公式プラグイン

公式プラグイン。Gatsbyがメンテナンスしているすべての公式プラグインの完全なリストです。

公式スターター

  1. Gatsby's Default Starter: このデフォルトのボイラープレートでプロジェクトをキックオフします。このベアボーンのスターターには、必要になるかもしれないメインのGatsby設定ファイルが同梱されています。 制作例
  2. ギャツビーのブログスターター:凄まじくて燃えるようなブログを作るためのギャツビースターター。 制作例
  3. ギャツビーのハローワールドスターター:ギャツビーサイトに必要な素顔がわかるギャツビースターター 制作例

あとがき

このチュートリアルのためだけに。より多くのガイド付きのユースケースをチェックするための追加チュートリアルがあります。

これはまだ序の口に過ぎません。続けろ!

何かカッコいいものを作ったのか?Twitterでシェアして、#buildwithgatsbyをタグ付けして、@gatsbyjsをつけてください。 学んだことをかっこよくブログに書いたのかな?それもシェアしてください!(笑 貢献しろ!gatsbyレポの公開してる問題を散策して、貢献者になってください。 より多くのアイデアを得るために、"How to contribute "ドキュメントをチェックしてください。 楽しみにしていますね〜😄。