Blockchain code Metaverse VR

SmartContract×VR×Crypto(591)

スポンサーリンク

//tips

//smart contract

ドキュメントごとのBoard表示方法の模索。現状全てのメッセージ内容を抜き出して表示させることはできたのでindexに応じて表示を替えるように設計する。

Indexを格納し、その数値が異なった場合に分岐するようにできるか考える。

問題なのはblocks.map((item,index) => ( と item.map((i,index)=>(の間にタグを入れられないこと。これにより切り替えが難しい。

return (
<div >
{blocks.map((item,index) => (
item.map((i,index)=>(
<div key={index} >
<Card>
{i}
</Card>
</div>
))
))}
</div>
)
};

この段階まで分割できているのでindex0の時の[0][1]…などととれれば良い。

0: (2) ['naki:ららら', 'nak:あああ']
1: (2) ['naki:hi', 'nak:great']

returnの外で対応するか。

returnで返したいoutputは

<div>
<div><card></card></div>
<div><card></card></div>
</div>

の形。

なので下記の形にできるようにblocksの方を加工してあげる必要がある。

return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<Card>
{item}
</Card>
</div>
))}
</div>
)

{item} の中に入れたい塊は
<div>naki:ららら</div>
<div>nak:あああ</div>
などとされたセット。

items.pushを元のitems.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)に戻す。

こちらにて無事に分割対応できた。

var rap = () => {

const items = [];
//const blocks = [];

for (let i = 0; i <item.length; i++) {
console.log('item[i]')
console.log(item[i])
console.log(item.length)

for (let s = 0; s <item[i].text.length; s++) {
console.log('item[i].text[s]')
console.log(item[i].text[s])

items.push(<div >{ item[i].text[s].username }:{ item[i].text[s].chat }</div>)
//items.push(item[i].text[s].username+":"+item[i].text[s].chat)
}

console.log("items0")
console.log(items)
blocks.push(items)
items = []
console.log("items")
console.log(items)
console.log(blocks)

}
//vroop(blocks)

//return <div >{ items }</div>;
return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<Card>
{item}
</Card>
</div>
))}
</div>
)
};

Cardの表示を加工し、cardごとに別の形に見せられるように変更を加えていく。

Boardedit({item}) {のなかにmakestyleを組み込んでいく。

まずはCardに枠線をつけたい。

<Card sx={{ border: 1 }}> にて適応できた。

次に表示範囲を左右一杯ではなく、三等分づつで横にバラけるようにしたい。

return (
<div >
{blocks.map((item,index) => (
<div key={index} >
<div className={classes.balancer}>
<Grid item xs={12} md={6} lg={4} key={index} >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>
</div>
</div>
))}
</div>

const useStyles=makeStyles({で下記を導入。

balancer:{
display:'flex',
},

Gridを導入。なかなか横に並ばない。どうしたもんか

return (
<div >
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>

{blocks.map((item,index) => (
<div key={index} >
<Grid item xs={12} md={6} lg={4} >

<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>

</div>
))}
</Grid>

</div>
)
};

横に並べることはできても表示がおかしいのは却下なので、ブラウザの検証からコンパイル済みのコードを読みどうなっているのかを確認。

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12 MuiExample_Component-balancer css-1idn90j-MuiGrid-root">

ここまでは横幅マックスで取れている。

<div>
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-4 css-1e6jbaj-MuiGrid-root">

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-i8d1a0-MuiPaper-root-MuiCard-root">

<div>naki:ららら</div>
<div>nak:あああ</div>
</div></div></div><div>

<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 MuiGrid-grid-lg-4 css-1e6jbaj-MuiGrid-root">

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-i8d1a0-MuiPaper-root-MuiCard-root">

<div>naki:hi</div><div>nak:great</div></div></div></div></div>

Gridの分割割合のしては逆効果のようなので外す。

<div >
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>

{blocks.map((item,index) => (
<div key={index} >
<Grid >
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>

</div>

こうするとCardがそのそも保有している横幅に合わせて表示された。

ついに下記の形でスッキリと表示させることができた。<div>が邪魔になっていたよう。

<div >
<Grid className={classes.balancer}>

{blocks.map((item,index) => (
// <div key={index} >
<Grid item xs={12} md={6} lg={3} key={index}>
<Card sx={{ border: 1 }}>
{item}
</Card>
</Grid>

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

</div>

このBordの情報にtitle情報も組み込めるようにする。

Indexがドキュメントブロック単位に分かれているので 大元の引数itemをxitemに入れたものから抽出した。

{blocks.map((item,index) => (
<Grid item xs={12} md={6} lg={3} key={index}>
<Card sx={{ border: 1 }}>
{xitem[index].title}

作成タイミングのitemスタンプの追加とボードのタイトルとタイトル内容の記述を表示させ、それをクリックしたら各メッセージ内容に飛ぶようにする。

5ちゃんねるの構成がシンプルで良い。見本にする。誰に対するreplyなのかも指定できるようにしてあげる必要がありそう。

人気の記事

1

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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