はじめに

この記事は、NFTのMINTサイトの作り方を紹介します。

thirdwebを使ったコントラクトのデプロイから、フロントエンドの実装までを流れで解説します。フロントエンドはReactで実装します。 触って動かせるソースコードも用意しました。

2022/10/24追記：2022/10/22ごろthirdwebサーバーのRPCが使えなくなったため、thirdwebがSDKの3.4.0にアップロードしました。それにより新しい接続先に変更となりました。よって古いソースコードは使えなくなりました。最新版はこちらをご利用ください。https://github.com/hanzochang/thirdweb-nftdrop-nextjs

ゴール

• 下記一連の流れを体験することでMINTサイト構築手順の流れを理解します。
  • thirdwebのコントラクトをデプロイ
  • 上記にサンプルのフロントエンドリポジトリを用いて接続し、MINTサイトを構築
  • ネット上にMINTサイトを公開

全体の流れさえ理解できれば、サンプルソースコード等をもとに、あとは自分自身でなりができるため、今回は流れの理解に注力しています。

この記事でやらないこと

• フロントエンド実装の詳細については説明しません。 フロントエンド実装の詳細については説明しません。

• サンプルのgithub repoがあるため、そちらを読解いただければと存じます。

対象読者

• thirdwebの使い方を知りたい方
• MINTサイトを持ちたい方
• opensea等以外に、ブロックチェーンと連携した自分自身のサイトを作りたい方

この記事では、thirdwebを使ったシンプルなMINTサイトの作り方を紹介しています。 作り方を通して、上記３つのニーズいづれも達成できるように記事を構成しています。

要求知識

• ターミナル(黒い画面)に抵抗がない方

  • 一部作業で黒い画面を用います。
  • ターミナルは何？というかたは、ターミナルの使い方をご参照ください。

• NFTの基礎知識

  • NFTについてある程度の基礎知識がある前提で話を進めます。
  • NFTの仕組み等基礎知識については NFTアートの基礎知識 にまとめていますのでご参照ください。

• 推奨：Webフロントエンドの知識

  • 知識がなくともできるよう極力冗長に説明していますが、基本的な知識がない場合、エラーの対処等が独力では難しい可能性があります。
  • 不明な点はtwitterにメンションなどいただければと存じます。（すぐに対応できない場合／対応できない場合ございます、ご容赦ください）

この記事で作成できるもの

Wallet機能、MINT機能、Collectionの閲覧機能、自分が保有するトークン表示機能の4点を実装できます。他、デプロイしたコントラクトのopenseaでの閲覧や、etherscanでのリンクの設置なども実装できます。

完成版のサイトサンプル

https://nftdrop-example.hanzochang.com/

完成版のソースコード

https://github.com/hanzochang/thirdweb-nftdrop-nextjs

作成方法／プロセス概略

詳細説明に入る前に、MINTサイトを作成にあたりどのようなプロセスで作るか、どんな技術を使うかをざっと説明します。

thirdwebとは

thirdwebはコードを書かずにコントラクトをデプロイできるサービスです。作成したコントラクトは独自コントラクトとなります。発行した自分自身がownerとなります。

thirdwebthirdwebでは、NFTに必要なmetadataのIPFSへのアップロード機能もあります。

完成までのプロセス

下記のプロセスでMINTサイト作成を実施していきます。

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

thirdwebを利用してブロックチェーンにデプロイします。 「NFTDrop」 のコントラクトを利用してデプロイします。NFTDropは ERC721 のコントラクトです。

② Metadata設定 - NFT画像・NFTメタデータのアップロード・販売期間設定

NFTが参照するURLにメタデータと画像をアップロードします。 また販売期間を設定することで、自分以外のユーザーがMINTできるようにコントラクトのデータをセットアップします。

③ フロントエンドの設定

ユーザーがMINTできるUIを作ります。ブロックチェーンと接続します。 reactとnext.jsを用いてフロントエンドを作成します。thirdwebのSDKを用い、ブロックチェーンとの接続部分の実装コストを下げてカンタンに実装します。

④ フロントエンドのデプロイ

作成したフロントエンドをデプロイします。vercelというサービスを用いて、簡単にアップロードします。

サイト公開

これらのプロセスを経るとサイト公開ができます。

技術構成

大きく「Frontend」「Blockchain」「IPFS」で構成されます。

フロントエンド

• react
• next.js
• third web SDK

コントラクト

• ERC721ベースのNFTDropと呼ばれるthirdwebのコントラクト
  • thirdweb経由でデプロイ

