//tips
//Smart contract
まずは一度twitterの埋め込みコードをそのまま貼り付けて確認。ある程度は表示できた。
<blockquote class="twitter-tweet"><p lang="nl" dir="ltr">Crypto×VR×SmartContract(472) <a href="https://t.co/LlAfeUxSBr">https://t.co/LlAfeUxSBr</a> <a href="https://twitter.com/hashtag/BUSINESS?src=hash&ref_src=twsrc%5Etfw">#BUSINESS</a> HACKER <a href="https://twitter.com/naki_road?ref_src=twsrc%5Etfw">@naki_road</a>より</p>— Nakynx (@naki_road) <a href="https://twitter.com/naki_road/status/1491788435799314433?ref_src=twsrc%5Etfw">February 10, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Scriptタグの最後の一部を分離し、useEffect(() で設定することで綺麗に表示することができた。
useEffect(() => {
const tweet = document.createElement('script');
tweet.setAttribute('src', 'https://platform.twitter.com/widgets.js');
tweet.setAttribute('defer', 'true');
document.head.appendChild(tweet);
}, []);
script要素はプロジェクトフォルダ内のインラインスクリプトの記述、または外部スクリプトの読み込みに使用されるもので、よくhtmlの中にjsのscriptを挿入していたもの。
これには属性があり、ここではdeferを使用している。
async：可能ならば、スクリプトを非同期で実行するように指示し
defer：ブラウザに対して、スクリプトの読み込みを待たないように指示
type：スクリプト言語を指定、「text/javascript」のように、MIMEタイプを使う
スクリプトのバージョンを指定するときは、version=x.xの形式でMIMEタイプに続けル。
language：type属性と同じく、使用されているスクリプト言語を指定
charset：スクリプトの記述に用いられている文字セットを指定
crossorigin：通常の script 要素は標準の CORS チェックに通らないスクリプトに対して、window.onerror (en-US) に最小限の情報しか渡さない。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用する。
src：この属性は外部スクリプトの URI を指定。文書に直接スクリプトを埋め込む代わりに使用する。
下記のようにするのはスクリプトタグを非同期でサーバ側で動的に実行したい場合である。
var script = document.createElement('script');
script.setAttribute('src', 'path/to/script.js');
document.head.appendChild(script);
埋め込みtweetの表示では<blockquote>を<iframe>へ置き替えるなどのHTMLの変換をplatform.twitter.com/widgets.jsで行なっている。
ReactやVueなどのJavaScriptフレームワークでは、コンポーネント内でそのまま埋め込みコードを貼り付けても、<script>が実行されない。そのため、widgets.jsをコンポーネントのマウント後に読み込むためにuseEffectを使っている。
ReactにおけるComponentがレンダリングする場面は，マウントと再レンダリングがあり、マウントでは，フルにDOMを生成し，親要素にマウントするのに対して， 再レンダリングでは差分を計測し，レンダリングの必要があるものに対して，最小限の更新を行う。
マウント処理の中にレンダリングは含まれるが、レンダリングはマウント時のみ動くわけではなく、アップデートされる際にも動く。マウントは初期の読み込みと考えれば良さそう。
Tweetの基本となるコードの blockquote 要素に対して属性を追加することでツイートの埋め込みをカスタマイズすることができそう。
data-theme="dark" 配色をダークモードで表示
data-cards="hidden" 画像や動画を展開せず表示
data-conversation="none" 元のツイートを含めない
<blockquote class="twitter-tweet" data-theme="dark">
また、widgets.jsの処理ではdocument.bodyから埋め込み対象となる要素（twitter-tweetクラスを持つblockquote要素）を探すよう。だからuseeffectでコンポーネント再読見込みの際に実行してもtweet部分に反映されることがわかった。
blockquote class="twitter-tweet”を探して実行する機能があるとのことで納得。
https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview
探していると埋め込み型のtimelineも簡単にtwitter側で提供してくれることがわかった。
<a class="twitter-timeline" href="https://twitter.com/naki_road?ref_src=twsrc%5Etfw">Tweets by naki_road</a>
だが、表示数などをカスタマイズしたいし、サイト訪問者によって表示も変えるまたはページを生成する必要があるので実際に使うわけにはいかない。
Apiを叩いて取ってくる必要がある。
https://developer.twitter.com/en/docs/twitter-api/tweets/timelines/api-reference/get-users-id-tweets
参考：
https://zenn.dev/catnose99/articles/329d7d61968efb
細かい部分の確認。
Document.head：
Document インターフェイスの head は読み取り専用のプロパティで、現在の文書の <head> 要素を返す。下記のようにheadタグの属性を引っ張ってこれる。
<head id="my-document-head">
<title>Example: using document.head</title>
</head>
<script>
var theHead = document.head;
console.log(theHead.id); // "my-document-head";
新しく作成したノードまたは既存のノードを、対象のノードの子ノードの中の最後に追加するには、.appendChild()を用いる。要素の集合体をノードという。
// 新しいP要素が作られ、bodyの最後に追加
var p = document.createElement("p");
document.body.appendChild(p);
next/scriptを使うことでhtmlのscript機能を拡張でき、外部ソースを活用できるので導入してみる。
import Script from 'next/script'
これでreturn下に下記を挿入。
<Script
src="https://connect.facebook.net/en_US/sdk.js"
strategy="lazyOnload"
onLoad={() =>
console.log(`script loaded correctly, window.FB has been populated`)
}
/>
検証モードのコンポーネントで`script loaded correctly, window.FB has been populated`のログを確認することができた。
strategy controls when the third-party script should load. A value of lazyOnload tells Next.js to load this particular script lazily during browser idle time
onLoad is used to run any JavaScript code immediately after the script has finished loading. In this example, we log a message to the console that mentions that the script has loaded correctly
