GatsbyJS・microCMS用の画像を扱うnpmモジュールを公開してみた

初めてオープンソースの物を作成したのでいろいろな点が分からない中でリリースまでこぎつけられたのがうれしかったです。

何を作ったのか

@mako-tos/gatsby-transformer-for-microcms を作りました。

gatsby-source-microcms と一緒に使う前提の GatsbyJS プラグインを作りました。
microCMS で設定したコンテンツの中でリッチエディタ(html)のフィールドを指定すると、html 内の img タグを picture タグに変換した html を子 Node に追加します。

なぜ作ったのか

最近 GatsbyJS を触ってかなりいいなと思ったのでお客様にも利用を提案できるようにしたいと考えました。
しかしお客様に提案するのに海外製の headless CMS を利用すると保守に自信がもてませんでした。
そこで microCMS に注目して色々触っているうちに、何か作りたいと考えました。
そのため、自分でもできそうで公開する意味がありそうなものはないかと考えて他にやっている人がい無そうだったので作りました。

どう利用するのか

install 方法
yarn ではこうなります。

$ yarn add @mako-tos/gatsby-transformer-for-microcms


npm の場合はこうなります。

$ npm install @mako-tos/gatsby-transformer-for-microcms


設定方法

設定例

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-microcms',
      options: {
        apiKey: process.env.MICRO_CMS_API_KEY,
        serviceId: process.env.MICRO_CMS_SERVICE_ID,
        endpoint: 'blog',
      },
    },
    {
      resolve: '@mako-tos/gatsby-transformer-for-microcms',
      options: {
        mediaType: 'MicrocmsBlog', // 必須 string 型
        field: 'body', // 必須 string 型
        useHljs: true, // 任意 boolean 型
        image: {
          sizes: '80vw', // 任意 string 型
          loading: 'auto', // 任意 string 型
        },
      },
    },
  ],
};

gatsby-source-microcms より後に @mako-tos/gatsby-transformer-for-microcms を設定してください。

パラメータについて

• mediaType には graphQL 上で MicrocmsXxx と表示されるテーブル名を設定してください
• field には html が入力されている MicrocmsXxx のテーブルを設定してください

残りのパラメータは任意入力です。

• useHljs は highlight.js を使ってコードにシンタックスハイライトを行いたい場合は true にしてください。デフォルト値は false です
• image.sizes は img タグの sizes 属性にそのまま渡されます。デフォルト値は '(max-width: 800px) 80vw, 800px' です
• image.loading は img タグの loading 属性にそのまま渡されます。デフォルト値は 'lazy' です

ここまで読んでいただきありがとうございます。
もし興味を持っていただけたら試して頂けると嬉しいです。
宜しくお願い致します。