ストレージ

• IPFS
  • thirdweb経由でアップロード

宣伝: ノーコードでNFTサイトを作成したい方

本記事ではMINTサイト構築方法を説明し、プログラマーでなくとも、ミントサイトをデプロイできるように設計しています。 ですが、細かいところで技術的知識が必要となったり、わからない点が出てくると思います。

もっと気軽にMINTサイトやNFT販売サイトを作成した人向けに簡単にサイトをジェネレートできる仕組みを開発中です。現在事前登録中ですので、よろしければご登録ください。

(事前受付中)Web3Generator https://hanzochang.com/web3gen/

https://hanzochang.com/web3gen/

ここからthirdwebのデプロイからフロントエンドまでの実装を解説していきます。

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

前準備: faucet発行

今回テストネットを利用します。 テストネットを利用したことがない方は、事前にテストネット用のトークンを発行しておきましょう。

https://goerlifaucet.com/

22/09/11追記 利用できるテストネットについて

• (ちょっとした情報なので読み飛ばして結構です)
  • 以前はrinkerbyの利用を前提で記事を書いていましたが、goerliに修正しました。rinkerbyは、ethereumの「the merge」後に廃止されることになったからです。(Rinkebyの他、Kiln Ropstenも廃止)
  • 最近ではテストネットfausetにbotによるアタックもあり、fausetでテストネットでトークンを取得しづらい状態が続いています。自分でマイニングできるサイトやソースコードも用意されているので活用しましょう。
  • https://goerli-faucet.pk910.de/
  • https://github.com/pk910/PoWFaucet

thirdwebでコントラクトを作成

thirdwebのdashboardにアクセスします。

https://thirdweb.com/dashboard

https://thirdweb.com/dashboard

ウォレットを接続します。

コントラクト作成ボタンを押下します

「ReleaseDrop」を押下します。

「NFTDrop」を押下します。

「NFTDrop」のデータを入力していきます。

NFTDropコントラクトの基本情報入力画面がでてきます。この段階では、NFTのメタデータのアップロードはありません。ここでは、コントラクト名、シンボル名、説明文、画像、そして取引ごとに発生するフィーの設定が行えます。

なお一度デプロイすると変更はできないので注意です。

本記事では下記のように入力しました。なお、Network/Chainは「rinkeby」を選択します。

一通り情報を入力したらDeployNowボタンを押下します。

Walletが起動するので、Confirmを押下します。

無事コントラクトの作成が完了すると下記の画面が出ます。

これで、コントラクトの作成は完了です！ thirdwebを使うと簡単にデプロイできてしまいますね。

② Metadata設定

この項では、NFT画像・NFTメタデータのアップロード・販売期間設定を設定していきます。

NFT画像／メタデータ準備

NFT画像とメタデータの準備をします。 本記事ではサンプルを用意していますので、サンプルを利用していきます。

サンプルのダウンロード

筆者が用意したgoogledriveにアクセスします。

サンプルmetadata https://drive.google.com/drive/folders/1mXmmN_eArKsoXkny_OcH6CNibuvANtrb?usp=sharing

ダウンロードボタンを押下することでサンプルをダウンロードできます。

NFT画像／メタデータのアップロード

ダウンロードしたファイルをアップロードします。 デプロイしたコントラクトページに表示されている「Batchupload」ボタンを押下します。

ファイルドロップ画面が現れます。

先ほどダウンロードしたフォルダを解凍して、ドラッグ&ドロップでアップロードします。

アップロード後、プレビューが表示されます。Nextボタンを押下します。

「Reveal upon mint」を押下します。

「Upload ~NFTs」を押下します。

Walletが起動するので、Confirmを押下して、トランザクションを発行します。

アップロードが完了するとコントラクトのトップが表示されます。画像がアップロードされていたら無事完了です。メタデータや画像はIPFSにホスティングされています。

自分でサイトを作る場合は、この画像を自分の作品に置き換えてアップロードしていきます。アップロード方法をより詳しく知りたい方は、thirdweb BatchUploadの使い方により詳しい解説を載せていますのでご参考ください。

thirdweb BatchUploadの使い方

販売期間の設定

アップロードはできました。次に販売期間(Claim Phases)を設定します。 販売期間を設定しないと、ユーザーがMINTすることができません。

ClaimPhaseを追加する

SetClaimPhaseボタンを押下するか、タブの「Claim Phases」を押下します。

ClaimPhase画面では販売期間を追加できます。複数の販売期間を設定できます。販売期間に応じて価格を変更することや、販売可能なWallet数を設定できます。コントラクト発行サービスPremintと同様な機能を実装できます。

