ノンジェネ第4回!先に行っておきます……今回の記事は長いです….w
前回アップロードした画像とメタデータをNFT化します
今回使うのは、Remixというブラウザ上でNFT化(デプロイ)を簡単にできるサービス
まだ画像やメタデータアップロードができてないよー!という方は前回の記事を参考にしてください

今回も引き続き、むなかた先生の記事(第4章)を元に進めてます↓
むなかた先生の記事: https://crypto-code.jp/materials/create-generative-nft
Visual Studio Code(VSCode)でソースコードをコピー
ノンジェネ「環境構築編」でダウンロードした「hashlips_nft_contract-1.0.1」をVSCodeで開きます
「contract」>「SimpleNft _flat.sol」を選択し、中身をすべてコピー

Remixにソースコードをペースト
下記のRemix公式ページに移動します
Remix公式ページ:https://remix.ethereum.org/
ワークスペースを作成
「WORKSPACES」の右の「+」をクリック、Workspace nameを任意で記入し「OK」をクリック

不要なファイルを削除
「contracts」内の3ファイルを選択して、右クリックし「Delete All」

新規ファイルを作成し、ソースコードをペースト
次に「contracts」上で右クリック。「New File」で新規ファイルを作成し、任意の名前をつけます

作成したファイルに、VSCodeでコピーしたソースコードをペースト

Remixでソースコードをカスタマイズ
先ほどペーストしたソースコードを変更します
変更箇所は1235行あたりにあります。「NFTの名前」「値段」「発行総数」「一度にミントできる最大数」「ミントできない状態か?」「リビールされているか?」の6ヶ所です

今回は「NFTの名前」をTestCollection、「価格」を0.001ETH、「発行総数」を20点、「一度にミントできる最大数」2点という設定にします
「ミントできない状態か?」は「false」がミントできる状態なので、リリース前は「true」にします
「リビールされているか?」は後からリビールさせたい場合は「false」にします。今回はリビールなしの「true」で行きます
以下がカスタマイズ後です

【任意】HashLipsへの自動寄付設定を削除
1344行あたりに、任意ですが修正する箇所があります
こちらのソースコードは提供しているHashLipsに売上の5%を自動で送る設定です
HashLipsを応援したい方はそのままでOKですが、寄付したくない方は// This will …から…contract balance.までの8行を削除します

以下のようになります

Remixでコンパイル
カスタマイズが終わったらコンパイルします
コンパイルとは、人間語で書かれたソースコードを機械語にする作業です
難しそうに聞こえますが、Rimixを使えば簡単にできます
まずは左側のアイコンの上から3番目を選択。「COMPILER」のバージョンが指定範囲内にあるか確認します
指定範囲は先ほどカスタマイズしたソースコードの1233行目あたりにあります
pragma solidity >=0.7.0 <0.9.0;
0.7.0以上0.9.0未満ならOKということです
「Advanced Configurations」の中の「Enable optimization」にチェックを入れ「Compile 〈任意のソースコードファイル名〉」をクリック

左側のアイコンにチェックマークがつき、「CONTRACT」欄が追加されれば無事完了です

Remixでデプロイ
デプロイとはコンパイルしたソースコードを、ブロックチェーン上に載せる作業です
こちらもRimixが簡単にしてくれてます
MetaMaskをテストネットワークに変更
MetaMaskでGoerliネットワークを選択しておく

Goerliネットワークを使います。Goerliで使う方法やテスト用ETHをもらう方法は下記を参考にしてください

Rimixでデプロイ設定
左側のアイコンの上から4番目を選択
ENVIRONMENTで「Injected Provider – MetaMask」を選択。MetaMaskが起動するので「接続」をクリック
「Goerli (5) network」と表示されていればOKです。ACCOUNT欄には自分のウォレットアドレスが表示されます

CONTRACT(compile by Remix)欄で「〈任意のNFT名〉 – contracts/〈任意のソースコード名〉」を選択(自分の場合は「TestCollection – contracts/TestCollection.sol」)
次に、Deploy欄の右側にある「∨」をクリック

