(保存版)10,000種類のジェネレイティブNFTの作り方

こんにちは、CryptoGamesの高橋と申します。

ちなみに、CryptoGamesはCryptoSpellsやNFTStudioなど、主にNFTの事業などを行っている会社です。

https://cryptospells.jp/

今回はこちらのYouTubeを元にジェネレイティブNFTの作り方を一から説明します。

また、実際にこの記事では50個のNFTしか作っておりませんが、同じ手順であれば、いくつものNFTを作ることも可能です。

なお、今回テストとして作ったコントラクトはこちらになります。

https://testnets.opensea.io/collection/purpleeye-lsmgdkcvks

では、実際の作り方を見ていきましょう。

1 HashLipsのレジストリを落としてくる

https://github.com/HashLips/hashlips_art_engine

HashLipsの「hashlips_art_engine」を使います。

こちらをGithubからローカルに落としてきましょう。

2 node.jsをインストールする

この記事では具体的なやり方は触れませんが、node.jsのインストールをしてみてください。https://nodejs.org/en/

3 yarnのインストール

作成するディレクトリでyarnをインストールして、依存関係を入れましょう。

①インストール

npm i yarn
スクリーンショット 2021-12-10 21.37.22

②依存関係を入れる

yarn add all
スクリーンショット 2021-12-10 21.41.10

4 フォルダの構成を確認する

この「layers」フォルダの中に色々なpngファイルが入っています。

自分で作成したい時はここを変えることになります。

例えば、下の場合、「Eye color」というフォルダにたくさんの色のpngデータがあります。

スクリーンショット 2021-12-10 21.44.31

自分で作る場合にはこちらをフォルダごと差し替えていくことになります。

5 データの構成の変更方法

自分でlayersを変えた場合は、こちらのconfig.jsを変えましょう。

スクリーンショット 2021-12-10 21.46.54

「layersOrder」に「layers」フォルダの中身があるので、ここを変えれば良さそうですね。

スクリーンショット 2021-12-10 21.47.18

ちなみに順序はとても重要のようです。

Backgroundのように一番下にくるものが最初に配置されるのですね。

次に作成する数を変えてみましょう。

ここでは「growEditionSizeTo」を20にしました。(後から50に変えました。)

スクリーンショット 2021-12-10 21.57.03

その他、「uniqueDnaTorrance」という設定もあります。(スペル間違ってそうですね。)

スクリーンショット 2021-12-10 22.13.44

これは全く同じNFTをいくつまで許容できるかというものです。

ここでは10,000まで許容するのですね。

ちなみに、次のパートでの作成時に同じものが被ると、このように「DNA exists!」と表示されます。

スクリーンショット 2021-12-10 22.15.27

6 結合したimageとjsonを作ろう

準備ができましたら、imageとJSONを作るために、次のコマンドをうちます。

node index.js
スクリーンショット 2021-12-10 22.01.22

結果を見てみましょう。

このbuildフォルダの中に成果物ができています。

まずはimagesです。

スクリーンショット 2021-12-10 22.02.36
スクリーンショット 2021-12-10 22.03.30

こんな感じで、それぞれのpng画像ができています。

次に、JSONファイルも見てみましょう。

なんだか難しそうですが、大丈夫です。

例えば、こちらの2.jsonは2.pngの情報を示しており、下にあるように、例えば

・Background > Black
・Eyeball > white
・Eye color > Yellow

などのように設定されています。

スクリーンショット 2021-12-10 22.04.10

7 背景色を変えてみよう

背景色の設定がわかりやすくなるように、一旦

・Background
・Bottom lid
・Top lid

の3つをコメントアウトします。

スクリーンショット 2021-12-10 22.23.29

これでまたnode index.jsを動かしてみると。。

スクリーンショット 2021-12-10 22.24.54
スクリーンショット 2021-12-10 22.25.23

このように、背景色もランダムで設定されていることがわかります。

これは、こちらのbackgroundの設定によります。

brightnessの%を変えることで、明るさの調節もできます。

スクリーンショット 2021-12-10 22.26.42

8 サイズを変えてみよう

スクリーンショット 2021-12-10 22.29.31

サイズはこちらで変更ができますので、必要に応じて変えることができます。

9 imagesデータを IPFSに上げる

ここでは、Pinataというサービスを使います。(私はとりあえず、無料プランを今は使っています。)

https://app.pinata.cloud/pinmanager

こちらの「Upload」>「Folder」と進み、先ほど作った画像が入っているフォルダを選択します。

スクリーンショット 2021-12-10 22.47.55

名前をつけてアップロードしてみましょう。

スクリーンショット 2021-12-10 22.51.23

完成しました。

ちなみに「CID」というのがこのIPFSの識別番号です。

スクリーンショット 2021-12-10 22.52.57

このフォルダを開いてみると、このようにpngデータが格納されていることがわかりました。

