能登 要

札幌在住のiOSアプリ開発者。SwiftUI により分割されたデバイス間を縦横にやりとりできる考え方に転換しています。

iOSアプリ開発者。2009年のiPhoneアプリ開発開始時期から活動。開発言語のアップデートの中でSwiftUIおよび周辺技術に着目中。

GatsbyJS向けTweet投稿組み込みプラグイン2種、plugin or remark-plugin

端的にいうと

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

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

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

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

gatsby-plugin-twitter | Gatsby

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

@weknow/gatsby-remark-twitter | Gatsby

2)各プラグインの特徴

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

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

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

3)使い方

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

GatsbyでYouTubeとTwitter埋め込みTakumon 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使用を検討したい。