注意点
Rinkeby(テストネット)のEtherについてはfaucetで請求してから到着するまでに非常に時間がかかるため、事前に行っておいた方が良い(本文参照)。
ジェネレーティブNFTとは、レイヤーごとにデザインを複数用意し、コンピュータによりそれらを組み合わせて重複なく一定数が自動生成されるNFTのことである。
それぞれのNFTに唯一性があるため、ホルダーが自分だけのNFTとしてSNSのアイコンに設定するなどの楽しみ方があり、長期的にトレンドになっている。
これを手作業で行うには膨大すぎるし、プログラムを作成するのも難しい。
これに対し、HashLips Art Engineという既成ソフトウェアが無料で利用できるので、今回はこれを利用してジェネレーティブNFTを作成してみる。
以下のリンクからテストネット上のOpenSeaで筆者が作成したサンプルのNFTを確認することができる。
筆者はエンジニアではないし経験もないが、HashLips Art Engineを使うことによりジェネレーティブNFTを実際に作成することができた。
以下の公式の解説動画に沿って作業を行ったので、その過程を以下にまとめる。
まずは設定をしよう
まずはHashLips.onlineにアクセスしよう。
Githubのリンクをクリックし、アートエンジンのリポジトリからソースコードをダウンロードしよう。
ダウンロードが完了したら、ZIPを解凍しておこう。
なお、readme.mdに詳細に使用方法が記載されているので、英語が得意であればそちらを読んでも良いだろう。
次にnode.jsをダウンロードしよう。
最新のバージョンだと適合しないため、14.18.1を推奨している。
ダウンロードが完了したら、インストールしよう。
次に、Visual Studio Codeをダウンロードしよう。
ダウンロードが完了したら、Visual Studio Codeでアートエンジンのフォルダを開こう。
次に、ターミナルに以下のコマンドを入力する。
node -v
その結果、v14.18.1が表示されれば、node.jsの正しいverがインストールされていることが確認できる。
次に、ターミナルに以下のコマンドを入力する。
npm install
次に、ターミナルに以下のコマンドを入力し、プログラムをテストしてみよう。
npm run generate
この結果、ターミナルには以下のように5枚の画像が生成されたことが表示される。
なお、画像を生成するにあたっては、config.jsファイルにおけるgrowEditionSizeTo:後に生成したい数量、layersOrder:後にレイヤーをレンダリングする順序通りに入力する必要がある。
デフォルトでは以下の入力となっている。
const layerConfigurations = [ { growEditionSizeTo: 5, layersOrder: [ { name: "Background" }, { name: "Eyeball" }, { name: "Eye color" }, { name: "Iris" }, { name: "Shine" }, { name: "Bottom lid" }, { name: "Top lid" }, ], }, ];
画像の生成を行うと、buildフォルダに生成された画像ファイルとメタデータが記載されたjsonファイルが格納される。
例えば以下の1.pngと1.jsonについて見てみよう。
jsonファイルに記載されたトレイトは背景は黒、眼球は赤、目の色はシアン、虹彩は大きいというような記載になっている。
これらのトレイトと、layersフォルダの画像を照らし合わせると正しくメタデータがjsonファイルに入力されていることが確認できる。
layersフォルダの下層にはBackgroundやEye colorなどのフォルダがあり、OpenSeaなどのマーケットプレイスでこれらがトレイトとして表示される。
また、画像のファイル名は以下のようにハッシュタグを付けて記載する。
Yellow#10.png
ハッシュタグの後の数字は重みを表しており、フォルダの中の他の画像ファイル名の数字との比較で大きいものが現れやすくなる。
例えば、Eye colorフォルダ内では、Yellowが10に対してその他は1の設定なので、Yellowが特に出現しやすい。
アートを用意しよう
動画ではphotoshopを利用しているとのことだったが、筆者はiPadで作業を行いたかったので、レイヤーを使った編集ができるAffinity DesignerのiPadアプリを利用した。
という点を理解していれば、どのアプリを利用しても問題はない。
筆者は以下のようなお弁当コレクションを作ってみた。
NFTをジェネレートしよう
デフォルトで存在するlayersの下層フォルダを一旦削除しよう。
次に、layersフォルダにトレイト別のアートを入れたフォルダをドラッグアンドドロップする。
続いて、config.jsファイルを修正し、growEditionSizeTo:に生成したい数量、layersOrder:にレンダリングしたい順序でトレイトを書き込む。
そして、再びプログラムを実行する。
npm run generate
これにより、筆者のお弁当コレクションがジェネレートされた。
なお、数量は10に指定した。
jsonファイルには以下のようにメタデータが記録されている。
ジェネレートした後に、ターミナルに以下のコマンドを入力すると、レアリティが表示される。
npm run rarity
例えば、弁当箱の右上に表示されている「おかず」の発生確率は以下の通りだ。
ブロッコリーとタコウインナーの生成率がが0.00%と、画像は用意しているものの生成枚数が10枚と少なかったためにジェネレートされなかった。
次に、jsonファイルの未入力部分について更新しよう。
name、description、imageにはプレースホルダが入力されているが、この内容でリリースすることは望ましくない。
これを更新するためにはconfig.jsファイルの該当部分を更新し、ターミナルで以下のコマンドを実行する。
npm run update_info
例えば以下のような変更を行う。
その結果、それぞれのjsonファイルが以下のように更新された。
冒頭の動画の解説はここまでとなっている。
なお、IPFSのアドレスについてここでは適当に入力したが、画像ファイルをIPFSにアップロードした後に書き換える必要がある。
IPFSにアップロードしてみよう
以下の動画を参考に、IPFSにアップロードを行う。
なお、以降においては発行数量を100に変更している。
アップロードにはPinataを利用する。
Free planでも1GBのストレージを利用することができる。
登録が完了したら、buildフォルダの下層のimagesフォルダをそのままアップロードしよう。
ここに表示されたCIDをコピーして、config.jsのconst baseUriを書き換える。
const baseUri = "ipfs://QmTofootKogT4hWP17exgxnmYR6zvqzPNhMhkyiUWDnNTB";
そして、ターミナルで再び以下のコマンドを入力する。
npm run update_info
その結果、以下のように正しいIPFSアドレスに修正された。
1.jsonを見ると、ipfs://CID/1.pngという記載になっており、実際にアップロードされているアドレスと一致する。
続いて、JSONファイルについてもjsonフォルダごとそのままアップロードしよう。
これでアップロード作業は完了だ。
スマートコントラクトを設定しよう
Githubに戻り、solidity_smart_contractsのリポジトリからNFT.solのファイルを開く。
そして、全て選択してコピーする。
OpenSeaが対応しているtestnetであるrinkebyを利用する。
ガス代に使うテストネット用のEtherはFaucetで入手する必要がある。
TwitterでETHアドレスをtweetして、そのURLを貼り付けることで申請できるが、送られるまでにものすごく時間がかかるため、冒頭で述べた通り事前に入手しておくべきである。
Etherが確保できたら、EthereumのIDEであるRemixにアクセスする。
新しくNFT.solのファイルを作成し、貼り付けを行う。
その後、SOLIDITY COMPILERでコンパイルを行い、DEPLOY & RUN TRANSACTIONSで以下のように入力を行う。
入力が完了したらtransactボタンを押す。
これで完成したので、OpenSeaTestnetsで完成したNFTを見てみよう。
以下のようにコレクションが表示されているはずだ。
ここで、発行数量は100に設定したのに、表示されている数量は20であることに気づくだろう。
これはNFT.sol内のデフォルトの設定のまま利用しているからであり、20が当初からMINT済で今後追加でMINT可能という状態になっている。
当該設定についてはNFT.solの内容を書き換えることで自由に変更可能だ。
では、続いてMINTをしてみよう。
_to: に送信先のアドレス(ここではスマコン作成アドレスと同様とする)、_mintAmount: に、1を入力してtransactする。
これにより、#21のNFTがMINTされた。
なお、remixを終了する前に、CONTRACTのtransactの左のコピーボタンを押してデータのコピーを保存しておこう。
Visual Studio Codeで新しいファイルを作成し、保存する。
コメント