NFTを作ってOpen Sea に出品するまで

NFTの理解を深めるために自分で作りたい。
せっかくなので自動でいろんな種類が生成できる、ジェネレーティブNFTが作りたい。
THE NFTって感じがするから、ドット絵にしたい。

環境

• MacBook Pro (13-inch, M1, 2020)
• OS｜mac OS Monterey (var 12.5)
• メモリ｜8GB
• node｜v16.16.0
• Chrome｜バージョン: 103.0.5060.134
• VS code｜Version: 1.69.2

準備

• Adobe Illustrator
• 無料でするならFigmaでもいいかも
• hashlips_art_engine
• BINANCE アカウント
• 0.00065 BTC（2022/08/04 現在 ¥2000くらい）
• MetaMask アカウント・Chromeの拡張機能
• Open Sea アカウント（MetaMaskと連携）
• PINATA アカウント（MetaMaskと連携）

完成したもの

Niku Q｜Open Sea

イラストを作成する

ジェネレーティブNFTはいくつかのレイヤー（パーツ）を組み合わせて画像を生成するので、そのパーツを作成する。

サイズ｜1500px × 1500px でアートボードを作成する。

長方形グリッドツールでサイズと水平・垂直の分割数を設定する。

サイズは先ほど設定したアートボードの[1500px]、
水平・垂直の分割数は多いほど細かいグリッドになる。

ドットの塗りつぶしができるようにする

グリッドができたらアートボードの真ん中に配置し、キーボードの[K]を押すと塗りつぶせるようになる。
消す場合は色を[無し]にして塗ればOK。

