📖

公開版NFTドロップの作成方法について

2023/02/03に公開

※当記事は、こちらの記事を翻訳したものです。
https://blog.thirdweb.com/guides/how-to-create-an-open-edition-nft-drop/

このガイドでは、公開版の「NFTドロップ」(ERC1155のNFT)を作成する方法を紹介します。

この方法では、任意の数のNFT(ウォレットアドレス毎に限定された範囲内で)をミントすることができます。

thirdwebの監査済みERC1155の 「NFTドロップ」スマートコントラクトを使用して、thirdwebのコレクションからのミントが完璧に行われることを保証します。

さあ、はじめましょう!

公開版のスマートコントラクトを作成する

始めるには、ダッシュボード上のEdition Dropスマートコントラクトに向かいます。

https://thirdweb.com/thirdweb.eth/DropERC1155

Edition Dropでは、ERC-1155 NFTをLazyミントし、ユーザーが請求できる条件(価格、数量、ウォレット制限など)を定義することが可能です。

このページから Deploy now をクリックすると、デプロイフローが開始されます。


Deploy nowをクリックすると開始されます。

スマートコントラクトのメタデータ(画像、シンボル、名前、説明など)を入力します。

このページでは、一次販売と二次販売から資金を受け取るウォレットアドレスを定義することもできます。

https://blog.thirdweb.com/thirdweb-smart-contracts-opensea-creator-earnings-filter/

最後に、デプロイするネットワークを選択し、Deploy now!


どのEVM互換のネットワークにデプロイするかを選択します。

NFTのLazyミントを行う

スマートコントラクトがデプロイされたら、コントラクトのダッシュボードページのNFTsタブに移動して、NFTのメタデータをアップロードできます。


NFTsタブを選択

「.csv」または「.json」ファイルを使用して複数の NFT をbatch uploadするか、一度に 1 つの NFT をアップロードするかを選択できます。

このガイドでは、シンプルにするために、単一アップロードオプションを使用します。

Single Uploadボタンをクリックし、NFTメタデータを定義してLazy Mint NFTをクリックします。

最終的にはこのようになります。


あなたのNFT(s)はLazyミントされました!

クレーム条件の定義

次に、クレーム条件を使用して、ユーザーが NFT をどのようにミントするのかを設定する準備が整いました。

NFT をクリックしてドロワーを開き(右の方から出てきた画面です)、Claim Conditionsタブを選択します。


Claim Conditionsタブを選択

Add Initial Claim Phase をクリックし、新しい条件を作成します。


"Add Initial Claim Phase" を選択します。

ここで、このNFTで使用できる数量がUnlimited(無制限)であることを指定することで、ドロップをopen editionにすることができます。


このフィールドを Unlimitedに設定すると、オープンエディションが作成されます

各ウォレットが請求できるNFTの数に制限を加えるには、How many NFTs can be claimed per wallet?(1ウォレットに請求できるNFTの数)フィールドを希望の数に設定します。

また、リリース日、価格、通貨、許可ウォレットリストなど、クレーム条件の他の項目を設定することができます。

以下は、定義の例です。

準備ができたら、Save claim phasesをクリックして、ブロックチェーンに設定を保存します。

ユーザーがNFTをミントできないようにしたい場合は、クレームフェーズを削除してスマートコントラクトを更新するだけです。

ミントアプリケーションの作成

ユーザーがウォレットを接続してスマートコントラクトからミントできるウェブサイトを作成する場合、いくつかの異なるオプションが利用可能です。

まず、コード不要のオプションの概要を説明し、最後にReact SDKを使用してスマートコントラクトとやりとりするための完全にカスタマイズ可能なWebアプリケーションを作成する方法を紹介します。

クレームボタンの使用

スマートコントラクトダッシュボードのURLをコミュニティと共有し、そこから直接ミントしてもらうことができます。

この方法では、ユーザーはSourcesタブに移動して、スマート・コントラクト・コードを直接確認することができます。


ユーザーはNFTをクリックし、Claimタブに移動して直接Mintすることができます

エンベッド(埋め込み)を使用する

あなたのエディションスマートコントラクトには、あなたのコミュニティと共有できるIPFSにホストされた埋め込みも付属しています。

Embedタブに向かうと、以下のようなスマートコントラクト専用のカスタマイズ可能なプレビューが表示されます。


IPFSにホスティングされたシンプルなミントページ

SDKを使用したウェブアプリケーションの作成

完全にカスタマイズ可能なWebアプリケーションのために、私たちのReact SDKはウォレット接続とNFTミント機能(およびその他多くの機能)を完全に装備しています。

まずは、TypeScriptとNext.jsのプロジェクトで、これらの機能がすべてセットアップされたedit-dropテンプレートを使用します。

以下のコマンドを実行して、プロジェクトをセットアップしてください。

npx thirdweb create app --template edition-drop 

cd edition-dropを実行してプロジェクトにディレクトリを変更し、テキストエディタで開いてください。

pages/_app.tsxファイルで、スマートコントラクトをデプロイしたネットワークに設定することを確認します。

// This is the chainId your dApp will work on.
const activeChainId = ChainId.Goerli;

次に、pages/index.tsxファイルに、スマートコントラクトのアドレスと、ユーザーにミントさせたいNFTのトークンIDを追加します。

// Put Your Edition Drop Contract address from the dashboard here
const myEditionDropContractAddress = "<smart-contract-address-here>";

// Put your token ID here
const tokenId = 0;

これで完了です。

これで npm run dev を実行し、http://localhost:3000/ にアクセスしてアプリケーションをプレビューできるようになりました。

ユーザーはウォレットを接続し、NFTをクレームすることができるようになります。


Webアプリケーションのプレビュー画面

アプリケーションを本番環境にホストする際には、以下のVercelへのデプロイ方法のガイドをご利用ください。

https://blog.thirdweb.com/guides/how-to-host-your-website-on-vercel/

まとめ

以上です!

監査済みでガスに最適化されたオープン版のスマートコントラクトをデプロイし、ユーザーがNFTをミントできるようにするためのシンプルなミントアプリケーションを構築しました。

アプリケーションをさらにカスタマイズしたい場合は、ポータルのSDKセクションにジャンプして、Reactアプリケーションを構築する際に利用可能なすべての機能について学んでください。

質問はありますか?私たちのDiscordに飛び込んで、私たちのチームと直接話してください。

Discussion