【保存版】シークレット フルオンチェーンNFTの作り方（入門編）
こんにちは、CryptoGamesの高橋です。
「TCGVerse」の会社です。
【お知らせ】
— 小澤孝太@CryptoSpells / CryptoGames CEO (@kotaozawa) February 8, 2022
全てのNFTで遊べる世界を実現するNFTゲーム「TCGVerse」が、ゲームに特化したブロックチェーン「Oasys」を採択することをお知らせいたします#Oasys #TCGVerse #cryptospells #NFThttps://t.co/17hQHvd93M pic.twitter.com/4NNPrApIiL
またCryptoMaidsのアンバサダーもやらせていただいております。
本日は、SVGデータをEtherscanから渡してNFTを作成する方法やシークレットフルオンチェーンNFTの作り方を紹介していきます。
では、やっていきましょう。
１ Remixからデプロイを行う
まずはコントラクトのデプロイを行いましょう。
こちらのRemixから行っていきます。
新しいワークスペースを「＋」で作り、テストとして用意されてあるコントラクトを「Delete All」で削除しましょう。
削除したら、「FullOnchain11.sol」「Base64.sol」というファイルを「contracts」フォルダに作り、次のコードをコピペしましょう。
コードは下になります。
https://rinkeby.etherscan.io/address/0x74c191013bead56ec23cd1a19847405798ea60bf#code
ポイント
コード内容を何も変えずに、コピペを行うと、Etherscanの「verify」という処理が不要になるため、楽だと思います。
コンパイル・デプロイについては、下の記事の１６章・１７章をご確認ください。
なお、今回は「コンストラクタ」に渡す引数はなく、「deploy」後に特に何か行う必要はありません。
デプロイが完了しましたら、「view on etherscan」から「etherscan」に行ってみましょう。
＜コードを変えた場合は？＞
コードを変更した場合にはEtherscanでverify(検証)が必要となります。
こちらの記事をご参照ください。
２ Etherscanから設定を行う
２ー１ ウォレット接続する
下のように、「Connect to Web3」でウォレット接続します。
「Rinkeby」のネットワークになっていることを確認してください。
２ー２ 基本設定をする。
「Write contract」から色々と設定を行いましょう。
①Name
下のように任意のNFTの名前を設定しましょう。
②Description
下のように、任意のDescriptionを設定しましょう。
２ー３ SVG画像を設定する
① シークレット画像を設定する
シークレット画像にするSVGを右クリックしてコードを表示しましょう。
コードが表示されればエディタは特に問いません。
ちなみに画像はこちらから持ってきました。
<svg> ~ ...</svg>までを全てコピーします。
下の「setUnRevealedImage」にそのまま貼り付けて、更新しましょう。
これでシークレット画像の設定は完了しました。
② トークンIDごとの画像を設定する
今回はトークンID：１のSVG画像を設定しましょう。
①と同様に設定する画像のSVGのコードを取得します。
ちなみに、今回はこの画像を使いました。
先ほどと同様にコピーして
「setImages」に設定します。
今回は「どのトークンIDにどの画像を設定するか」というものなのでトークンIDも下のように設定します。
これで設定が完了しました。
他にも設定したい場合は同様に設定してみてください。（トークンID：１〜１０で設定ができます。）
２ー４ ミントを行う
下のようにミントを行いましょう。
「_to」にはミント先のウォレットアドレスを指定します。
２ー５ 表示を確認する
では、実際の表示を確認してみましょう。OpenSeaのテストネットで確認します。
下のようにnameやdescription、画像が設定されています。
画像はシークレット画像として設定した画像が表示されています。
２ー６ シークレット画像を解除する
下のように「setReveal」を実行します。
これでシークレット画像が解除されたはずです。
やや待ってから、「Refresh metadata」を押してからリロードすると。。
このように画像が変わりました！
これで成功です。
３ コードを見てみよう
では、実際内部的に何が行われていたのかをコードを見てみましょう。
３ー１ SetName、SetDescription
① 設定部分
下のようになっていました。その名の通り、nameやdescriptionをセットしていました。
「public」とすることで、外部のEtherscanからも見えるようにし、「onlyOwner」で「owner」しか実行できないようにします。
また、require文を設定することで値が入っていない時だけ実行するようにします。
これにより、値の書き換えを不可としています。
② 表示部分
①で設定した値は、tokenURI()で使われます。
このように「name」の値として、①で設定した値が利用されます。
３ー２ シークレット画像について
① 設定部分
では、シークレット画像を設定するために用いたこちらも見てみましょう。
よくみると３ー１と全く同じことをやっていますね。
② 取得部分
取得は下のgetImage()で行っています。引数としてトークンIDを渡していますね。
もし、「unRvealed」が「true」なら先ほど設定した「unRevealedImage」が返されます。
そのため、トークンIDが１であろうと１０であろうと、同じ画像（unRevealedImage）が返ってきます。
そのため、全てのトークンIDで同じシークレット画像が表示されることとなります。
一方「false」であればトークンIDに応じた「svgImages[]」が返されます。
③ 表示部分
tokenURI()を見てみましょう。
「Base64.encode(bytes())」で囲まれています。
これにより、Base64形式に符号化されます。そして、この暗号化されたものをさらにBase64形式に符号化されています。
これにより、getImage()は二重で符号化されています。
３ー３ トークンID画像ごとに異なる実際の画像
① 設定部分
「どのトークンIDに」どの画像を設定するかという設定なのでトークンIDも引数に渡しています。
また、上のようにトークンID1と11で同じ画像に設定しているのは画像の容量の問題からです。
ランダムで設定するなど他にも方法はあると思います。
② 取得部分
シークレット画像と同じgetImage()メソッドで取得しています。
トークンIDに応じた画像を取得しています。
③ 表示部分
表示部分はシークレット画像と完全に同じですので、ここでは省略いたします。
３ー４ シークレット画像の解除について
シークレット画像の解除はとても簡単な仕組みです。
関数を実行すると、下のように「unRevealed」が「false」になります。
元々は初期値がtrueとして設定してあります。
これが効力を発揮するのはgetImage()です。
下のように、trueの時はシークレット画像が表示され、解除されれば普通の画像が表示されるようになります。
今回は以上です。
ちなみに、後日noteで記事化予定ですが、SVG毎に色を設定したコントラクトはこちらになります。
https://rinkeby.etherscan.io/address/0xbb8ba57e300af658dcbaa023c26e66004cc73374#code
よかったらご参考にどうぞ。」
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