Gatsby画像はheadlessCMSから切り離せる？
Closedfirst published: 2018/12/23last updated: 2019/01/15
雑記ブログの画像は有料のGyazo（名前紛らわしい）に上げているので、あんまり関係ないのだけど、Contentfulやその他headlessCMSに画像をアップしていた場合、DLして再配置できるのかな。
普通にremarkでMarkdownをHTMLにすると、画像パスはheadlessCMSのURLになる。これだと、サイトにアクセスするたびにContentfulとかにリクエストがカウントされることになる。
SSRの場合はしかたないにしても、静的に書き出しておいてカウントされるのは微妙。分離する方法はあるのだろうか？可能なら、メディア管理の優れたheadlessCMSにそのまま画像をUPしたい。
gatsby-remark-copy-linked-files というプラグインが、Markdown内のパスを読み取ってローカルに画像をコピーするらしい。しかし、入れるだけでは効果がなかった。
Markdownと同じ場所に画像を置く必要があるって書いてあるのだけど、それってコピーして使う意味あるのだろうか？
createRemoteFileNode という関数でリモートファイルの解析ができるらしい。もしや、これが使える？
gatsby/packages/gatsby-source-filesystem at master · gatsbyjs/gatsby
Airtableで画像をローカル処理
Airtableは gatsby-config.js のプラグイン設定（mapping）でfileNodeとして認識させればローカルでgatsby-image処理ができた。gatsby-transformer-sharpも必要になる。
ただ、画像100枚のサイトの場合にデプロイ時間は30秒から2分に増加。Airtableはリクエスト数がプランに影響しないので、無理に画像処理をかける必要はないかと。
その他のheadlessCMS
いくつかのheadlessCMSスターターを確認したところ、GraphQLにローカル画像処理の項目が見つかる。どうやら、Fieldが画像と決まっているものは処理しやすいらしい。
prismicのスライスなどは特に使いやすく、処理を施せばリスエスト数の削減になって良さそう。
逆に、Markdown内の書いているインライン画像のパスを拾ってローカル処理するような方法は難航しているよう。gatsby-mdxの発展が実現に繋がる予感。
個人的には、リクエスト数にとらわれないCMS（Airtable・WPcom）を使うようになったのと、ビルド時間の増加というストレスが嫌なのもあり、この検証は一旦ここまでとする。