スクリーンショット 2021-12-10 22.54.27

10 JSONデータにIPFSのCIDを設定する

今回、画像が格納されているIPFSのCIDが取得できましたので、(ここでは「QmaZfKAdvJnPLHTnAuri6Dd7sngCBBD2v7rT4C96Yuh6KQ」)これをJSONに設定します。

これにより、各JSONデータはこのCIDに格納されているpngデータを参照することになります。

こちらの、config.jsのbaseUriの「ipfs://」の後ろに先ほどのCIDを貼り付けます。

スクリーンショット 2021-12-10 23.00.49

これができましたら、JSONを全てこのbaseUriに変えます。

次のコマンドを実行します。

node utils/update_info.js
スクリーンショット 2021-12-10 23.06.10

これでJSONファイルが書き換わりました。

JSONファイルを見てみますと、imageが先ほどのIPFSのCIDに置き換わっていることがわかります。

スクリーンショット 2021-12-10 23.07.27

11 JSONデータを IPFSに上げる

上の設定でJSONデータが完成しましたので、imagesをあげた時と全く同じ要領でIPFSにあげてみてください。

スクリーンショット 2021-12-10 23.11.12

こんな感じでアップロードが完了しました。

12 NFT作成用のレジストリを落とす

https://github.com/HashLips/hashlips_nft_contract

こちらのGithubをローカルに落としてください。

13 Remixを立ち上げる

今回はYouTubeに沿って、Remixを使ってコントラクトをデプロイしてみましょう。

https://remix.ethereum.org/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.8.7+commit.e28d00a7.js

14 コントラクトの作成準備

左のWorkspacesの右の+アイコンを選択します。

名前をつけるので、ここでは「eye」として「OK」を押します。

スクリーンショット 2021-12-10 23.25.08

現在「contracts」フォルダに入っているファイルは全て使わないため、全て削除します。

そしてファイルのアイコンを選択し、今回は「PurpleEye.sol」という名前のファイルを作ります。

スクリーンショット 2021-12-10 23.28.43
スクリーンショット 2021-12-10 23.30.38

ここで、先ほどのローカルに落としてきた「contract」フォルダにある「SimpleNft_flat.sol」をコピーして、「PurpleEye.sol」に貼り付けます。

スクリーンショット 2021-12-10 23.40.46

☆重要☆
今回はサンプルなので、そのままコードをコピペしましたが、実際にNFTを作る際には足りていない機能はないか、おかしな挙動ななさそうかなどを必ず確認してから、ご自身の判断で作成してください。

15 コントラクトの修正

では、いくつか修正を行っていきます。

こちらの1235行目の「NFT」はコントラクト名になりますので、適切な名前に変更します。基本的には「○○.sol」の○○と同じ名前です。

ここでは、「PurpleEye」とします。

スクリーンショット 2021-12-10 23.42.22

他にも変更箇所を見ていきましょう。

スクリーンショット 2021-12-10 23.50.14

costはその名の通り、価格です。

maxSupplyは最大供給量であり、今回は50個しか用意していないので50に設定します。

maxMintAmountは一度に最大いくつミントできるかです。今回は2つに設定します。

pausedは機能の停止です。いったん、NFTをミントできない状態にし、「○月○日○時から」というような時はその時間までは「true」にしてミントできないようにし、時間が来たら「false」にするなどができます。

revealedは「?」のような画像を表示するときに使います。こちらは後日、別で記事を書かせていただく予定です。

今回は次のようにしました。

スクリーンショット 2021-12-10 23.55.43

16 コントラクトのコンパイル

さて、コントラクトができましたので、コンパイルをしていきましょう。

コンパイルとはコントラクトを機械が読めるようにすることです。

緑色のチェックがついていることを確認し、「Auto compile」と「Enable Optimization」にチェックをつけます。(最適化)

「Auto compile」にチェックがついていると、変更のたびに自動でコンパイルを行ってくれます。

スクリーンショット 2021-12-10 23.59.03

17 コントラクトのデプロイ

★重要
ここからデプロイに移ります。今回はテストネットで行います。
誤って、もしくは本番用として、Ethereumで行うときはかなりのガス代がかかることが想定されます。
行う際には、それを踏まえ、ご自身の責任のもとで行ってください。

イーサリアムのようなマークに行きます。

ここではテスト環境で実行します。

「ENVIRONMENT」を「Injected Web3」にしてください。

ここで要注意です。

その下に「Main(1)network」と書かれています。

★重要★
これはイーサリアムに繋がっていることを指していますのでここを変更します。

スクリーンショット 2021-12-11 0.06.43

メタマスクを起動し、「Rinkebyテストネットワーク」を選択します。

スクリーンショット 2021-12-11 0.09.58

すると、このようにRinkebyになったことが確認できました。

このように、必ずテストネットになっていることを確認してください。

