R note

GatsbyJSでMarkdownに記述した画像をサーバにコピーして最適化する方法

GatsbyJS

このサイト(R note)も、ロゴも入ってだいぶ「らしく」なってきました。

で、次は記事に入れる画像をどうやって処理するか迷っています。記事はマークダウンで入力してGatsbyJSで変換してるんですが、他のサイトにホストされてる画像にマークダウンでリンクするだけじゃ芸がないし。

要検討事項

以下を調べて実装する必要があります。

  • 画像をどこにアップするのか
  • 画像のURLを取得してマークダウンに記述する方法
  • 画像をGatsbyで作る静的サイトに取り込む方法
  • 画像を最適化してページに表示させる方法

Airtableに画像をアップ

Airtableにも画像をアップできるんですけど。アプリやサイトでURLを取得する方法がわからないのでマークダウンに記述できない。APIからならURLを取得できるけど、記事の執筆時にAPIにアクセスできないし。

...と、思ったら、URLのコピーできました。Macアプリの場合は、画像をクリックして表示してから右クリックするとURLが取得できました。

Macアプリの画像のURLのコピー画面

iOSアプリでは画像を表示させてシェアアイコンをタップして「コピー」をタップすると画像のURLがクリップボードにコピーされました。

GatsbyJSの画像関連プラグインを活用したい

GatsbyJSには画像を最適化する便利なプラグインが用意されていて活用したいんですが、オフィシャルのドキュメントにはMarkdownに記述した画像をどうプロセスするかは書かれていません。

どうすれば!?

で、検索してみたら、幸いぴったりそうなのがありました。

今度やってみよう。

つづく...