更新

2022/03/06：更新

v6.0.0にてGatsby 4.xに対応した。

ユーザー側に特に大きな変化はないので、今のところ特に追加の設定は不要。

どんなプラグインか

Gatsby.jsのwebサイトにYoutubeを初めTwitter, Opotify, SoundCloud, Instagram, などなど(他にもある）色々なメディアを貼り付けられるプラグイン。

2019/07で登場した比較的新しいプラグインだ。

実例：URLを貼り付けるだけで動作

タグ等なにも入れずにhttpから始まるURLを直接貼り付けるだけで動作する

例：Youtube

上の例は直接リンクをmdファイルに貼り付けただけ。

動画が埋め込まれたくない場合はリンクにしてしまえば動画が直接張り付くことはない。

【初音ミク】 アクアノート1/f(remix) 【セルフリミックス】 - YouTube

例：SoundCloud

例：Twitter

なんとなく五徳を見つめてたのですが、
めっちゃ強いチャクラムに見えてきました。 pic.twitter.com/aXxe0maaJq

— 仮想トイレ (@CrypticToilet) January 2, 2020

★Twitterはスクリプトが含まれるのでテキストに変換されるそうだ。公式でgatsby-plugin-twitterをおすすめしている。

★Pinterestも同じ理由で正しく表示されない。別途gatsby-plugin-pinterestが推奨されている。

導入方法

インストール

npm install gatsby-remark-embedder

gatsby-config.jsに登録

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-embedder`],
    },
  },
];

これで準備完了。非常に楽だ。

注意：すでにgatsby-transformer-remarkがインストール済みであればgatsby-remark-embedderを必ず既存optionsの中に入れること(gatsby-transformer-remarkを2回読み込んでしまうと動作しない)

gatsby-transformer-remarkはマークダウンを読みこむプラグインであるため恐らく殆どの人がインストールしているのではないだろうか。注意されたし。

v2系からv3系へアップデートされた

2020/09/09追記

この記事を執筆したのがv2系だが最近v3へとアップデートされた。

古いプラグインを3系にアップグレードする場合はpackage.jsonのバージョンを書き換えるだけで正常動作することを確認。

Twitchが貼り付けられるように変更されている。

HTTPSのサイトでないと貼り付けられないとのこと。また、貼り付けるサイト側のURLをオプションで指定しないと動かなそうなので注意。

私は使ったことがなくサンプルが出せなくて申し訳ないが公式を参照のこと。

MichaelDeBoey/gatsby-remark-embedder: Gatsby Remark plugin to embed well known services by their URL.

所感

特別こちらでスタイリングするオプションがないので見栄えが人によっては難点かもしれないが、とにかくURLを貼り付けるだけで自動変換なので楽だ。

変換されたくない場合はコードブロックにするなどで対応することも出来る。

https://www.youtube.com/watch?v=SOX183a2N-U

おまけ

このプラグインで対応していない別のサービスを読み込んで自前でタグを追加して貼り付ける「カスタムトランスフォーマ」機能も付属している。

特別必要ではないため実験しておらず説明は省略する。

気になる場合は公式(gatsby-remark-embedder)を参照していただきたい。