Blockchain code Metaverse VR

Crypto×VR×SmartContract(559)

スポンサーリンク

//tips

久しぶりにcrunchbaseの探索。

https://www.entrepreneur.com/article/424448

Zora has raised $50M from Haun Ventures to enable anyone to create NFTs

あとはイーロンさんのtwitter買収意図の確認。

https://www.dailymail.co.uk/news/article-10791425/Elon-Musk-plans-fire-1-000-Twitter-staff-quintuple-revenue-69-million-users-paying-3-month.html

https://www.businessinsider.com/elon-musk-new-twitter-product-x-launch-plan-pitch-deck-2022-5

//smart contract

http://localhost:3000/IDでのnft表示順番が一種のランダムになっているが、そちらはどうするかも後で決める。

nftimageを縦横に等間隔に並べる。

<h2>ALL Players</h2>
<Grid container >

{ninja.map((item,index) => (
<div key={index} className={classes.grid}>
{item.storagelink &&
<Grid item  xs={3} md={3} lg={3} >
<img src={item.storagelink} alt="" width="300" height="300" onClick={()=>router.push('/ID/'+item.userid)}/>
</Grid>
}
</div>
))}
</Grid></Grid>
</Grid>

予想以上に手間取ったがこちらにて対応できた。

makestyleには

grid: {
margin: "auto",
},

を追加しておいた。

Imageをクリックするとそれぞれのuseridに紐づいた[id]ページに飛ぶようにしている。

VercelよりVercel - Hobby Case Opened [No Reply]というメールが来ており、エンジニアが返信するから3-4 days待ってねとのこと。

日本の商標は問題なさそうなのでロゴを作ってみるか。

面白そうなのでランサーズなどの日本の機関でオークションをするのではなく海外デザイナーなどが入ってくる99designsを利用してみることにする。

https://99designs.jp/

「99designs」でロゴを発注してみて分かったポイント

念の為next.jsのdiscordにも入れるようにしておいた。いざとなればここで直質問する。

複数回読み込み時のブラウザおよびサーバのコード認識順序で混乱したので、少しnext.jsの復習。

https://nextjs.org/learn/foundations/from-javascript-to-react/adding-interactivity-with-state

https://reffect.co.jp/react/react-useeffect-understanding

イベントを呼ぶ際にはfunction handleOnAuth(e) {とせずに下記のように呼ぶことができるが、eをつけることでe.preventDefault();を組み込めるのでeをつけた方がお得か。

function handleClick() {
console.log('increment like count');
}

stateを使うのはuiからの変更情報をサーバ側に伝えるためで、サーバ側が外部から取得する情報をわざわざstateに格納する必要はないのか。stateが重く、slowにさせている要因だった場合は見直すか。

You can think of state as any information in your UI that changes over time, usually triggered by user interaction.

UIの変更が絡む箇所はstateを絡ませることでスムーズにいく。既に描画されているブラウザでイベントが実行されるとイベント関数が呼ばれてstateの変数がアップデートされるわけだが、このアップデートされたlikesの値はブラウザ側で保存される。

const [likes, setLikes] = useState()

function handleClick() {
setLikes(likes + 1)
}}

return (
<div>
{/* ... */}
<button onClick={handleClick}>Likes ({likes})</button>
</div>
)

React (Next.js) の useState フックは、Web ページの状態を保持するものだが、ページのリロードや、ブラウザの再起動を行うと、その状態はリセットされる。保存先はメモリのよう。

何度もページの読み込みが行われるのはuseeffectの第二変数の受け取り設定が要因。

useEffect(副作用フック)で設定したコールバック関数は、クライアントサイドでのレンダリング時にしか呼び出されず、レンダーの結果が画面に反映された後に動作するようになっている。つまりuseeffectが行われる前に一度関数が読み込まれページが反映された後にuseeffectの関数が実行されることになる。

これはページの更新ではないので他の関数は呼び出されない。

useEffectは画面が描写された後に実行されるので描写前に何か処理をしたいという時にはuseLayoutEffect Hookを利用すれば良いよう。

これは使ったことなかったのでいずれ試す。

人気の記事

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.