メインコンテンツまでスキップ

埋め込みツイート

（Firefox でうまく行かなかったのと mdx ファイルのポータビリティを考えて無効にした。以下の内容は記録として残している。）

Docusaurus でツイートを埋め込む​

これがやりたかった。↓↓

（ツイートの埋め込みが上手く行かない場合はリロードしてください。）

結論から言うと、ツイートのオプションにある「 Embed Tweet (en) / ツイートを埋め込む (ja) 」で得られる下の HTML を貼るだけだった。

<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">just setting up my twttr</p>
  &mdash; jack⚡️ (@jack)
  <a href="https://twitter.com/jack/status/20?ref_src=twsrc%5Etfw"
    >March 21, 2006</a
  >
</blockquote>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>

問題は、 yarn run start のプレビューモードだと埋め込みツイート用 HTML の最後にあるスクリプトが実行されないという点。 docusaurus.config.js で scripts として登録しても HTML の <head> に現れず実行されない。一度 yarn run build してから yarn run serve したらツイートの埋め込みができたのでこれ以上深堀りするのはやめた。ただそれでもたまに埋め込み表示に失敗する。埋め込み用 HTML では <script async となっていて、 HTML がパースされる前に実行されてる？と思い試しに defer としてみたけどそれでも失敗する。どうも他のページから遷移する形でロードすると表示に失敗するみたい。

ツイート内に改行（<br>）があるものについては JSX の記法的に /> が無いとパースの際にエラーとなるので注意。その都度手で <br /> に変えるのが良いだろう。

埋め込みツイートでプライバシーポリシーを書く必要はあるのか？​

おそらく書く必要は無い。 Twitter にログインしていたら、いいね機能とかのために Twitter の Cookie を参照するがそれは Twitter 側のプライバシーポリシーの問題のはず。ブログ側はどの Twitter アカウントが訪れたかは見えないので。

Docusaurus <!--truncate--> の注意点​

ブログで <!--truncate--> を使用する際に、最後にスペース（というか何かしらの文字）があると SyntaxError: Unexpected token となるので注意。エディターで見てもどこがおかしいのがわからずハマってしまった。

npm の scripts の中身​

package.json の scripts が下のようになっている。

  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start",
    // 中略
  },

Windows の PowerShell に直接 docusaurus start と打っても docusaurus がパスに指定されていないので実行できない。この辺りどういう仕組なんだろう。

余談​

Cookie で思い出したが、 Cookie を使わずユーザーを特定できる fingerprinting というものがある。

これも supercookie の一種なんだろうけどよく知らない。

頑張って Tor 使ってヒットマンを雇ったとしても実は囮サイトでこういうので足がつくとかありえそうなのでネットであまり悪いことはできませんね。

見返したい疑問​

今後、見返したいものについては「見返したい」というタグをつける。

  • 他ページからの遷移で埋め込みツイートのロードが失敗する理由。→解決した
  • path に指定していないコマンドが package.json 内の script から起動できる理由。