（Firefox でうまく行かなかったのと mdx ファイルのポータビリティを考えて無効にした。以下の内容は記録として残している。）
以前書いた、埋め込みツイートが表示されない問題が解決できた。
ツイートの埋め込みが上手く行かなかったのは Docusaurus の prefetching / preloading (Link 1, Link 2) という機能のためだと思われる。詳しくは理解していないが、これはユーザーがアクセスしそうなリンク先の HTML や JavaScript ファイルなどをキャッシュに保存して、実際にリンクがクリックされるとキャッシュからロードしてくれるらしい。そのため埋め込みツイート用 HTML の script タグ内の JavaScript が async でも defer でも呼び出されなかったものと思われる。
というわけで、 MDX で関数コンポーネントをレンダーさせて React の useEffect を使って強制的に埋め込みツイートを表示させるための関数を呼び出せないか試してみた。
JavaScript ファイル内に外部ページからスクリプトをインポートする方法がなさそうなので、 https://platform.twitter.com/widgets.js にあるコードをコピペして、
export let bigFunction = function () {
/* https://platform.twitter.com/widgets.js の中身をコピペする */
};
とし、これを違うコンポーネント内の useEffect で呼び出すようにする。
export const ReloadEmbeddedTweet = function () {
useEffect(bigFunction);
return <div></div>;
};
最後に、ブログ記事の MDX 内で
import { ReloadEmbeddedTweet } from "../src/components/BlogComponents";
// 1行空ける
<ReloadEmbeddedTweet />;
とすれば埋め込み表示に成功する。
Twitter が提供してる js ファイルをバックエンドに保存して呼び出すのは著作権的に ok ？
これは正直わからない... 怒られたら消します。
追記： oEmbed API というのがあるらしい。調べてみる。
<script src="…"></script> って same-origin policy に引っかからないの？
今回コード書きながら思ったのが、<script src="…"></script> は same-origin policy に引っかからないのか、ということ。
MDN の Same-origin policy の記事にはこう書いてある。
Here are some examples of resources which may be embedded cross-origin:
- JavaScript with
<script src="…"></script>. Error details for syntax errors are only available for same-origin scripts.
なので same-origin policy には引っかからないらしい。
見返したい疑問
- Twitter の oEmbed API
- CORS まわりがやっぱり全然わかっていない。今度こそ理解する！