白黒ピクセルアートNFTを作りました (MonoPixelNFT)
NFT第3弾として、白黒の16x16ピクセルアートのNFTを作りました。
- フルオンチェーンNFT
- ピクセルアートを描いて、それをNFTとして発行できます(ガス代のみ)
- 同じピクセルアートは1枚しか発行できません
- Polygonのメインネットに公開
- ピクセルアートを作成するためのUIサイトも作りました
使い方
まずUIサイトにアクセスしてください。
- 16x16サイズの白黒ピクセルアートを描く (マウスポチポチ)
- ピクセルデータがuint256のTokenIDに変換される
- [Connect MetaMask]ボタンでMetaMaskに接続 (ネットワークは Polygon Mainnetに設定してください)
- [Claim NFT]ボタンでNFTを発行する
という手順です。
直コンがいいという方は、2のTokenIDをコピーして、Polygonscanで claim関数の引数に指定してください。
なぜ白黒の16x16サイズにしたのか
16x16サイズの白黒ピクセルアートのデータ量は 16x16x1bit = 256 bit です。 256 bitといえば、NFTを区別するためのTokenIDも256 bit (uint256)です。 ということは、ピクセルデータをTokenIDとして保存できるんじゃないか?、と思いついたのが今回のNFTを作るきっかけです。
ピクセルアートの右下のピクセルを0番目のbit、左上のピクセルを255番目のbitとして、uint256に変換します。 ピクセルが白ならば1、黒なら0です。 UIサイトでエディタを触りながら、下に表示されるTokenIDを見てもらえれば、なんとなくわかると思います。
同じピクセルアートは同じTokenIDとなります。そのため、同じピクセルアートは1枚しか発行できません。
UIサイトについて
今回はコントラクトはわりと簡単にできたのですが、UIサイトに苦労しました。 Reactとweb3.jsの勉強しながら作ったのですが、Webアプリ開発になれていないので大変でした。 本当はCSSフレームワークを使ってかっこいいサイトを作りたかったのですが、そこまで余裕がなく、、、 次回の課題とします。
ホスティングはVercelを使いました。最初はNetlifyを使ったのですが、ページの表示にすごく時間がかかるので調べてみると Netlifyは日本からのアクセスはかなり遅いようです。Vecelに乗り換えるとサクサクになりました。 どちらもGitHubと連携できるので、GitHubにpushすれば自動的にビルド&公開されるので便利です。
コントラクトのコード解説や、React関連の話は、また後日記事にしたいと思います。 UIサイト完成で燃え尽きてしまったので、今日はこのくらいにしておきます。