Blockchain code Metaverse VR

Crypto×VR×SmartContract(473)

スポンサーリンク

//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&amp;ref_src=twsrc%5Etfw">#BUSINESS</a> HACKER <a href="https://twitter.com/naki_road?ref_src=twsrc%5Etfw">@naki_road</a>より</p>&mdash; 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

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.