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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.