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

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

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.