（保存版）10,000種類のジェネレイティブNFTの作り方
こんにちは、CryptoGamesの高橋と申します。
ちなみに、CryptoGamesはCryptoSpellsやNFTStudioなど、主にNFTの事業などを行っている会社です。
今回はこちらのYouTubeを元にジェネレイティブNFTの作り方を一から説明します。
また、実際にこの記事では50個のNFTしか作っておりませんが、同じ手順であれば、いくつものNFTを作ることも可能です。
なお、今回テストとして作ったコントラクトはこちらになります。
https://testnets.opensea.io/collection/purpleeye-lsmgdkcvks
では、実際の作り方を見ていきましょう。
１ HashLipsのレジストリを落としてくる
HashLipsの「hashlips_art_engine」を使います。
こちらをGithubからローカルに落としてきましょう。
２ node.jsをインストールする
この記事では具体的なやり方は触れませんが、node.jsのインストールをしてみてください。
３ yarnのインストール
作成するディレクトリでyarnをインストールして、依存関係を入れましょう。
①インストール
npm i yarn
②依存関係を入れる
yarn add all
４ フォルダの構成を確認する
この「layers」フォルダの中に色々なpngファイルが入っています。
自分で作成したい時はここを変えることになります。
例えば、下の場合、「Eye color」というフォルダにたくさんの色のpngデータがあります。
自分で作る場合にはこちらをフォルダごと差し替えていくことになります。
５ データの構成の変更方法
自分でlayersを変えた場合は、こちらのconfig.jsを変えましょう。
「layersOrder」に「layers」フォルダの中身があるので、ここを変えれば良さそうですね。
ちなみに順序はとても重要のようです。
Backgroundのように一番下にくるものが最初に配置されるのですね。
次に作成する数を変えてみましょう。
ここでは「growEditionSizeTo」を20にしました。（後から50に変えました。）
その他、「uniqueDnaTorrance」という設定もあります。（スペル間違ってそうですね。）
これは全く同じNFTをいくつまで許容できるかというものです。
ここでは10,000まで許容するのですね。
ちなみに、次のパートでの作成時に同じものが被ると、このように「DNA exists!」と表示されます。
６ 結合したimageとjsonを作ろう
準備ができましたら、imageとJSONを作るために、次のコマンドをうちます。
node index.js
結果を見てみましょう。
このbuildフォルダの中に成果物ができています。
まずはimagesです。
こんな感じで、それぞれのpng画像ができています。
次に、JSONファイルも見てみましょう。
なんだか難しそうですが、大丈夫です。
例えば、こちらの2.jsonは2.pngの情報を示しており、下にあるように、例えば
・Background ＞ Black
・Eyeball ＞ white
・Eye color ＞ Yellow
などのように設定されています。
７ 背景色を変えてみよう
背景色の設定がわかりやすくなるように、一旦
・Background
・Bottom lid
・Top lid
の３つをコメントアウトします。
これでまたnode index.jsを動かしてみると。。
このように、背景色もランダムで設定されていることがわかります。
これは、こちらのbackgroundの設定によります。
brightnessの％を変えることで、明るさの調節もできます。
８ サイズを変えてみよう
サイズはこちらで変更ができますので、必要に応じて変えることができます。
９ imagesデータを IPFSに上げる
ここでは、Pinataというサービスを使います。（私はとりあえず、無料プランを今は使っています。）
こちらの「Upload」＞「Folder」と進み、先ほど作った画像が入っているフォルダを選択します。
名前をつけてアップロードしてみましょう。
完成しました。
ちなみに「CID」というのがこのIPFSの識別番号です。
このフォルダを開いてみると、このようにpngデータが格納されていることがわかりました。
１０ JSONデータにIPFSのCIDを設定する
今回、画像が格納されているIPFSのCIDが取得できましたので、（ここでは「QmaZfKAdvJnPLHTnAuri6Dd7sngCBBD2v7rT4C96Yuh6KQ」）これをJSONに設定します。
これにより、各JSONデータはこのCIDに格納されているpngデータを参照することになります。
こちらの、config.jsのbaseUriの「ipfs://」の後ろに先ほどのCIDを貼り付けます。
これができましたら、JSONを全てこのbaseUriに変えます。
次のコマンドを実行します。
node utils/update_info.js
これでJSONファイルが書き換わりました。
JSONファイルを見てみますと、imageが先ほどのIPFSのCIDに置き換わっていることがわかります。
１１ JSONデータを IPFSに上げる
上の設定でJSONデータが完成しましたので、imagesをあげた時と全く同じ要領でIPFSにあげてみてください。
こんな感じでアップロードが完了しました。
１２ NFT作成用のレジストリを落とす
こちらのGithubをローカルに落としてください。
１３ Remixを立ち上げる
今回はYouTubeに沿って、Remixを使ってコントラクトをデプロイしてみましょう。
１４ コントラクトの作成準備
左のWorkspacesの右の＋アイコンを選択します。
名前をつけるので、ここでは「eye」として「OK」を押します。
現在「contracts」フォルダに入っているファイルは全て使わないため、全て削除します。
そしてファイルのアイコンを選択し、今回は「PurpleEye.sol」という名前のファイルを作ります。
ここで、先ほどのローカルに落としてきた「contract」フォルダにある「SimpleNft_flat.sol」をコピーして、「PurpleEye.sol」に貼り付けます。
☆重要☆
今回はサンプルなので、そのままコードをコピペしましたが、実際にNFTを作る際には足りていない機能はないか、おかしな挙動ななさそうかなどを必ず確認してから、ご自身の判断で作成してください。
１５ コントラクトの修正
では、いくつか修正を行っていきます。
こちらの1235行目の「NFT」はコントラクト名になりますので、適切な名前に変更します。基本的には「○○.sol」の○○と同じ名前です。
ここでは、「PurpleEye」とします。
他にも変更箇所を見ていきましょう。
costはその名の通り、価格です。
maxSupplyは最大供給量であり、今回は50個しか用意していないので50に設定します。
maxMintAmountは一度に最大いくつミントできるかです。今回は２つに設定します。
pausedは機能の停止です。いったん、NFTをミントできない状態にし、「○月○日○時から」というような時はその時間までは「true」にしてミントできないようにし、時間が来たら「false」にするなどができます。
revealedは「？」のような画像を表示するときに使います。こちらは後日、別で記事を書かせていただく予定です。
今回は次のようにしました。
１６ コントラクトのコンパイル
さて、コントラクトができましたので、コンパイルをしていきましょう。
コンパイルとはコントラクトを機械が読めるようにすることです。
緑色のチェックがついていることを確認し、「Auto compile」と「Enable Optimization」にチェックをつけます。（最適化）
「Auto compile」にチェックがついていると、変更のたびに自動でコンパイルを行ってくれます。
１７ コントラクトのデプロイ
★重要★
ここからデプロイに移ります。今回はテストネットで行います。
誤って、もしくは本番用として、Ethereumで行うときはかなりのガス代がかかることが想定されます。
行う際には、それを踏まえ、ご自身の責任のもとで行ってください。
イーサリアムのようなマークに行きます。
ここではテスト環境で実行します。
「ENVIRONMENT」を「Injected Web3」にしてください。
ここで要注意です。
その下に「Main(1)network」と書かれています。
★重要★
これはイーサリアムに繋がっていることを指していますのでここを変更します。
メタマスクを起動し、「Rinkebyテストネットワーク」を選択します。
すると、このようにRinkebyになったことが確認できました。
このように、必ずテストネットになっていることを確認してください。
ちなみに、テストネットであるRinkebyのETHはFaucetから取得することができます。
Twitterを利用しますが、もしご不明な場合にはググるとやり方が出てくると思います。
ちなみに、テストネットではなく、Polygonでやる場合には、メタマスクでPolygonに変えるだけです。（私のはまだ古い名前でしたね。）
このようにCustom(137)となっていれば、Polygonが設定されています。
さて、Rinkebyに戻して実行していきます。
では、もう一度Rinkebyになっているかを確認し、Accountは自分が実行しようとしているアカウントになっているかを確認してください。
そして「CONTRACT」で実行するコントラクトを選択してください。
ここでは「PurpleEye」というコントラクトを選択します。
続いて、「Deploy」の右端の下の矢印を選択します。
ここではコンストラクタの設定です。
コンストラクタとはコントラクト実行時に最初に１度だけ実行される処理のことです。
今回は
・_NAME ＞ PurpleEye
・_SYMBOL ＞ PE
・_INITBASEURI ＞ 別途説明します。
と設定します。
_INITBASEURIには
ipfs:// CIDの番号/
を入れます。
とても忘れやすく、大事なのは最後のスラッシュを入れることです。
彼らによれば、どうやら99.9％の人がつけ忘れるようですw
例えば、私のメタデータのCIDはこちらなので
ipfs://QmNeGuTvrCuJCkVLaAX1vdF6RQ3W4MeMijffCkiqQvefvv/
となります。
こんな感じになりました。
そして、デプロイの前にやっておきたいのが「trahsact」の左のコピーマークです。
これにより、バイトコードをコピーすることができます。こちらはVScodeなどに保管しておきましょう。
こちらはコントラクトをverifyする際に必要になる大事なものです。
ちなみに、こちらについては次の記事で詳細に扱っています。
こんな感じで保管しました。
最後に、再確認を行い、デプロイを行ってみましょう。
Rinkebyであることを確認し、メタマスク上もRinkebyになっていることを確認した上で
「transact」を選択しましょう。
メタマスクが起動しますので、Rinkebyであることを確認して、「確認」を押します。
デプロイが完了すると、このようにデプロイされたコントラクトを見ることができます。
ここで、ミントなどの操作を行うことができます。
また、青色のブロックは基本的に呼び出し関数なので、ガス代はかかりません。
では、コントラクトができたので、ミントをしてみましょう。
ミントする数を入れて、「mint」を選択します。
メタマスクが起動しますので「確認」を押します。
「totalSupply」を見ると１となっており、ミントされたことが確認できました。
さらに、２個ミントすると、きちんと３になっていました。
１８ OpenSea testnetsで見てみよう
さて、コントラクトができ、ミントもできましたので、最後にOpenSeaで見てみましょう。
今回はRinkebyというテストネットで行ったため、通常のOpenSeaではなく、OpenSea testnetsで見ることができます。（50個ミントしました。）
今回作ったコントラクト
https://testnets.opensea.io/collection/purpleeye-lsmgdkcvks
いかがだったでしょうか。
これでジェネレイティブなNFTの作成方法は終了です。
意外と簡単だったのではないでしょうか。
ぜひチャレンジしてみてくださいね。
追記
コントラクトを作成時にNFTのミントが完了できないかとの質問がありましたので、記事に書いてみました。
よかったら、こちらもご参照ください。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