gatsbyのmarkdown記事でアニメーション画像を掲載する方法

2021/05/22

JavaScript

課題

gatsby-transformer-remarkで作成したMarkdownページの中に、 APNG や GIFアニメーション画像を配置しようとするが、ちょっと工夫が必要だったのでメモ。

具体的には、次のmarkdownで書いた記事の中に動く画像を掲載したかった。

動く！プログラミングスタンプ | kyabe.net

なぜうまくいかないか

gatsby-source-filesystemで読み込んだ APNG はgatsby-plugin-sharpでいい感じに圧縮される過程で普通のPNGファイルに戻ってしまうように見える。

apng, gif, webpといったアニメーション画像を gatsby-transformer-sharp でいい感じに扱う方法を巡っては、いろんなIssueで議論されているが、具体的な修正は入っていない模様。

解決方針

gatsby-remark-imagesのプラグイン説明によると、SharpはGIFやSVGには対応していないので、gatsby-remark-copy-linked-filesをお使いなさい、とのこと。

このプラグインはローカルのファイルを指定ディレクトリにコピーし、markdownファイルから参照できるようにしてくれる。ローカルのパスで参照すればpublicディレクトリ以下のURLにマッピングしてくれるという代物である。これを使えばgatsby-transformer-remarkで作成したページでPDFや動画を配布したりすることも可能になる。

今回はアニメーション画像としてWebPのファイルフォーマットを採用することにした。 apngは拡張子がpngで、普通のPNG画像と区別するのが難しいため。普通の画像はSharpで圧縮したい。普段GIFの静止画像を掲載することなどないので、アニメーション画像用途としてGIFや拡張子を専用に使ってもいいが、なんとなく画質が良くて容量も小さいWebPを使うことにした。

WebP画像の作成の仕方についてはGoogleから公式にWebP Encoderが公開されている。他にもImageMagickでも変換できたり、便利なWebサービスがあったりするので困らないと思う。

対応手順

gatsby-remark-copy-linked-filesをインストールする

npm install gatsby-remark-copy-linked-files

以上。

gatsby-config.jsを編集する

npmパッケージをインストールするだけでは有効にならないので、gatsby-config.jsにプラグインを記述します。

// gatsby-config.js

// gatsby-transformer-remarkのプラグインとしてgatsby-remark-copy-linked-filesを追加する
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-copy-linked-files`,
          options: {
            // pngやjpgなどはSharpの変換対象としたいので、コピー対象から外しておく。
            ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
          },
        },
      ],
    },
  },
]

WebP画像を配置する

掲載先のMarkdownファイルがあるディレクトリ内にWebP画像を配置する。ここで、仮に掲載するWebPのファイル名をexample.webpとします。

MarkdownからWebPを参照する

あとはページのmarkdownファイルに、Markdown記法で画像を貼ればOKです。

![Sample Animation Image](example.webp)

まとめ

プラグインをちょっと入れて工夫するだけでアニメーション画像を掲載することができました。今回はWebPを掲載しましたが、同様にAPNG、GIFも対応できるはずです。

実際に動いているイメージはこちらをご覧ください。

動く！プログラミングスタンプ | kyabe.net