このレイヤーをパーツごとに作成します。
(面倒臭いのでレイヤーを複製した、aiデータもGoogleドライブに置いておきます。)[https://drive.google.com/drive/folders/11nmhrBg6XpdKW3vdMVKusKjQSS50GGI_?usp=sharing]

イラストを描く→書き出し

命名はパーツごとにわかりやすい名前にします。
レイヤーに名前をつけとくと良いです（Background や Color1 など）
書き出しは[WEB用に書き出し]をしましたが、アートボードのサイズに書き出せるのであればなんでもOK。

hashlips_art_engineで画像生成

HashLipsさんの「hashlips_art_engine」を使い画像を生成します。

今回はデスクトップに作業フォルダを作成します。
my-nft-projectは任意の名前にしてくだい。

cd desktop
mkdir my-nft-project
cd $_
git clone  https://github.com/HashLips/hashlips_art_engine.git .
code .

生成に使用する画像を設定

layersフォルダ内にあるフォルダを全て削除し、
作成したイラストを追加します。
下記の画像を参考にしてください。

ここで画像を生成する際の組み合わせの割合を指定する必要があります。

[ファイル名]+[#]+[割合]

例）
Base/
Base#100

Background/
Background#50
Background2#50

この場合、Baseは100%表示され、Background と Background2 は50%ずつ表示されます。
常に表示する必要のある Base などは [ #100 ] を入力し、貴重なものには [ #2 ] など全体から低い割合に設定します。

画像生成

下記のコメントがある行付近のコードを編集します。
// General metadata for Ethereum

growEditionSizeTo の ＊ は画像を生成する数になります。素材になる画像の数より多い場合はエラーが帰ってきます。

// If you have selected Solana then the collection starts from 0 automatically
const layerConfigurations = [
  {
    growEditionSizeTo: ＊,
    layersOrder: [
      { name: "Background" },

    ・・・省略・・・

const format = {
  width: *****,
  height: *****,
  smoothing: false,
};

下記のコマンドで画像を生成します。
生成された画像は build/images に保存されます。

yarn install
node index.js

Pinataに画像をアップロード

Pinataにアクセスし、[ + Upload ]→[select] を選択。
先ほど作成した画像をアップロードします。
ここでは「プロジェクト名-images」という名前で保存します。

アップロードできたら表示される [CID] をコピーしてメモしておきます。

必要な情報の設定

下記のコメント２つがある行付近のコードを編集します。
① // General metadata for Ethereum
② // If you have selected Solana then the collection starts from 0 automatically

①

// General metadata for Ethereum
const namePrefix = "コレクション名";
const description = "概要や説明";
const baseUri = "ipfs://**********";

②

// If you have selected Solana then the collection starts from 0 automatically
const layerConfigurations = [
  {
    growEditionSizeTo: ＊,
    layersOrder: [
      { name: "パーツのフォルダ名" },
      { name: "パーツのフォルダ名" },
      { name: "パーツのフォルダ名" },
      { name: "パーツのフォルダ名" },
      { name: "パーツのフォルダ名" },
      { name: "パーツのフォルダ名" },
      { name: "パーツのフォルダ名" },
    ],
  },
];

hashlips_art_engineで画像生成での構造で10枚作成する場合このようになります。

// If you have selected Solana then the collection starts from 0 automatically
const layerConfigurations = [
  {
    growEditionSizeTo: 10,
    layersOrder: [
      { name: "Base" },
      { name: "Hand Color" },
      { name: "Niku Color" }
    ],
  },
];

src/config.js に変更を加えたら、下記のコマンドを実行します。

node utils/update_info.js 
node index.js

Pinataにjsonファイルをアップロード

再度、Pinataにアクセスし、[ + Upload ]→[select] を選択。
build/json 内のjson ファイルを全てアップロードします。
ここでは「プロジェクト名-metadata」という名前で保存し、CIDを控えておきます。

MetaMaskのアカウントを作成する

MetaMaskにアクセスし、案内に従ってMetaMaskのアカウントを作成。Chromeの拡張機能を追加しておく。

[ ネットワークの追加 ] からPolygonを追加しておきます。
参考：BINANCE公式｜MetaMaskにPolygonを追加する方法

バイナンスでBTC→MATICを準備する

BINANCEにアクセスし、アカウントを作成→本人認証を済ませておきます。
入金からBTCを購入します。MATICをMetaMaskに送金する際に最低10MATIC必要なのでBTCもそれに足りる額を入金します。

次に [ ウォレット ] から [ フィアットと現物 ] を選択し、BTCの [ コンバート ] をクリックします。
BTCから10MATICに両替して、もう一度 [ フィアットと現物 ] に戻ります。

バイナンスからMetaMaskにMATICを送金する

[ ウォレット ] から [ フィアットと現物 ] を選択し、先ほど追加したMATICの [ 出金 ] をクリックし、MetaMaskへ送金します。

Remix を使用してミントする

Remixにアクセスし、 Start coding online をクリックします。

左上の [ + ] ボタンから新規のワークスペースを作成します。

デフォルトで作成されている contracts/ 内のファイルを全て削除し、新規に拡張子が .sol のフォイルを作成します。

例）
コレクション名.sol

そのファイルに下記の内容をコピペします。

Example.txt

// BEGIN Edit!
から
// END Edit!
までの内容を書き換えます。

// BEGIN Edit!

contract Example is ERC721Enumerable, Ownable {
  using Strings for uint256;

  string baseURI;
  string public baseExtension = ".json";
  uint256 public cost = 100 ether;
  uint256 public maxSupply = 50;
  uint256 public maxMintAmount = 50;
  bool public paused = false;
  bool public revealed = false;
//   string public notRevealedUri;

// END Edit!

⌘+S で保存すると左のサイドメニューの[SOLIDITY COMPILER]に ① というバッジがつくのでクリック。

上記のように設定できたら [Compile Example.sol ]　をクリックしてコンパイルします.

次に左のサイドメニューから[DEPLOY & RUN TRANSACTIONS]を選択し、下記のように設定します。
この時にMetaMaskと連携します。

DEPLOY>_INITBASEURの*****は、Pinataで作成した「プロジェクト名-metadata」のCID。（前後の ipfs:// と / を忘れずに）

下記画像の赤枠のボタンで、コードをコピーしておき、VS code内で [Example.txt]などのファイルを作成し, 控えておきます。
最後に [ transact ] をクリックしトランザクションします。
（ガズ代が 1MATICほど必要）