「Add Initial Claim ePhase」ボタンを押下します。

各種パラメータを入力していきます。

簡単に日本語でパラメータ内容を説明すると、左上から順に

• いつから販売を開始するか
• 何枚NFTを販売するか
• いくらで販売するか
• なんのトークンで販売するか
• だれ(ウォレット)が購入することができるのか
• 1回の請求あたり何枚買えるか
• ウォレットひとつあたり何枚まで買えるか

ウォレットひとつあたり何枚まで買えるか

といったところです。

ひとしきり入力が終わったら「Save Claim Phases」を押下します。

Walletが立ち上がるのでConfirmを押下し、トランザクションを発行します。

これで、販売期間が設定できました。 thirdwebでの操作は、ひとまずこれで以上です。 次はフロントエンドの設定を説明していきます。

ここまでのまとめ

thirdwebでの操作群をおこなってきました。

ここまでで、下記の３つが達成できています。

• コントラクトのデプロイ
• メタデータのアップロード
• 販売期間の設定

この段階で、フロントエンドで、MINTを実行できるようになっています。

次の章からは、フロントエンドでのコントラクトアクセス方法を説明していきます。

③フロントエンド設定

ここからは、コンソール(黒い画面)を利用した操作を含みます。 あまり触ったことのない人でも、とりあえず立ち上げられるよう、なるべく情報をスキップすることなくお伝えできればと考えています。

また この章では、フロントエンドをローカルで動かすことまでを説明 します。 実装のhowは今回説明しません。（実装方法の説明はとても長くなりそうなため）

サンプルソースコードの初期設定

リポジトリをダウンロードします。

git clone https://github.com/hanzochang/thirdweb-nftdrop-nextjs.git

対応するgithubURL: https://github.com/hanzochang/thirdweb-nftdrop-nextjs

サンプルのセットアップ

サンプルリポジトリに移動

cd thirdweb-nftdrop-nextjs

パッケージをインストール

yarn install

サンプルの起動

サンプルサイトを起動します

yarn dev

起動したサンプルにアクセスします

http://localhost:3000

成功すると下記の画面が表示されます。

現時点では筆者が作成したサンプルのコントラクトに接続されていますので、接続するコントラクトを自分のものに変更します。

自分のコントラクトに接続する

接続先のコントラクトを変更

では、自分のコントラクトでこのフロントエンドを動かしてみましょう。

やりかたは簡単です。

vscodeにて、サンプルソースコードを開き、 .envを変更します。

サーバーの再起動

いちど サーバーを落として再起動します。 ターミナルでサーバーを中断します。 ターミナルに移動し、macの場合は「control+c」winの場合は「ctrl+c」で中断します。

中断後、再起動します

yarn dev

いよいよ自分のコントラクトにアクセス！

http://localhost:3000

http://localhost:3000画像がthirdwebでアップロードした画像になっていたら成功です。

自分のコントラクトのフロントエンドが立ち上がりました。

MINTをしたり、コレクションを眺めたりしてみましょう。

サンプルで実装されている機能

本サンプルで実装されている機能について簡単に説明します。

Wallet接続ボタン

ブラウザのウォレットに接続するボタンです。 MINTを利用するためには、このボタンでwalletを接続する必要があります。

MINTボタン

wallet接続後有効になります。thirdwebで設定した販売期間に応じて、MINTの挙動が設定されます。

MINT価格がわかります

販売NFTのMINT価格を表示しています。

自分の保有NFT

自分の保有中のNFTがわかります。

現在のMINTできるコレクション一覧

次にMINTされる画像です。まだMINTされていないNFTは半透明に記録されています

④ フロントエンドのデプロイ

では設定したリポジトリを早速ネットへ公開していきましょう。 今回作ったサイトはネットに簡単に公開できます。Vercelと呼ばれるサイトを利用します。

githubにアップロード

今回作成したリポジトリを自分のgithubにアップロードします。

githubリポジトリを作成

githubにアクセスし、新しいリポジトリを作成します。

githubリポジトリのURLをコピー

作成したリポジトリのアップロード先URLをコピーします。

githubにアップロード

コンソールに戻り、アップロード先をgitに追加します。

まずテンプレートのgithubのリンクを削除し

git remote rm origin

その後githubレポジトリのURLを設定します。

git remote add origin <コピーしたリポジトリのURL>

自分のリポジトリにpushし、アップロードします。

git push origin main

これで前準備はOKです。

