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

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、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.