Blockchain code Metaverse VR

Crypto×VR×SmartContract(509)

スポンサーリンク

//tips

嶋津さんと打ち合わせ。ベータ版開発市場をターゲットにしているサイトを教えてもらった。ペイしているのかはわからないが、面白い切り口でコミュニティを成長させているなぁと興味深かった。

https://itch.io/

//smart contract

Public下のパスが壊れたものの修復。

src/utils/config.tsの中身を一旦layout.jsの中に入れてみようと思ったがtypescriptをjsに直し、さらにconfigがどう作用していくのかがよくわからなかったので、先にimport Image from 'next/image’で対応した。

こちらが本来のやり方だがvercelのサーバーでデプロイしないと使えない場合があるなどと制限があるもの。

試してみると無事にダイレクトパスの中でもpublicからの画像の引用がうまくいくようになった。

import Image from 'next/image'

export default function MyImage(props) {
//let fname = './' + props.fname
let fname = '/' + props.fname
let size = props.size + "px"

return (
// <img width={size} border="1"
<Image width={size} height="250px" border="0"
src={fname} />
)
}

https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

Layoutに現在おいているアドレス部分を個別のページに移す。

<div>
<Typography variant="h5" >
Address: 0xa242fcb2acbb118ea1b6829efe8b7e2087b00000
</Typography>
<Typography variant="h6" >
Following:200 Follower:200 gifted:2000
</Typography>
<MailIcon /><InboxIcon />

</div>

さらに、db.jsonの中にfetchした情報を上に組み込むための情報源を追加。

"address": "0xa242fcb2acbb118ea1b6829efe8b7e2087b00000",
"conection": {
"Following": "200",
" Follower": "200",
" gifted": "200"
},

これをもとに個別ページにデータを反映させる。

Fetch場所はuseeffectではなきないことを思い出したので、これらの情報もgetStaticPropsから取得する必要がありそう。

useEffect(() => {
fetch('http://localhost:8000/notes'+id)
.then(res => res.json())
.then(data => setNotes(data))
}, [])

また、下記のように試したが、これらのことは特に必要なく、もっとシンプルにできた。

if(notes != data){
setNotes(data)
console.log("done")
console.log(notes.address)
}

console.log("notes")
console.log(notes)
console.log(data[0].address)

結局,getstaticpropsでデータそのものを継承させて、実際の反映箇所に Address: {data[0].address}とdataに入っているaddressの場所を記載すればよかった。

export const getStaticProps = async (context) => {
console.log('context')
console.log(context)

const id = context.params.id;
const res = await fetch('http://localhost:8000/notes'+id);
const data = await res.json();

return {
props: { data,id }
}
}

export default function edit({data,id}) {//{id}

他の箇所も同じく。下記で対応できた。notesの箇所もdataから引っ張る形に変更。data.map(note => (とした。

<Typography variant="h6" >
Following:{data[0].conection.Following} Follower:{data[0].conection.Follower} gifted:{data[0].conection.gifted}
</Typography>

以前聞いていたMulterを利用してimageのアップロードを行うのがベストかと考えていたが、念の為色々探してみると、Multerは主にexpressで使用されるもののよう。

Next.jsではどのように保管・表示するのがベストなのか模索する。

WebPは、サイトを軽量化でき、JPEGやPNG、GIFの各利点と高い圧縮率を兼ね備えたフォーマットだが、まだ採用されていないブラウザもある。

next/imageはJPEGやPNGなどを自動的にWebPの様式に変換してくれているとのこと。

画像最適化についての設定はnext.config.jsのimagesプロパティで行うとのことで先のpublic下に画像を置く話と若干話がつながってきた。

参考:

https://zenn.dev/catnose99/articles/883f7dbbe21632a5254e

Nextjsで画像は何処に置くべきか?Nextjsにおける画像の書き方 2021

Imageの保管場所はfirebaseかと思っていたが最近はSupabaseというものも出ているよう。

https://www.to-r.net/media/supabase-next/

「next.js image firebase」で検索するとザクザクとtipsが出てきたのでそれらをもとに実装していけば良さそう。

まずはfirebaseで試していくことにする。ただ、最近のスクリプトはほぼjsではなくtypescriptで書かれている。jsのものをなんとか探し出す。

https://dev.to/itnext/how-to-do-image-upload-with-firebase-in-react-cpj

typescriptもある程度参考にできるようにYouTubeと書籍で学習しておく。

これを見ているとtsc sandbox.tsとすることでsandbox.jsを複製できることがわかった。これは助かる。

人気の記事

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.