Blockchain code Metaverse VR

Crypto×VR×SmartContract(470)

スポンサーリンク

//tips

//smart contract

選択したアドレスデータの内容を表示するinfo.jsファイルを作成。

ここでは複数のドキュメントを取得し、表示している。アクセスしているアドレスデータのドキュメントにあるmessageコレクションにメッセージを追加。

2つのgetで並行して結果を受け取るようにしており、一つ目がログインアカウントのメールアドレスのドキュメント、2つ目はその中にあるコレクションを取り出している。

// アドレスデータとメッセージを取得し表示
useEffect(() => {
if (auth.currentUser != null) {
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id).get()
.then((snapshot)=> {
setMydata(snapshot.data())
})
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id)
.collection('message').orderBy('time', 'desc').get()
.then(snapshot=> {
const data = []
snapshot.forEach((document)=> {
data.push(<li className="list-group-item px-3 py-1">
{document.data().comment}
</li>)
})
setMsgdata(data)
})
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id).update({flag:false})
} else {
setMessage("no data")
}
}, [message])

メッセージの送信設定としては、ログインユーザーのmessageにメッセージを追加、送信先のアカウントのmessageにメッセージを追加、送信先のアカウントにあるログインユーザーflagをtrueに変更という処理を行なっている。

全ての処理が完了してから出ないとリダイレクトできない非同期の入れ子構造になっている。

// 自身のアドレス内にメッセージを追加
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id)
.collection('message').add(to).then(ref=> {

// 相手のアドレス内にメッセージを追加
db.collection('address')
.doc(router.query.id)
.collection('address')
.doc(auth.currentUser.email)

.collection('message').add(from).then(ref=> {
// 相手のアドレス内のflagを変更
db.collection('address')
.doc(router.query.id)
.collection('address')
.doc(auth.currentUser.email).update({flag:true}).then(ref=> {
router.push('/address')
})

メッセージを追加した後、新着メッセージのフラグをupdate({flag:true})としてtrueに更新。

これはfirestoreのdb.collection('address').doc(router.query.id).collection('address').doc(auth.currentUser.email)にflagフィールドが存在していない場合、エラーになる。
お互いのデータがアドレス帳に登録されていないとこのメッセージアプリは使えない。

ここまでで大まかな外観が掴めたので、ここから自身のページをnext.jsで作成していく。コンポーネントを横に並べて配置したいのでそちらの方法を模索。

Bootstrapでは、サイトの横幅を均等に分けるガイドラインをグリッドと呼び、12本のグリッドでレイアウトを決める機能がある。

このグリッドに沿って表示物を配置していけないか考えていく。グリットを使う表示物を集めたコンテナのなかに横並びの行rowとその行を構成する要素カラム.colがある。

.container
-.row
—.col

例えば、.col-md-4と記述すると、画面幅がMiduim以上のときはグリッドを4個持つカラムを生成することなどができる。

下記のようにすると行を二つに分割し、更に片方のブロックを分割して利用することができる。

<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-2"><p>bootstrap</p></div>
<div class="col-lg-2"><p>bootstrap</p></div>
<div class="col-lg-4"><p>bootstrap</p></div>
</div>
</div>
<div class="col-lg-4"><p>bootstrap</p></div>
</div>

colで分割したものを更に分割するとその際には親の分割分を12として記載していくことがわかった。これはnext.jsというよりはbootstrapの内容だった。色々模索中。1からcssまで書かなければいけない事態にならないことをお祈り。

人気の記事

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.