スクリーンショット 2021-12-11 0.11.05

ちなみに、テストネットであるRinkebyのETHはFaucetから取得することができます。

https://faucet.rinkeby.io/

Twitterを利用しますが、もしご不明な場合にはググるとやり方が出てくると思います。

ちなみに、テストネットではなく、Polygonでやる場合には、メタマスクでPolygonに変えるだけです。(私のはまだ古い名前でしたね。)

スクリーンショット 2021-12-11 0.17.27

このようにCustom(137)となっていれば、Polygonが設定されています。

スクリーンショット 2021-12-11 0.18.26

さて、Rinkebyに戻して実行していきます。

では、もう一度Rinkebyになっているかを確認し、Accountは自分が実行しようとしているアカウントになっているかを確認してください。

そして「CONTRACT」で実行するコントラクトを選択してください。

ここでは「PurpleEye」というコントラクトを選択します。

スクリーンショット 2021-12-11 0.22.04

続いて、「Deploy」の右端の下の矢印を選択します。

スクリーンショット 2021-12-11 0.24.07

ここではコンストラクタの設定です。

スクリーンショット 2021-12-11 0.25.01

コンストラクタとはコントラクト実行時に最初に1度だけ実行される処理のことです。

今回は

・_NAME  > PurpleEye
・_SYMBOL > PE
・_INITBASEURI > 別途説明します。

と設定します。

_INITBASEURIには

ipfs:// CIDの番号/

を入れます。

とても忘れやすく、大事なのは最後のスラッシュを入れることです。

彼らによれば、どうやら99.9%の人がつけ忘れるようですw

例えば、私のメタデータのCIDはこちらなので

スクリーンショット 2021-12-11 0.32.27

ipfs://QmNeGuTvrCuJCkVLaAX1vdF6RQ3W4MeMijffCkiqQvefvv/

となります。

こんな感じになりました。

スクリーンショット 2021-12-11 0.40.10

そして、デプロイの前にやっておきたいのが「trahsact」の左のコピーマークです。

これにより、バイトコードをコピーすることができます。こちらはVScodeなどに保管しておきましょう。

こちらはコントラクトをverifyする際に必要になる大事なものです。

ちなみに、こちらについては次の記事で詳細に扱っています。https://note.com/standenglish/n/n7680bdb2beaf

こんな感じで保管しました。

スクリーンショット 2021-12-11 0.43.10
スクリーンショット 2021-12-11 0.42.50

最後に、再確認を行い、デプロイを行ってみましょう。

スクリーンショット 2021-12-11 0.45.58

Rinkebyであることを確認し、メタマスク上もRinkebyになっていることを確認した上で

スクリーンショット 2021-12-11 0.46.32

「transact」を選択しましょう。

スクリーンショット 2021-12-11 0.47.38

メタマスクが起動しますので、Rinkebyであることを確認して、「確認」を押します。

スクリーンショット 2021-12-11 0.47.21

デプロイが完了すると、このようにデプロイされたコントラクトを見ることができます。

スクリーンショット 2021-12-11 0.50.36
スクリーンショット 2021-12-11 0.51.24

ここで、ミントなどの操作を行うことができます。

また、青色のブロックは基本的に呼び出し関数なので、ガス代はかかりません。

スクリーンショット 2021-12-11 0.52.19

では、コントラクトができたので、ミントをしてみましょう。

スクリーンショット 2021-12-11 1.01.26

ミントする数を入れて、「mint」を選択します。

メタマスクが起動しますので「確認」を押します。

「totalSupply」を見ると1となっており、ミントされたことが確認できました。

スクリーンショット 2021-12-11 1.02.37

さらに、2個ミントすると、きちんと3になっていました。

スクリーンショット 2021-12-11 1.04.37
スクリーンショット 2021-12-11 1.03.49

18 OpenSea testnetsで見てみよう

さて、コントラクトができ、ミントもできましたので、最後にOpenSeaで見てみましょう。

今回はRinkebyというテストネットで行ったため、通常のOpenSeaではなく、OpenSea testnetsで見ることができます。(50個ミントしました。)

https://testnets.opensea.io/

今回作ったコントラクト

https://testnets.opensea.io/collection/purpleeye-lsmgdkcvks

スクリーンショット 2021-12-11 1.16.14

いかがだったでしょうか。

これでジェネレイティブなNFTの作成方法は終了です。

意外と簡単だったのではないでしょうか。

ぜひチャレンジしてみてくださいね。

追記

コントラクトを作成時にNFTのミントが完了できないかとの質問がありましたので、記事に書いてみました。

よかったら、こちらもご参照ください。

https://note.com/standenglish/n/na2614278e40e

転載元:https://note.com/standenglish/n/nf6931087b3bb

作者:https://twitter.com/stand_english

※本記事は、作者様に許可を取り転載しております。