Vercelのアカウントを取得する

Vercelのアカウントを取得します。 すでにアカウントをお持ちの方は、ログインしてください。

https://vercel.com/

Vercelにアップロードし公開する

NewProjectページに移動します。 新規登録の場合は登録直後に開かれるページです。 元々アカウント持っている人は「New Project」ボタンなどで遷移してきます。

適当なワードをいれて検索します

Configure Github Appを選択します。

適当なワードを入れると「Configure Github App」ボタンが出現するので押下します。

githubの設定

画面を下の方にスライドしていくとRepositoryAccessが出てきます。

作成したリポジトリ名を検索し、クリックします。

Saveを押下します。

vercelでリポジトリを読み込み

Vercelに戻り、作成したリポジトリ名で検索します。 でてきた検索結果のImportボタンを押下します。

Deployのための設定

無事importが完了すると下記のような画面がでます。 ここからはフロントエンドのデプロイのための設定を解説していきます。

enviroment variableという枠があるので、クリックします。

ここは値を環境変数と呼ばれる設定値を登録できる場所です。 下記の値のペアを二つ登録していきます。

• １つめ
  • NANE: NEXT_PUBLIC_CONTRACT_ADDRESS
  • VALUE: thirdwebで作成したコントラクトのアドレス
• ２つめ
  • NAME: NEXT_PUBLIC_CHAIN_ID
  • VALUE: 4
  • なおこれはrinkebyのネットワーク番号。本記事はrinkebyを利用しているため。

登録に成功すると下記のようになります。

入力し終わったら、Deployを押下します。

しばらく待ちます

公開作業をおこなっています。オレンジ色が緑色になったら、デプロイ完了です。 もしエラーが発生した場合は赤色になります。 (その場合はエラーを見て、ご自身でご解決ください)

サイトが公開されます。

緑色に点灯したらサイト公開完了です。

画面に表示されているURLをクリックして、サイトにアクセスしましょう

これで公開できました。

(任意)独自ドメインを設定しましょう

「vercel 独自ドメイン」といったワードで検索すると設定方法がでてきますので、そちらをご参照ください。

お名前.comの連携の場合は下記を参考ください。

https://maku.blog/p/9vakw8i/

https://maku.blog/p/9vakw8i/なお無事ドメインを設定できるとDomain一覧が下記のようになります

ここまでの一連の流れで、

• thirdwebでのコントラクトデプロイ
• thirdwebでのNFTメタデータのアップロード
• フロントエンドの設定
• フロントエンドの本番デプロイ
• 公開

の５つの作業手順を実施しました。

実はここまでの流れで下記ができるようになっています。

• 独自コントラクトのデプロイ方法
• 自分のブランドサイト構築

マーケットプレイスを用いることなく、自分の所有コントラクトを使って、自分自身のMINTサイトを作ることができるようになっています。

今回のソースコードをベースに、デザインを改造し、デプロイ先をメインネットにすれば、自分自身の真の意味でのオリジナルNFTを発行できます。

ぜひ、お試しください。

💖 いいね！役になったなと思ったら

twitterフォローお願いします。

twitterにてweb3周辺ツールの情報発信をしていますので、よろしければフォローお願いします。 https://twitter.com/hanz0chang

https://twitter.com/hanz0chang

サービスの事前登録お願いします。

また、上記手順をもっとラクにする「web3generator」なるサービスを開発しています。よろしければ事前登録をしてリリース情報を受け取ってください。お役に立てるかもしれません🙏

https://hanzochang.com/web3gen/

https://hanzochang.com/web3gen/

NFTサイト作成の依頼

直接NFTのサイトの依頼を承っておりますので、お声がけください。 細かい点は要相談でございますが、手っ取り早くMINTサイトの構築が可能です。

依頼フォーム

https://share.hsforms.com/1T6hnOtplQMe0ajI66nYiMwcciec

https://share.hsforms.com/1T6hnOtplQMe0ajI66nYiMwcciec

執筆者の簡単なプロフィール

Webのキャンペーンサイトのプランナー業務から、 Webサービス／ネイティブアプリ／メディアの企画・運営、 またWebサービスの開発業務までの職種を経験してきた者です。Fintech案件を始め様々なDXプロジェクトに関わってまいりました。

現在はフリーランスエンジニアとして、SaaSプロダクトやWeb3プロダクトに関わっています。 ざっくり、Ruby / Ruby on Rails / Typescript / React.js / AWS / Azure / Figma あたりの技術やソフトウェアを用い、実装をしています。