Blockchain code Metaverse VR

Crypto×VR×SmartContract(548)

スポンサーリンク

//tips

//smart contract

昨日editページにてコンテンツ登録のフォームを作成したが、コンテンツがあるものとないもので表示する分岐を作ることと、一部のコンテンツタイトルを編集できるようにしたい。

Twitterは文字の記載が入るので内容がわかるが、youtubeの方は画像表示のみなので、タイトルを可変にするか、各動画にコメントをつけられるようにするかどうかを考える必要がある。

シンプルにタイトル部分をこちらでつけてあげるとスッキリしてみやすかったので採用。タイトルはこちらで設定する形で良いかも知れない。

各youtubeの掲載の下に簡易コメントをつけられるようにする。

{ninja.map((item,index) => (
<div key={index} >
{item.youtubeId&&(
<div>

<iframe width="560" height="315"
src={`https://www.youtube.com/embed/${item.youtubeId}`}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
</iframe>

<Typography variant="h5" component="h1" gutterBottom>
my favorite music
</Typography>

</div>
)}
</div>
))}

普通にTypographyをつけるだけで対応できるが、もう少し吹出し風にしたいのと最終的には格納された変数をとって表示させたい。

カードで調整できることが気がつき色々調整。

ただ、右端に生じる微妙な隙間が気になり何とか真ん中に合わせられないかを模索。

<Box sx={{ justifyContent:'center'}}>
<Card variant="outlined" sx={{height: 70}} gutterBottom>
my favorite music
</Card>
</Box>

https://stackoverflow.com/questions/53183297/material-ui-card-will-not-center-react-js

昨日使用したボックス技はあえなく撃沈。gridは既に使用しているのでさらに使うのはためられるので却下。

<Card variant="outlined" className={classes.cardmargin} sx={{height: 70}} gutterBottom>
my favorite music
</Card>

cardmargin:{
display:'flex',
justifyContent:'center'
}

<Box className={classes.cardmargin}>
<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
my favorite music
</Card>
</Box>

数多の挑戦の末、やっと効果があるのを見つけた。%を指定して強引に調整。

cardmargin:{
'margin-left': '5%',
width: "95%",
}

<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
my favorite music
</Card>

さて、表示する欄はできたのでここに組み込む変数を作成する。

現在YouTubeの登録はedit.jsの方で下記のようにYouTubeの動画urlを登録できるようになっている。ここを調整していく。

youtube id 登録・更新
<form noValidate autoComplete="off" onSubmit={handleOnYoutubeCard}>

<TextField
onChange={(e)=>setYid(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>

記入されたコメントを保管できるように設定。
onChange={(e)=>setYcomment(e.target.value)}

async function handleOnYoutubeCard(e) {の中身の追加修正へ。

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
youtubeId:final[0],
ycomment:ycomment
})

ここでycommentとしてデータベースに追加したのでpile.ycomment = data.ycomment ?data.ycomment:nullで追加。

こちらで登録しておくと抽出した際に下記で表示されるはず。

<Card variant="outlined" sx={{height: 70}} className={classes.cardmargin} gutterBottom>
{item.ycomment}
</Card>

一旦データベースに直接書き込んで様子を見る。

[id]ページの方では、きちんと登録されたycommentの値が反映された。

Editで実装するにあたりid4ではコンテンツを見れなかったのでid1に切り替え、そこでdelete処理の際に一緒にycommentの方も削除されるように設定する。

onClick={()=>handleDeleteYoutube(item.docid)}

const handleDeleteYoutube=async(id)=>{

console.log(id)

const docRef=doc(firebaseApp,"mydata",id.toString())

deleteDoc(docRef).then(()=>{router.reload()})

}

素晴らしい。一緒のドキュメントに生成するのでドキュメントごと消せば問題なさそう。善い哉。

文字がカードの枠に張り付いているのが気になる。カードから文字を若干離せないかも試すことにする。

 

人気の記事

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.