🌱

Gridsomeに導入しておきたいプラグイン

2021/06/24に公開

Jamstack

Gridsome

tech

Gridsomeでサイトを作る際に導入しておきたいプラグインを紹介します。

サイトマップ

@gridsome/plugin-sitemapはビルド時にsitemap.xmlを自動的に出力してくれるプラグインです。

下記コマンドでインストールします。

$ yarn add @gridsome/plugin-sitemap

gridsome.config.jsにプラグインの読み込みを設定します。

gridsome.config.js

module.exports = {
  
  // 必須
  siteUrl: 'https://・・・',
  
  // 中略
  
  plugins: [
    
    // 中略
    
    // 追加
    {
      use: '@gridsome/plugin-sitemap',
      
      // 個別に変更したい項目がある場合に設定
      options: {
        // サイトマップのファイルの出力先。デフォルトは/sitemap.xml
        output: '/sitemap.xml',
        
        // URLを指定して個別にlastmod等を設定する場合の例
        config: {
          '/articles/*': {
            changefreq: 'weekly',
            priority: 0.5,
            lastmod: '2020-02-19',
          },
          '/about': {
            changefreq: 'monthly',
            priority: 0.7,
            lastmod: '2020-05-12',
          }
        },
        
        // サイトマップに含めたいURLがある場合にパスを設定
        include: ['/blog', '/blog/**'],
      
        // サイトマップから除外したいURLがある場合にパスを指定
        exclude: ['/blog', '/blog/**'],
        
        // 静的ファイルを含めたい場合
        staticUrls: [
          {
            url: '/images/',
            img: [
              {
                url: '/images/img1.jpg',
                caption: 'Image One',
                title: 'The Title of Image One',
                geoLocation: 'Trondheim, Norway',
                license: 'https://creativecommons.org/licenses/by/4.0/'
              },
              {
                url: '/images/img2.jpg',
                caption: 'Image Two',
                title: 'The Title of Image Two',
                geoLocation: 'Trondheim, Norway',
                license: 'https://creativecommons.org/licenses/by/4.0/'
              }
            ]
          }
        ]
      }
    },
  ]
}

PWA

Webサイトの評価をするChromeの拡張機能LighthouseでPWAの項目に対応するため、gridsome-plugin-pwaを使用します。

下記コマンドでgridsome-plugin-pwaをインストールします。

$ yarn add gridsome-plugin-pwa

gridsome.config.jsでプラグインの設定します。

gridsome.config.js

module.exports = {
  // 中略
  
  plugins: [
    {
      use: 'gridsome-plugin-pwa',
      options: {
          // Service Worker オプション
          disableServiceWorker: false,
          serviceWorkerPath: 'service-worker.js',
          cachedFileTypes: 'js,json,css,html,png,jpg,jpeg,svg,gif',

          // Manifest オプション
          manifestPath: 'manifest.json',
          title: 'タイトル',
          startUrl: 'https://xxxxxxxxxxxxx',
          display: 'standalone',
          statusBarStyle: 'default',
          themeColor: '#666600',
          backgroundColor: '#ffffff',
          icon: './src/favicon.png',
          shortName: '短いタイトル',
      }
    },
  ]
}

iconは各種サイズつくってくれます。

robots.txt

プラグインを入れるほどのことはないかもしれませんが、gridsome-plugin-robots-txtは自動でrobots.txtを生成してくれます。

下記コマンドでgridsome-plugin-robots-txtをインストールします。

$ yarn add gridsome-plugin-robots-txt

gridsome.config.jsにプラグインの読み込みを設定します。

gridsome.config.js

module.exports = {
  // 中略
  
  plugins: [
    
    // 中略
    
    // 追加
    {
      use: 'gridsome-plugin-robots-txt',
    },
  ]
}

おまけ：Google Analytics

公式にある@gridsome/plugin-google-analyticsはGoogle Analytics 4の測定ID（G-XXXXXXXXXX）に対応していないのでmain.jsに直接記述しました。

src/main.js

import DefaultLayout from "~/layouts/Default.vue";

export default function (Vue, { head }) {
  // Set default layout as a global component
  head.htmlAttrs = { lang: 'ja' }

  // 追記
  head.script = [
    {
      src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX',
      async: true
    },
    {
      innerHTML: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-XXXXXXXXXX');
      `
    }

  ]

  Vue.component("Layout", DefaultLayout);
}

まとめ

Gridsomeはプラグインを含め、今はメンテナンスがほとんどされていないようです。
やっぱり開発も盛んで部分的にSSGとSSRを使い分けたりできるNext.jsにするべきか。

サイトマップ

PWA

robots.txt

おまけ：Google Analytics

まとめ

Discussion