【完全保存版】フルオンチェーンNFTをランダムで10,000個作る方法
こんにちは、CryptoGamesの高橋です。
クリスペの会社です。
今回はこちらの「OnChainMonkey」というNFTを元に作り方を学んでいきましょう。
https://opensea.io/collection/onchainmonkey
重要
EthereumでのフルオンチェーンNFTにはガス代がかなりかかります。そのことを十分認識の上、ご自身の判断で行ってください。
１ コードを見てみよう
こちらのEtherscanというサイトを見に行ってみましょう。
https://etherscan.io/address/0x960b7a6bcd451c9968473f7bbfd9be826efd549a#code
このようにコードを見ることができます。
何やら「background（背景）」やら「eyes（目）」やらにいろんな数値を入れていますね。
こちらはCSSの、色のコードが入っています。
２ パーツを見てみよう（長方形）
こちらのSVGが書かれているところも見てみましょう。
もし不明な場合は、これらの記事をぜひご参照ください。
どうやら目っぽいのが３つありますね。（「ey1」「ey2」「ey3」）
幅75、高さ15の長方形なので、なんとなくここかなーと思います。
３ パーツを見てみよう（円）
他のところも見てみましょう。
例えばこちらの「ea1」「ea2」「ea3」は中心（100,290）で半径の異なる３つの円です。
ということは、この辺りが「ea1」のようですね。
４ 共通パーツを見てみよう。（形）
一方、この辺りのように形がまとめて書かれているところがありますね。
第２・３章とこちらのSVGの違いはなんでしょう？
それは「共通して使われるパーツか否か」です。
こちらを見てみるとわかりやすそうです。
例えば顔の丸の形はどのキャラクターも共通です。
一方、イヤリングや眉毛はあったりなかったりします。このように共通化した形は一つにまとめ、個別のパーツは分けています。
５ 共通パーツを見てみよう。（色）
次に共通パートをさらに見てみましょう。
よく見ると、「fill:#」の後に数字があるものとないものがあります。
「fill」は色の塗りつぶしを意味し、ここの「#000」は黒色を表しています。
では見てみましょう。
よく見ると、顔の色はキャラごとに異なるものの、目の色は共通して黒色ということがわかりました。
つまり、共通する色はすでに書き込んでいるようです。
６ 共通パーツを見てみよう。（構成）
次は共通パーツである「z」の構成を見てみましょう。
構成としては
string[] private z = ["中身①", "中身②", "中身③", "中身④",,,,];
という形になっています。
つまり、これは配列です。
そのため、z[0]で中身①を、z[1]で中身②を取り出すことができます。
７ 個別の色の配列も見てみよう
では、他の配列も見てみましょう。
例えば、background（背景）はこのようになっています。
そのため、先ほどと同じく、background[0]で"656"を、background[1]で"dda"を取ることができます。
８ 背景色をランダムで取得しよう①
「randomOne」という関数を作っていますね。
この中にabi.encodePackedという関数が入っています。
こちらは、文字を繋げる関数です。
例えば「Hello」と「 」と「World」を繋げて「Hello World」にするという意味です。
ここでは「ra1」 と「tokenId.toString()」という２つを繋げています。
ちなみに、「ra1」は下のように'A'のようです。
なお、「tokenId.toString()」はTokenIDの数値を文字列に変換しています。
９ 背景色をランダムで取得しよう②
さて、random関数も見てみましょう。
ここでは「keccak256」という関数が使われています。
こちらは32バイトの文字列に暗号化する関数です。
なお、solidityで見かけるアルゴリズムには大きく
① SHA2アルゴリズム ⇨ sha256関数
② SHA3アルゴリズム ⇨ keccak256関数かsha3関数
の２つがあります。基本的には②SHA３アルゴリズムを用います。
また、アルゴリズムが同じなので、keccak256とsha3の結果は同じになります。
今回のrandom関数はkeccak256で32バイトにし、それをuint256で32バイトの正の値に変換しています。
そして、その値を「%8」で８で割った余り（0~7）にして、ape.bgに入れているようです。
１０ ランダム数が格納される構造体を見よう
上の章で、Apeという構造体が使われたので、そちらも見ていきましょう。
構造体は異なる形の変数を入れるセットのようなものです。
今回は全て同じ型の７種類の変数（背景色から帽子まで）を入れられるようにしています。
改めてrandomOne関数を見てみると、tokenIdを渡して、それに基づいてランダムな値をApeの構造体のインスタンスに入れているようです。
１１ 確率付きランダム数の生成
上の「usew」を見てみましょう。
例 w = [40, 32, 15, 10, 3]（wの合計100） i = 0~ 99（iはランダム）
この場合、次のような結果が得られます。
① 100分の40の確率で0
② 100分の32の確率で1
③ 100分の15の確率で2
④ 100分の10の確率で3
⑤ 100分の3の確率で4
具体的に考えましょう。（飛ばしても大丈夫）
i = 0 ~39 の40通りの場合、最初のwhileに辿り着かないので、indは0であり、0が返ります。
１２ 確率付きランダム数の結果例
では、一番数が小さい、こちらのイヤリングを見てみましょう。
「earring_w」に対して、usewが使われていますので、この配列に対して、確率付きランダム数が使われています。
つまり、この場合、「earring_w」の合計である358分の251の確率で"999"という番号になります。
① 358分の251 ⇨ "999"
② 358分の32 ⇨ "fe7"
③ 358分の29 ⇨ "999"
④ 358分の17 ⇨ "999"
⑤ 358分の16 ⇨ "999"
⑥ 358分の8 ⇨ "fe7"
⑦ 358分の5 ⇨ "bdd"
１３ パーツを組み立てる関数を見てみよう（genEye）
まず最初に目にはどのような種類があるのかを見てみましょう。
次のように４つのパターンがあります。
① ノーマル
② 目が半分
③ ②＋眉毛
④ ②＋③＋細目
下のようにhの値によって分岐しています。
hが４未満の時は何もない('')というのもポイントだと思います。
では②を見てみましょう。abi.encodePacked()は文字を繋げる関数でしたね。（第８章）
では、どんな文字を繋げているのでしょう。
sl1、sl2を見てみましょう。
rectと書いてあるので長方形のSVGですが、ポイントは「fill:#」で終わっているということです。
この後には色がきます。そのため、色の前までを繋げているのですね。
そのため、aの場所には色がきます。（bも同じです。）
このように「genEye」は色の変数を二つ、乱数を一つ渡して目のパーツを作ってくれるものだとわかりました。
１４ パーツを組み立てる関数を見てみよう（genMouth）
次は口のパーツを見てみましょう。
大きく３つがあります。
① ノーマル（周りの丸がないのは色がたまたま同じ）
② ひげ
③ 棒
では、コードを見てみましょう。
hの値によって分岐しています。
ポイントは
① ノーマルの時は' 'を返す
② ひげと棒は両立しない（目の時とは違う）
あたりかと思います。
また、for文も見てみましょう。上が７回、下が６回まわしていますが、ひげをよくみて見てください。
上が７本、下が６本、そして点ではなく、棒になっていますね。
abi.encodePacked()でつなげているmo1,mo2を見てみると、線を引く「line」になっています。
長さ・間隔が同じ線を引くために、for文を使っていたのですね。
１５ 色の統一
ここで顔の色を見てみましょう。
実は完全にバラバラではなく、①肌の色 ②輪郭の色 がそれぞれ統一されています。
コードを見てみましょう。
実は２種類の色をそれぞれa,bという変数に格納し、a,bで色を使用しています。そのため、色に統一感が生まれています。
ちなみに、色はこんな風に格納されています。
１５ Propertiesの設定
次はPropertiesの設定をしていきましょう。
この部分ですね。
コードはこんな感じです。
いつもと同じでabi.encodePacked()で文字を繋げていますね。
ポイントはあくまでも文字を繋げるものなので、数字の部分は「.toString()」で文字にしているというところだと思います。
中身はこのようになっています。
attributesで属性についての指定が始まり、各属性はtrait_typeで表していますね。
１６ TokenURIの設定
randomOne()関数を使って、構造体に直接値を入れているのはすごいと思いました。
また、SVGはBase64形式にして返していました。
以上で、「OnChainMonkey」がどのように作られているのかを知ることができました。
ではこれを元に次章から具体的な作成方法を見ていきましょう。
１７ 実践編
こんなのを作ってみましょう。
① 上の四角はレア（必ず現れるわけではない）
② 下の丸は必ずある。
③ 色は背景色を含めて３種類
では、やっていきましょう。
１８ ステップ１ 構造体を作ろう
まずは、色を格納する構造体を作ります。
ここにランダムな色の番号が入ることになります。
後から加えることも可能です。
参考に、コードです。
struct Shape {
uint8 bg;
uint8 shikaku;
uint8 maru;
}１９ ステップ２ 変数を作ろう
１９ー１ クレーム数チェック用変数
これは作るだけです。claim関数などで使います。
１９ー２ 色の格納・確率用変数
①それぞれの色が入る変数
②確率を入れるための_wの配列の変数を作る
なお、少しでもコード数を減らすために、色のコードは３桁で指定しています。
参考に、コードです。
string[] private background = ["656","dda","e92","1eb","663","9de","367","ccc"];
string[] private shape1 = ["abe","0a0","653","888","be7","abe","0a0","653","888","be7","cef","abe","0a0","653","888","be7","cef","abe","0a0","653","888","be7","cef"];
uint8[] private shape1_w = [245, 121, 107, 101, 79, 78, 70, 68, 62, 58, 56, 51, 50, 48, 44, 38, 35, 33, 31, 22, 15, 10, 7];
string[] private shape2 = ["653","ffc","f89","777","049","901","bcc","d04","fd1","ffc","653","f89","777","049","bcc","901","901","bcc","653","d04","ffc","f89","777","049","fd1","f89","777","bcc","d04","049","ffc","901","fd1"];
uint8[] private shape2_w = [252, 172, 80, 79, 56, 49, 37, 33, 31, 30, 28, 27, 26, 23, 22, 18, 15, 14, 13, 12, 11, 10, 10, 10, 9, 8, 7, 7, 6, 5, 5, 4, 3];１９−３ ランダムの複雑化用の変数
「randomOne」という関数で使用する、ランダムを少し複雑にするための変数です。
なくても大丈夫ですし、他の文字でも大丈夫です。
参考に、コードです。
string private ra1='A';
string private ra2='B';
string private ra3='C';１９ー４ SVG簡素化用の変数
SVGを直に書いていくと、混乱の元になります。
少しでも混乱を避けるように、わかりやすい記号に変えましょう。
参考に、コードです。
string private zz='"/>';
string private co1=', ';１９ー５ 属性設定用の変数
OpenSeaで「Properties」を設定するための変数を作りましょう。
不要な場合は、なくて大丈夫です。
参考に、コードです。
string private tr1='", "attributes": [{"trait_type": "Background","value": "';
string private tr2='"},{"trait_type": "Mayu","value": "';
string private tr3='"}],"image": "data:image/svg+xml;base64,';１９ー６ TokenURI用の変数（svgの前まで）
nameやdescriptionを入れる用の変数を作りましょう。
参考に、コードです。
string private rl1='{"name": "OnChain Test #';
string private rl2='"}';
string private rl3='data:application/json;base64,';１９ー７ TokenURI用の変数（ノーマルsvg）
ここが一つのポイントです。
どのNFTにも必ず入るパーツなどはここに入れましょう。レアなNFTだけにあるパーツはここには入りません。
また、ランダムな色を入れたい場合、その色の部分は入れません。
参考に下がコードです。
string[] private z = ['<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500"><rect x="0" y="0" width="500" height="500" style="fill:#',
'"/><circle cx="200" cy="300" r="150" style="fill:#',
'<circle cx="200" cy="300" r="50" style="fill:#000"/></svg>'];１９ー８ TokenURI用の変数（特別svg）
ここもポイントです。
全てのNFTにあるわけではない、特別パーツを作る場合はこのように別に変数を作ります。
やはり色の部分は抜かします。
参考に、下がコードです。
string private mayu='<rect width="300" height="50" x="50" y="50" style="fill:#';２０ ステップ３ 関数を作ろう
２０ー１ ランダム作成用の関数を作ろう
ランダム用の関数として
① 通常ランダム ⇨ random関数
② 確率付きランダム ⇨ usew関数
を使用します。
ただ、ここはコピペでいいと思います。
参考に、下がコードです。
function usew(uint8[] memory w,uint256 i) internal pure returns (uint8) {
uint8 ind=0;
uint256 j=uint256(w[0]);
while (j<=i) {
ind++;
j+=uint256(w[ind]);
}
return ind;
}
function random(string memory input) internal pure returns (uint256) {
return uint256(keccak256(abi.encodePacked(input)));
}２０ー２ ランダム数を構造体に格納する関数を作ろう
ランダムの値を各構造体に入れるための関数を作りましょう。
ちなみに１９−３で作った、少しランダムを複雑にする変数がここで使われます。
右の方にある、数字は１９ー２で作った「_w」の配列の合計数を入れます。
これにより、例えば「shikaku」用に用意した「shape1」には23個が格納されているため、「shape.shikaku」には「0~22」のどれかの値が入ります。
参考に、下がコードです。
function randomOne(uint256 tokenId) internal view returns (Shape memory) {
Shape memory shape;
shape.bg = uint8(random(string(abi.encodePacked(ra1,tokenId.toString()))) % 8);
shape.shikaku = usew(shape1_w,random(string(abi.encodePacked(ra2,tokenId.toString())))%1429);
shape.maru = usew(shape2_w,random(string(abi.encodePacked(ra3,tokenId.toString())))%1112);
return shape;
}２０ー３ 特別パーツ用の関数を作ろう
全てのNFTに共通ではない、特別なパーツ用の関数を作りましょう。
ポイントはif文を使い、合致しないときには''を返すようになっているところです。
その他、abi.encodePaccked()を使って文字もつなげていますね。
参考に、下がコードです。
function genMayu(string memory a,uint8 h) internal view returns (string memory) {
string memory out = '';
if (h>8) { out = string(abi.encodePacked(mayu,a,zz)); }
return out;
}２０ー４ 属性確認用の関数を作ろう
属性を確認するための関数です。
コード内で使っているわけではないので、なくても大丈夫です。
参考に、下がコードです。
function getAttributes(uint256 tokenId) public view returns (string memory) {
Shape memory shape = randomOne(tokenId);
string memory o=string(abi.encodePacked(uint256(shape.shikaku).toString(),co1));
return string(abi.encodePacked(o,uint256(shape.bg).toString()));
}２０ー５ 属性部分を作るための関数を作ろう
同じ、属性関連でも、こちらは２０ー４と異なり、必ず必要な関数になります。
TokenURIに渡すために形を整えています。
参考に、下がコードです。
function getTraits(Shape memory shape) internal view returns (string memory) {
string memory o=string(abi.encodePacked(tr1,uint256(shape.bg).toString(),tr2,uint256(shape.shikaku).toString()));
return string(abi.encodePacked(o,tr3));
}２０ー６ 共通パーツのSVG化の関数を作ろう
共通パーツをSVG化するための関数です。
ここでは特別パーツは含まれません。
参考に、以下がコードです。
function genSVG(Shape memory shape) internal view returns (string memory) {
string memory a=shape1[shape.shikaku];
string memory output = string(abi.encodePacked(z[0],background[shape.bg],z[1],a,zz,z[2]));
return output;
}２０ー７ Base64形式にして、TokenURIに渡す関数を作ろう
ここでは、Base64.encode()という関数を使って、SVGをBase64形式に変換しています。
ご不明な場合は、こちらで詳しく書いておりますので、ご参考ください。
参考に、以下がコードです。
function tokenURI(uint256 tokenId) override public view returns (string memory) {
Shape memory shape = randomOne(tokenId);
return string(abi.encodePacked(rl3,Base64.encode(bytes(string(abi.encodePacked(rl1,tokenId.toString(),getTraits(shape),Base64.encode(bytes(genSVG(shape))),rl2))))));
}２０ー８ Claim用の関数を作ろう
今回の直接のテーマではないですが、claimできる関数は必要ですね。
参考に、以下がコードです。
unction claim() public nonReentrant {
require(numClaimed >= 0 && numClaimed < 9500, "invalid claim");
_safeMint(_msgSender(), numClaimed + 1);
numClaimed += 1;
}
function ownerClaim(uint256 tokenId) public nonReentrant onlyOwner {
require(tokenId > 9500 && tokenId < 10001, "invalid claim");
_safeMint(owner(), tokenId);
}２１ コンストラクタを作ろう
コンストラクタはコントラクトがデプロイされる時に１度だけ行われる処理です。
コントラクトの名前とシンボル名を設定していますね。
参考に、以下がコードです。
constructor() ERC721("OnChainEyes", "OCE") Ownable() {}いかがだったでしょうか。
今回は少し難しかったかもしれませんが、ぜひチャレンジしてみてください。
また、もし参考になったよーという方は作ったNFTの一つなどを私のウォレットに投げていただけると喜びます。
筆者のウォレット：0xB365BC5A0BA013e260B922cA2f27DC7C86279e3b
もちろん投げなくても大丈夫です。
以上です。
いいなと思ったら応援しよう！