展開された欄に情報追加します

上から「NFTの名前」「略称」「メタデータ参照先」「リビール前のメタデータ参照先」です
「メタデータ参照先」は以前メタデータをアップしたPinataからメタデータのCIDコピーします

記載のしかたは「ipfs://〈メタデータのCID〉/」です ※注意:最後は「/」が必要!
今回はリビールはしないので「リビール前のメタデータ参照先」は「test」と記入
全て記入したら「transact」をクリック。MetaMaskが起動するのでガス代を確認して「確認」をクリックしデプロイ完了

Remixでデプロイしたソースコードを確認&実行
デプロイが終わると、一番下にNFT名のメニューが追加されます
こちらをクリックするとズラッとボタンが出てきます

青ボタンは設定内容の確認なので、ガス代はかかりません
設定通りの内容が表示されています

オレンジや赤ボタンはソース変更や実行なので、ガス代がかかります
試しにpauseを「false」に変更し、ミントできる状態にします

ガス代が表示されるので「確認」をクリック
次にmintに「2」と記入して実行

こちらもガス代が表示されるので「確認」をクリック
Open Seaで確認……無事ミントできました!

pauseやmintを実行する際にMetaMaskがクルクルと回転したままになってしまいました
エラーかと思いましたが、EtherscanやOpenSeaを見ると実行結果が反映されていたので問題ないようです
数分間待ってクルクルしているようであれば、実行結果をEtherscanやOpenSeaで確認してみましょう
Etherscan(Goerli Testnet) : https://goerli.etherscan.io/
OpenSea(testnet) : https://testnets.opensea.io/ja
Etherscanでソースコードを変更できるようにする
Rimixは一度閉じてしまうと、デプロイしたソースコードを変更できなくなります(できるかもですが、知らない…)
そのため、後からEtherscanで変更をできるようにしておきます。Verifyというらしい……
Etherscanでコントラクトアドレスを探す
まずはRimixでコントラクトアドレスをコピー

Ethscanページ(Goerli)の検索窓にペーストして検索

EtherscanでVerify
表示されたページの「Contract」ボタンを押し、「Verify and Publish」のテキストリンクをクリック

続いて下記の画像内容を選択。2つ目は、コンパイルした時のバージョンを指定します

次ページでは下記の画像のように記入。Rimixからソースコードと入力フィールド情報をコピぺする必要があります

ソースコードは下記からコピーできます

入力フィールド情報のコピー方法の手順は2つあります
まずは以下の「Calldata」をコピー

コピーした内容をテキストエディターなどにペーストし、赤枠の箇所(0が連続し始めた箇所)のみをコピー

最後に「Verify and Publish」をクリックし、赤線の「Successfully….」と表示されれば、完了です

Etherscanでソースコードを変更してみる
ミントをできない状態に変更してみます
現状の設定を確認
元の画面に戻り「Contract」>「Read Contract」>「12 paused」を確認
「false」になっているので、ミントできる状態です

コントラクトを書き換える
今度は「Contract」>「Write Contract」を選択し「Connect to Web3」をクリック

MetaMaskが立ち上がりので、Goerilテストネットワークになっているのを確認して「接続」
「Connected」に変わります
「3 pause」を展開し、「true」と打って「Write」をクリック

MetaMaskが立ち上がるので、ガス代を確認して実行
変更を確認
再び「Read Contract」でに移動
右側の「Reset」をクリックし「12 paused」を展開
「True」に変更されていれば成功です

これでミントできない状態になりました
戻したい場合は「Write Contract」の「3 pause」に「false」と打って「Write」します
まとめ
以上でNFT化完了です
むなかたさんの記事では「Rinkbeyテストネットワーク」を使用していましたが、今は使えなくなっていたので「Goerilテストネットワーク」を使用しています
次回がいよいよラスト!ユーザーがミントしやすいようにするため、ミントサイトを作ります!
コメント