Blockchain code Metaverse VR

Crypto×VR×SmartContract(506)

スポンサーリンク

//tips

//smart contract

Twitter追加ボタンの方も作成していく。

現在Twitterの表示はidを固定しているのでそちらをtweetのリンクからidを取り出せるようにする。
<TwitterTweetEmbed
// tweetId={item.id_str}
tweetId={'1501574706423808004'}
/>

Tweetidの簡単な取得方法は、リンクをコピーするか、リンクを埋め込むで下記のurlを取得する方法だが、一部異なる点が問題となり、?以降は取得させないようにする。

リンクをコピー

Tweetを埋め込む

textfield部分はmediumの際と同じ流れを取れる。

Tweet Card
<form noValidate autoComplete="off" onSubmit={handleOnTweetCard}>
<TextField
onChange={(e)=>setTid(e.target.value)}
//className={classes.field}
//label="Note Title"
variant="outlined"
color="secondary"
fullWidth
required
//error={titleError}
/>

<Box textAlign="center">
<Button
type="submit"
varient="contained"
>
submit
</Button>
</Box>

</form>

{mytwt && (
<div>
<TwitterTweetEmbed
tweetId={mytwt}
/>
</div>
)}

一部変数が取得できたタイミングでtweet cardを表示させるようにしており、idの数字を直接渡して反応を確かめたところ{mytwt}で正常に機能した。

ここからはリンクの必要部分を切り出す工程に移る。/で区切り、分割して取得すると下記のような形となった。

var result = endpoint.split( '/');
console.log(result);

['https:', '', 'twitter.com', 'naki_road', 'status', '1503737213108232197']

['https:', '', 'twitter.com', 'naki_road', 'status', '1503737213108232197?s=20&t=KjBi4Yu542wu9S14pqn7Eg']

2段階目に?で分割すれば取得できそう。

async function handleOnTweetCard(e) {
e.preventDefault();

const endpoint = tid;

//const feed_url = "https://medium.com/feed/@"+uname;

// 区切り文字を「正規表現」で指定
var result = endpoint.split( '/');
var rnum=result.length;
console.log(rnum);

var fresult = result[rnum-1];

console.log(fresult);
var final=fresult.split('?');

console.log(final[0]);

setMytwt(final[0])

}

こちらにてどちらの場合もtweetidを取得できるようになった。

Twitterのタイムラインの取得にはouthが必要なため、outhが有効に機能する範囲で取得するとなるとリアルタイムでの反映にはならなさそう。自分だけではなく他の人も見るので、sessionが切れてしまった後に他人が見る場合にはエラーなどになるのではないかと考えられる。

表示したいtweetを選択して、tweet idで指定してもらう方がよさそう。

Youtubeなどのapiも後で追加する。

一人で使用する場合の単一ページの構成としてはある程度形になったので複数人で利用できる形に整える。

Wallet addressは一意なので、そちらをアプリのidとして登録していくことにする。

Idの登録ページとidの登録場所が必要で初期登録の機能とその際に保管されるidとpass、保管場所を決める必要がある。

Dynamic routesの設定で
index/id
Index/2
Index/13
などと分岐させていくように考える。

Pagesフォルダの中にIDフォルダを作成し、その中に[id].jsを作成。

const Details = () => {
return (
<div>
<h1>Details Page</h1>
</div>
);
}

export default Details;

を記載するだけで簡単な表示をすることができた。

http://localhost:3000/ID/1

App barからaddressの箇所などをこちらに引き継ぐ必要がある。

このページにはindexページのみからアクセスさせたいので、indexにLinkで移動させる。

その際には移動先のidを入力させる。

人気の記事

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.