【ThirdWeb × CocoShop】NFTミントサイトをノーコードで構築する方法
このガイドでは、ThirdWebとCocoShopを用いてNFTのミントサイトをノーコードで構築する方法をご紹介します。
最終的には以下のようなミントサイトを構築できます。
途中でわからなくなったり、質問等ある場合は以下のDiscordからご質問ください。
ThirdWeb、CocoShopとは
2つのサービスについて簡単に説明します。
ThirdWebはDApp構築ツールで、よく使用されるスマートコントラクトが用意されており、ノーコードで簡単にNFTやERC20が作成できます。
CocoShopはNFTマーケットプレイスやNFTミントサイトをノーコードで構築できるツールです。
NFT Dropコントラクト
今回使用するコントラクトはThirdWebのNFT Dropコントラクトです。
NFTドロップが何かが曖昧な方はOpenSeaの「NFT Dropとは」をご参照ください。
ThirdWebのNFT Dropコントラクトの仕様を簡単に説明すると、ミント時に発行するNFTの画像と属性（メタデータ）を設定し、ユーザーがNFTミントサイトからMintを実行することで実際にNFTをミントする仕様になっています。
さらに、ミント可能開始時刻や、アローリストの設定なども行うことができます。
実際に作成する
それではNFT Dropコントラクトをデプロイしていきます。
デプロイ
「Deploy Now」をクリックし、Contract Parametersを入力していきます。NameとSymbolは入力しておきましょう。それ以外の値は特に設定しなくても問題ありません。
入力が終わったら下にスクロールし、デプロイしたいチェーンを選択肢して「Deploy Now」ボタンをクリックします。
NFTのメタデータを設定
デプロイが完了したら次はNFTのメタデータを設定します。
管理画面のサイドバーからNFTsを選択し、「Batch Upload」をクリックします。
今回は以下のサンプルメタデータを使用します。もしテストで使用する場合はご自由にダウンロードしてください。
_metadata.jsonと全ての画像を同時選択します。
選択すると以下のように表示されます。正しく表示されたら次へ進みます。
次へ進むと以下のように「Reveal upon mint」または「Delayed Reveal」が選択できます。Reveal upon mintはユーザーがミントすると同時にRevealするオプションです。Delayed Revealは管理者がRevealをするまでRevealされないオプションです。
今回はよく使用されるDelayed Revealを選択します。
Revealの設定をします。
パスワードはRevealをする際に使用するパスワードです。
ImageはReveal前に表示する画像です。今回は以下の画像を使用します。
ShuffleにチェックをつけることでReveal前にどのNFTがミントされるか予想されることを防ぎます。
入力が完了したら「Upload」ボタンをクリックします。
ミント条件を設定
次にミントの条件を設定します。
サイドバーから「Claim Conditions」を選択して「Add Phase」をクリックします。そうすると選択肢がいくつか表示されますが、今回は誰でもミントできる「Public」を選択します。
次に条件を入力します。
「How many NFTs will you drop in this phase?」は今回のミントフェーズでミントできる個数です。
「How many NFTs can be claimed per wallet?」は1つのウォレットがミントできる最大個数です。
「How much do you want to charge to claim each NFT?」は1つミントするためにユーザーが支払う必要のあるトークン数です。
入力が完了したら「Save Phases」ボタンをクリックして設定を保存します。
以上でスマートコントラクト側は完了です。ThirdWebのタブは開いておいてください。
Mintサイトを開設
まずはCocoShopへログインしましょう
ログインが完了したら「Create」ボタンをクリックし、ストア名とドメイン名を入力して作成します。
インポート
次に、サイドバーから「Collectios」へ行き、「Add Collection」をクリックします。
Metamaskが起動するので「Sign」をクリックします。
今回はThirdWebで作成したスマートコントラクトを使用するので、Importを選択します。
各値を入力します。
「Contract Address」はThirdWebの上部に表示されているコントラクトアドレスをコピーして貼り付けます。
「Creation transaction hash」は先ほどのアドレスの右側の「polygonscan」を開き、「Contract Creator」の「at txn」の右側のリンクをクリックします。
表示されたTransaction hashをクリックして貼り付けましょう。
「ABI」はThirdWebのサイドバーから「Source」を選択し、一番下にスクロールすると表示されるので、それをコピーして貼り付けてください。
最後の「Blockchain」はスマートコントラクトをデプロイしたチェーンを選択します。今回は「Polygon Mumbai Test Network」を選択します。
入力が完了したら「Import」ボタンをクリックします。
インポートが完了したら以下のような画面が表示されます。
オンラインストア開設
次にオンラインストアを開設します。サイドバーから「Online Store」をクリックし、「Open online store」ボタンをクリックします。
開設が完了したら、「Popular themes」からAlchemyというテーマを追加します。
追加したら「Set as a main theme」をクリックしてメインテーマとして設定します。
これでストアの開設からテーマの選択が完了しました。
テーマをカスタマイズ
次はテーマをカスタマイズします。
「Customize」ボタンをクリックします。
テーマエディターが表示されます。ここでは文字や画像や色などをカスタマイズし、自分のブランドを作ることができます。
試しに「Hero」セクションを編集してみましょう。
タイトルを「Welcome to the CocoShop」に変更してみました。
次に左側のサイドバーから二つ目のアイコンボタンの「Global Settings」をクリックします。ここでは、全てのセクションやコンポーネント、ページに共通の設定を行うことができます。
試しに「Gradient Colors」を編集してみます。
カラーピッカーを使用して色を選択してみました。グラデーションが使用されている文字や背景色が変更されました。
このように、さまざまな部分を変更して自分のブランドに合わせてデザインを作成できます。
変更を保存するために右上の「Save」ボタンをクリックします。
確認
最後に確認しましょう。
ヘッダーの「Preview」をクリックすると実際のミントサイトが表示されます。
以下のように正常にミントサイトが表示されたら完了です。
テストネットでミントをテストする場合は、先ほど設定したThirdWebの「Claim Condition」の開始時間を変更して既にミント可能な状態にします。
ウォレット接続前
ウォレット接続後
ミント後
まとめ
このガイドでは、ThirdWebのNFTドロップコントラクトとCocoShopのドロップ用テーマのAlchemyを用いてNFTミントサイトをノーコードで構築しました。
ご質問があれば、CocoShopのDiscordでご質問ください！また、機能やガイドのリクエストもお知らせください。
CocoShopのアナウンスはTwitterで行うので、もしよければフォローよろしくお願いします。
Discussion