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

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