thirdwebの使い方 - 独自コントラクトの作成と「NFTのMINTサイト」の作り方を紹介
thirdwebでの独自コントラクト作成 〜 MINTサイト作成までの流れが掴める記事です。サンプルリポジトリ(React/Next.js)を使って、MINTサイトをすぐに構築する方法を説明します。独自コントラクトでのNFT作成までの一連のフローを体験してみましょう。
公開日2022.06.26
更新日2022.10.24
はじめに
この記事は、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://nftdrop-example.hanzochang.com/
作成方法／プロセス概略
詳細説明に入る前に、MINTサイトを作成にあたりどのようなプロセスで作るか、どんな技術を使うかをざっと説明します。
thirdwebとは
thirdwebはコードを書かずにコントラクトをデプロイできるサービスです。作成したコントラクトは独自コントラクトとなります。発行した自分自身がownerとなります。
thirdwebでは、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/
① コントラクトのデプロイ
前準備: faucet発行
今回テストネットを利用します。
テストネットを利用したことがない方は、事前にテストネット用のトークンを発行しておきましょう。
22/09/11追記 利用できるテストネットについて
- (ちょっとした情報なので読み飛ばして結構です)
- 以前はrinkerbyの利用を前提で記事を書いていましたが、goerliに修正しました。rinkerbyは、ethereumの「the merge」後に廃止されることになったからです。(Rinkebyの他、Kiln Ropstenも廃止)
- 最近ではテストネットfausetにbotによるアタックもあり、fausetでテストネットでトークンを取得しづらい状態が続いています。自分でマイニングできるサイトやソースコードも用意されているので活用しましょう。
thirdwebでコントラクトを作成
thirdwebのdashboardにアクセスします。
ウォレットを接続します。
コントラクト作成ボタンを押下します
「ReleaseDrop」を押下します。
「NFTDrop」を押下します。
「NFTDrop」のデータを入力していきます。
NFTDropコントラクトの基本情報入力画面がでてきます。この段階では、NFTのメタデータのアップロードはありません。ここでは、コントラクト名、シンボル名、説明文、画像、そして取引ごとに発生するフィーの設定が行えます。
なお一度デプロイすると変更はできないので注意です。
本記事では下記のように入力しました。
なお、Network/Chainは「rinkeby」を選択します。
なお、Network/Chainは「rinkeby」を選択します。
一通り情報を入力したらDeployNowボタンを押下します。
Walletが起動するので、Confirmを押下します。
無事コントラクトの作成が完了すると下記の画面が出ます。
これで、コントラクトの作成は完了です！
thirdwebを使うと簡単にデプロイできてしまいますね。
thirdwebを使うと簡単にデプロイできてしまいますね。
💡閑話休題：NFTDropとは
（ここは細かい話なので読み飛ばしてOKです）
Thirdwebには複数のコントラクトが用意されており、NFTDropはそのうちの一つです。
▼ NFTDropを使うとどんなことができるか
- MINT機能を持ったサイトを作ることができます。
- MINTには制約を設定できます。販売可能な期間、料金等を設定できます。
- MINT済みのNFTの一覧を取得し、サイトで表示することができます。
- MINT済みのNFTは、Opensea等のマーケットプレイスで販売できます。
一点注意があり、NFTDropの場合、ユーザーがMINTできるのは番号順になります。ユーザーが任意のNFTを選んでMINTする、と言うことはできません。
ユーザーが欲しいものを購入する場合は、MarketPlaceコントラクトを活用する必要があります。今回は説明を省きます。
▼ コントラクトの特徴
一言でまとめると、ユーザーがMINTすることを想定したコントラクトで、
MINTのための制約や販売価格や販売期間をきめ細やかに設定できます。
特徴を一覧にすると下記の通りです。
- ERC721
- Mintable | ユーザーがMINTできる設計
- ClaimPhases | ユーザーのMINTにあたって制約を設定できる
- Reveal | リビール機能に対応
- 後からmetadataを設定できる | オーナーはNFTのmetadataを後からアップロードできる
- 後からmetadataを追加できる | 後から追加が可能
- BatchUpload | まとめてmetadataをIPFSにホスティング
- 独立URI | NFTのmetadataは共通のURIを持たず、トークン１つずつに対応
② Metadata設定
この項では、NFT画像・NFTメタデータのアップロード・販売期間設定を設定していきます。
NFT画像／メタデータ準備
NFT画像とメタデータの準備をします。
本記事ではサンプルを用意していますので、サンプルを利用していきます。
本記事ではサンプルを用意していますので、サンプルを利用していきます。
サンプルのダウンロード
筆者が用意したgoogledriveにアクセスします。
ダウンロードボタンを押下することでサンプルをダウンロードできます。
NFT画像／メタデータのアップロード
ダウンロードしたファイルをアップロードします。
デプロイしたコントラクトページに表示されている「Batchupload」ボタンを押下します。
ファイルドロップ画面が現れます。
先ほどダウンロードしたフォルダを解凍して、ドラッグ&ドロップでアップロードします。
アップロード後、プレビューが表示されます。Nextボタンを押下します。
「Reveal upon mint」を押下します。
「Upload ~NFTs」を押下します。
Walletが起動するので、Confirmを押下して、トランザクションを発行します。
アップロードが完了するとコントラクトのトップが表示されます。画像がアップロードされていたら無事完了です。メタデータや画像はIPFSにホスティングされています。
自分でサイトを作る場合は、この画像を自分の作品に置き換えてアップロードしていきます。アップロード方法をより詳しく知りたい方は、thirdweb BatchUploadの使い方により詳しい解説を載せていますのでご参考ください。
販売期間の設定
アップロードはできました。次に販売期間(Claim Phases)を設定します。
販売期間を設定しないと、ユーザーがMINTすることができません。
ClaimPhaseを追加する
SetClaimPhaseボタンを押下するか、タブの「Claim Phases」を押下します。
ClaimPhase画面では販売期間を追加できます。複数の販売期間を設定できます。販売期間に応じて価格を変更することや、販売可能なWallet数を設定できます。コントラクト発行サービスPremintと同様な機能を実装できます。
「Add Initial Claim ePhase」ボタンを押下します。
各種パラメータを入力していきます。
簡単に日本語でパラメータ内容を説明すると、左上から順に
- いつから販売を開始するか
- 何枚NFTを販売するか
- いくらで販売するか
- なんのトークンで販売するか
- だれ(ウォレット)が購入することができるのか
- 1回の請求あたり何枚買えるか
- ウォレットひとつあたり何枚まで買えるか
といったところです。
ひとしきり入力が終わったら「Save Claim Phases」を押下します。
Walletが立ち上がるのでConfirmを押下し、トランザクションを発行します。
これで、販売期間が設定できました。
thirdwebでの操作は、ひとまずこれで以上です。
次はフロントエンドの設定を説明していきます。
💡閑話休題：Claim Phasesについて
各項目を画像でも解説してみました。
販売条件は複数設定できます。多くのNFTプロジェクトでは、ホワイトリストやプレミントといった、段階的なNFTリリースを実施しています。ClaimPhase機能を利用すると、PREMINTといった他のサイトを利用することなく、thirdweb発行のコントラクトで、段階的な販売条件を組むことができます。お試しください。
補足
なお「How many seconds do wallets have to wait in-between claiming?」を「unlimited」にすると、
1度トランザクションを発行したユーザーは、２回目発行できなくなります。
ここわかりにくいので、注意です。
ここまでのまとめ
thirdwebでの操作群をおこなってきました。
ここまでで、下記の３つが達成できています。
- コントラクトのデプロイ
- メタデータのアップロード
- 販売期間の設定
この段階で、フロントエンドで、MINTを実行できるようになっています。
次の章からは、フロントエンドでのコントラクトアクセス方法を説明していきます。
🗯 エンジニアでない人向け：前提知識まとめ
ここからはコンソール(黒い画面)を使って進めていきます。
Webエンジニアリングの知識が必要です。
なんでもいいからひとまず試してみたい！という方向けに、
事前の環境設定方法を紹介します。
下記が設定できていればokです。
- ターミナルを起動できる
- gitがインストールされている
- node.jsがインストールされている
細かい情報は書ききれないので、下記の情報を手がかりに、
環境設定にチャレンジしてみてください。
なお、もしよろしければ不明な点はtwitterにメンションなどいただければと存じます。
▼ MAC向け
今さら聞けない！ターミナルの使い方【初心者向け】
https://techacademy.jp/magazine/5155
ターミナルの使い方です
https://techacademy.jp/magazine/5155
ターミナルの使い方です
MacにNode.jsをインストール
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
ダウンロードしたソースコードを動かすためのソフトウェアです
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09
ダウンロードしたソースコードを動かすためのソフトウェアです
VSCodeインストール
https://code.visualstudio.com/download
ソースコードを見るためのツールです
https://code.visualstudio.com/download
ソースコードを見るためのツールです
yarnをインストールする
https://qiita.com/suisui654/items/1b89446e03991c7c2c3d
サンプルを利用するソフトを管理するツールです
https://qiita.com/suisui654/items/1b89446e03991c7c2c3d
サンプルを利用するソフトを管理するツールです
▼ WIN向け
【Windows】Gitの環境構築をしよう！
https://prog-8.com/docs/git-env-win
*サンプルソースコードをダウンロードできるツールです。
https://prog-8.com/docs/git-env-win
*サンプルソースコードをダウンロードできるツールです。
Node.jsの開発環境を用意しよう！（Windows）
https://prog-8.com/docs/nodejs-env-win
*ダウンロードしたソースコードを動かすためのソフトウェアです
https://prog-8.com/docs/nodejs-env-win
*ダウンロードしたソースコードを動かすためのソフトウェアです
yarnをインストールする
https://qiita.com/suisui654/items/1b89446e03991c7c2c3d
*サンプルを利用するソフトを管理するツールです
https://qiita.com/suisui654/items/1b89446e03991c7c2c3d
*サンプルを利用するソフトを管理するツールです
サンプルソースコードの初期設定
サンプルのダウンロード
リポジトリをダウンロードします。
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
起動したサンプルにアクセスします
成功すると下記の画面が表示されます。
現時点では筆者が作成したサンプルのコントラクトに接続されていますので、接続するコントラクトを自分のものに変更します。
自分のコントラクトに接続する
接続先のコントラクトを変更
では、自分のコントラクトでこのフロントエンドを動かしてみましょう。
やりかたは簡単です。
vscodeにて、サンプルソースコードを開き、
.envを変更します。
サーバーの再起動
いちど サーバーを落として再起動します。
ターミナルでサーバーを中断します。
ターミナルに移動し、macの場合は「control+c」winの場合は「ctrl+c」で中断します。
中断後、再起動します
yarn dev
いよいよ自分のコントラクトにアクセス！
画像が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のアカウントを取得します。
すでにアカウントをお持ちの方は、ログインしてください。
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の連携の場合は下記を参考ください。
なお無事ドメインを設定できるとDomain一覧が下記のようになります
まとめ
ここまでの一連の流れで、
- thirdwebでのコントラクトデプロイ
- thirdwebでのNFTメタデータのアップロード
- フロントエンドの設定
- フロントエンドの本番デプロイ
- 公開
の５つの作業手順を実施しました。
実はここまでの流れで下記ができるようになっています。
- 独自コントラクトのデプロイ方法
- 自分のブランドサイト構築
マーケットプレイスを用いることなく、自分の所有コントラクトを使って、自分自身のMINTサイトを作ることができるようになっています。
今回のソースコードをベースに、デザインを改造し、デプロイ先をメインネットにすれば、自分自身の真の意味でのオリジナルNFTを発行できます。
ぜひ、お試しください。
💖 いいね！役になったなと思ったら
twitterフォローお願いします。
twitterにてweb3周辺ツールの情報発信をしていますので、よろしければフォローお願いします。
https://twitter.com/hanz0chang
サービスの事前登録お願いします。
また、上記手順をもっとラクにする「web3generator」なるサービスを開発しています。よろしければ事前登録をしてリリース情報を受け取ってください。お役に立てるかもしれません🙏
NFTサイト作成の依頼
直接NFTのサイトの依頼を承っておりますので、お声がけください。
細かい点は要相談でございますが、手っ取り早くMINTサイトの構築が可能です。
依頼フォーム
執筆者の簡単なプロフィール
Webのキャンペーンサイトのプランナー業務から、
Webサービス／ネイティブアプリ／メディアの企画・運営、
またWebサービスの開発業務までの職種を経験してきた者です。Fintech案件を始め様々なDXプロジェクトに関わってまいりました。
現在はフリーランスエンジニアとして、SaaSプロダクトやWeb3プロダクトに関わっています。
ざっくり、Ruby / Ruby on Rails / Typescript / React.js / AWS / Azure / Figma あたりの技術やソフトウェアを用い、実装をしています。
hanzochang
代表取締役 半澤勇大
慶應義塾大学卒業後、AOI Pro.にてWebプランナーとして勤務。ナショナルクライアントのキャンペーンサイトの企画・演出を担当。その後開発会社に創業メンバーとして参加。Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立。2023年にWeb3に特化した開発会社として法人化。
2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
2017年ごろより匿名アカウントでCryptoの調査等を行い、ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信。
© 2023 hanzochang