端的にいうと

Tweetを参照する記事を書くにあたってTwitterの埋め込みプラグインの導入を検討した。本ブログではgatsby-remark-twitterを採用している。

1) Tweet埋め込みプラグイン2種

GatsbyJS公式のpluginとサードパーティー製のremark-pluginを見つけている。

前者はGatsbyJSが外部Scriptを無効化する仕様をplugin経由で回避、埋め込みに対応している。

対して後者はbuild時に該当Tweetを取得し解決済み内容を埋め込む。

gatsby-plugin-twitterはコンテンツ読み込み時にスクリプトが読み込まれてTweet内容が表示される。初めてコンテンツを読み込むタイミングでTweet内容についてTwitterへリクエストを求める。

gatsby-remark-twitterではGatsbyJSのdevelop/build時に内容が解決される。利用者からするとコンテンツのTweet内容はコンテンツの一部として一括して読み込まれる。

gatsby-plugin-twitterはdevelop/build時に軽量となっている。gatsby-remark-twitterはdevelop/build時に時間がかかるが閲覧ユーザー側ではコンテンツ表示速度向上が期待できる。

gatsby-plugin-twitterについては以下のBlogが参考になった。

gatsby-remark-twitterではGatsbyJSの設定ファイルgatsby-config.js 内のgatsby-transformer-remarkのpluginsに以下内容を記述する。plugin記述場所がgatsby-plugin-twitterと異なる点に注意が必要である。

plugins: [
    {

    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
		"@weknow/gatsby-remark-twitter",
	]
    },

  }
];

GitHub Gistの埋め込みプラグインでは、PrismJSとのプラグイン順序での問題が生じていたがgatsby-remark-twitterは問題は発生していないようだ(2021年1月現在)。

最初に記述した通りブログではgatsby-remark-twitterを採用した。理由はプライバシーサポートに表示されるトラッカーの数を抑えたい意図がある。

macOS11(Safari14)、iOS14(Mobile Safari)ではプライバシー情報の一部としてWebサイト間のトラッキングが利用者から確認可能となっているためトラッキングが0ではないにしても少ないに越したことがない。

たsだしTweetを参照する記事が多くなった場合、develop/build速度に影響が出てくる。もしTweetを参照する記事が増えてきた際はgatsby-plugin-twitter使用を検討したい。