//tips
//smart contract
Twitter追加ボタンの方も作成していく。
現在Twitterの表示はidを固定しているのでそちらをtweetのリンクからidを取り出せるようにする。
<TwitterTweetEmbed
// tweetId={item.id_str}
tweetId={'1501574706423808004'}
/>
Tweetidの簡単な取得方法は、リンクをコピーするか、リンクを埋め込むで下記のurlを取得する方法だが、一部異なる点が問題となり、?以降は取得させないようにする。
リンクをコピー
Crypto×VR×SmartContract(505) https://t.co/pQ4td73AB1 #BUSINESS HACKER @naki_roadより
— Nakynx (@naki_road) March 15, 2022
Tweetを埋め込む
Crypto×VR×SmartContract(505) https://t.co/pQ4td73AB1 #BUSINESS HACKER @naki_roadより
— Nakynx (@naki_road) March 15, 2022
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を入力させる。
