本文へ移動
hanzochang

技術と実践のノート

リビールNFTの作り方 | thirdwebでつくるノーコードなリビールNFT作成方法

公開 更新

著者:株式会社hanzochang

この記事では、リビール(reveal)機能付きのNFTの作成方法を紹介します。thirdwebを使うことで、ノーコードで実現できます。リビールNFTを使うことで、NFTプロジェクトに期待感を醸成したり、またはガチャのようにNFTごとに価値を変化させたい場合に効果的です。

NFT のリビールとは

リビール(reveal)とは「明らかにする」という意味です。

NFT のリビール とは、最初は隠されていて、あるタイミングで内容が公開される NFT のことを指します。

目次

tokenURIについて

NFTでは、一般的に、トークン番号に対応するURLを出力する機能を実装する必要があります。

その機能はtokenURIという名称の機能で、トークン番号に対応したURIを発行します。

tokenURIで出力されるするURIのイメージは下記です。

  • トークン番号0に対応した metadata: ipfs://example123456789/0.json
  • トークン番号 1 に対応した metadata: ipfs://example123456789/1.json
  • トークン番号 2 に対応した metadata: ipfs://example123456789/2.json
  • トークン番号 3 に対応した metadata: ipfs://example123456789/3.json
  • ...
URLに規則性があると類推できてしまう

こうした場合、URIに規則性があるので、どんなトークン番号もURIを簡単に類推可能です。 コントラクトコードで隠す工夫をしなければ、誰でも閲覧できてしまいます。

例えば、1000 個の MINT できる NFT コントラクトがあったとします。 特に工夫をしなければ、それぞれのトークン番号は、0,1,2,3,4...999 と規定されます。

こうした場合、トークン番号に対応したすべてのURIは類推可能です。

例えば、期日を区切って、10回に分けて100個ずつMINTするようなキャンペーンを組んで、期待感を煽っていこう、とした場合、 このままの仕組みですと先のデータはあらかじめわかってしまうので、仕掛ける側としては都合が悪いです。 (手動で後でアップロードするという力技はある程度できますが)

先のNFTを見せたくない場合は、隠しておく必要があります。

こうしたときにリビールという仕組みが使われます。

見えることが悪いわけではない

ただ、あらかじめ見えることは悪いことではありません。あらかじめ発行しきっているプロジェクトもありますし、 パターンに規則性があり、NFT ごとに値段に違いがなければ、問題になるようなことではありません。

リビールNFTのメリット

リビール機能を実装することにより、URIを隠すことができ、こうした推測を防ぐことができます。 任意のタイミングで公開フラグを立てることにより、URIを変化させることができます。

具体的にはリビール前にはダミーの画像とダミーのURIを参照させておき、リビール後に、本来意図したURIに変化させるという仕組みを取ります。

これで、発行されていないNFTを類推できないようにしたり、あるいは、NFTを購入したとしても一定の期日にならないと中身がわからない、といった演出をすることが可能です。

リビールNFTの使いどころ

リビールNFTは例えば下記の時に使えます。

  • 演出をつけたい場合
  • マーケティング上、期日を設定して期待感を醸成したい場合

演出がある場合、あらかじめ URI と中身の画像がわかってしまうと、MINT の順番争いになるなど、さまざま不都合が起こりそうです。NFT を使ったゲームやアプリにて、トークンによって能力の差があるような仕組みの場合も、あらかじめ出るものがわかっていると不都合が多そうです。

マーケティング施策としてリビールを活用する手もあります。 いつリビールするかの期限だけを宣言しておき、購入者に MINT を解放しておく。リビールする日に向けてコミュニティの期待感を醸成しておく、という施策も考えられます。

一点注意として、日本国内でいわゆる”ガチャ”のような仕掛けを行った場合、賭博罪に引っかかる可能性があるとのことで、プロジェクトへの反映は各自法務担当者の見解を仰ぐなど、十分な注意が必要です。

では本題に進みます。

thirdwebを利用します

リビールを実装するにあたり、thirdwebを利用します。thirdwebにはコントラクトのテンプレートが用意されており、選んだテンプレートをすぐにデプロイできます。

thirdweb https://thirdweb.com/

https://thirdweb.com/

thirdwebで実現できるリビールは、 コントラクトオーナー(つまり自分)が好きなタイミングで、リビールを行うパスワードを入力し、リビールを実施する、というものです。

MINTした直後にリビールしたり、あるいは指定した日時に自動的にリビールする、といった実装はできません。

それではリビールNFTの作成をすすめて行きましょう。

thirdwebのダッシュボードにアクセスします

https://thirdweb.com/dashboard

https://thirdweb.com/dashboard

thirdwebに接続します

walletを接続します。

Ethereum,Polygon,Fantom,Avalancheを利用できます。この例では、EthereumのテストネットであるRinkebyを利用します。右上のウォレットボタンから、Rinkeby(ETH)を選びましょう。

Pre-build Contract 一覧画面へ

Deploy new contractを選択

Deploy new contractを選択した後、作成できるコントラクト一覧が現れます。

必要機能が詰まったコントラクトが作成されていて、非常に便利です。すぐにNFTを作ることができます。

参考:Pre-buildContractの説明

参考までに、22/06現在の各コントラクトの詳細を説明すると下記です。(ERC20の説明は省きます)

ContractをDeployします

NFTDrop(ERC721)のDeployボタンを押下します。

コントラクトのメタデータを入力します。

  • 項目の意味は下記の通りです
    • Name (必須): コントラクト名
    • Symbol (必須): NFTのシンボル名
    • Image: コントラクトの画像(NFTのtokenURIではない、あくまでContractのサムネ)
    • Recipient Sales (必須): MINT時のNFTの販売料金の受け取り先のWalletAddress
    • Royalities : 二次流通時のマージンのパーセンテージ設定と受け取り先のWalletAddress
    • Networks : デプロイするチェーン (ひとまずRinkebyを選択)

Deployボタンを押下し、MetamaskでトランザクションをConfirmします。

BatchUploadでNFTをアップロード

Batch Uploadボタンを押下します。

ドロップ画面が表示されます。

ドロップエリアに、CSVまたはCSVと画像を含んだフォルダをアップロードすると、まとめてNFTをアップロードすることができます。ipfsへのホスティングもこのUIからやってくれます。

参考:サンプル用のNFTデータをダウンロード

(この項目は任意です) アップロードするNFTをいきなり用意するのは大変なので、サンプルを用意いたしました。

https://drive.google.com/drive/folders/1mXmmN_eArKsoXkny_OcH6CNibuvANtrb?usp=sharing

https://drive.google.com/drive/folders/1mXmmN_eArKsoXkny_OcH6CNibuvANtrb?usp=sharing

右上の「すべてダウンロード」で、アップロード用のサンプルをダウンロードできます。

ダウンロードしたらzipを解凍します。

NFTデータをアップロード

CSVと画像を含んだフォルダごと、ドロップエリアにまるっとドロップします。

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

リビール状態の設定

「Delayed Reveal」を選択します。

リビール解除のパスワードと、リビール前の状態を設定します。

各設定項目は下記です。

  • Password / Confirm password: リビール解除のためのパスワード
  • Placeholder - image: リビール前のNFTの画像
  • Placeholder - name: リビール前のNFTの名前
  • Placeholder - desciption: リビール前のNFTの文章

なお、リビール対象が複数あっても、すべて同じものが設定されます。 個別に設定したい場合は、Batch Upload時に小分けにするなどの工夫が必要です。その場合都度ガス代がかかるので注意です。

Uploadボタンを押下します。

Walletが出てくるので「Confirm」を押下します。

これにてリビールするNFTのアップロードは完了です。

アップロードが完了すると、コントラクトのトップ画面に遷移します。アップロード時のCSVに登録した画像が表示されておらず、リビール時に登録した画像やパラメータになっていることがわかります。

リビール状態をコントラクトで確認

(この作業は確認作業のため、任意です。不要な方は飛ばしていただいて結構です)

リビールに設定したものが、実際のチェーン・コントラクトでどう表示されているのかを実データで確認します。

NFTをMINTしないとコントラクトで参照できないので、MINT作業を行います。

「Set Claim Phase」または「Claim Phases」を押下します。

この画面は、NFTのMINT条件を設定するものです。

ClaimPhasesのボックスにある「Add Initial Claim Phase」を押下します。

MINT条件のパラメータを設定します。NFTの価格や、一人当たりの販売上限、MINTの実行間隔制限など、細やかな設定が可能です。

Save Claim Phases を押下します。

WalletのConfirmを押下して、Transactionを発行します。

Embedを押下します。Embedは、wordpress等のサイトに貼り付けることができるMINT用のボックスを出力できます。プレビュー機能があるので、プレビュー機能にて、実際にMINTします。

数量を設定し、MINTボタンを押下します。

Confirmを押下します。

Overviewに移動します。 MINTしたNFTのOwned byが変更されていることを確認することができます。

コントラクトのアドレスをコピーします。

rinkebyのetherscan( https://rinkeby.etherscan.io/ )にアクセスし、addressフォームに、コピーしたコントラクトのアドレスを貼り付けます。

https://rinkeby.etherscan.io/

コントラクトの詳細ページに遷移するので、Contract -> ReadContractの順にクリックします。

下に辿っていくと「tokenURI」という項目があるので、そこまで移動し、開きます。(ページ内検索でtokenURIと検索するともっと早く見つけられます)

フォームがあるので、MINTしたIDを入力し、「Query」ボタンを押下します。

NFTが参照するmetadataのアドレスが表示されます。thirdwebがアップロードしてくれているipfsのuriが表示されています。このipfsの中身を確認していきます。

ipfsのアドレスをブラウザに入力しても、正しくジャンプしないので、下記のようにURIを書き換えます。

アクセスすると、jsonが表示されます。リビール用に設定したパラメータが表示されていることがわかります。

さらに画像を確認していきましょう。jsonに含まれる「image」のipfsURIを下記のように書き換えます。

アクセスしてみると、リビール用に設定した画像が表示されるのが確認されます。

と、このように、コントラクト上からもリビールのURIが設定されていること、そしてリビール前のコントラクトが出力されていないことがわかります。

では次の項目では、実際にリビールを実施してみてみます。

リビールを実行する

Reveal NFTsを押下します。

設定したパスワードを入力します。

トランザクションを発行するので、confirmを押下します。

リビール後

リビールするとこのように、Batch UploadでアップロードしたNFT群が公開されていることがわかります。

参考:コントラクトでリビールを確認する

etherscanにて、リビールしたNFTを確認できます。当該コントラクトにアクセスしtokenURIにMINT済みのリビールしたNFTのIDを入力すると、URIが変わっていることがわかります。

リビール設定を複数持たせる場合

なお、リビール設定を複数持たせた場合は、RevealNFTsにプルダウンメニューが表示され、リビール一覧が表示されます。リビールを段階的に行いたい場合は、いくつか分割するとよさそうです。

以上がリビールNFTの作り方、となります。

要旨をまとめると

  • 通常NFTのトークン番号のURIは類推できてしまう。トークンごとに価値の変化を持たせたい場合など不都合が多い。
  • リビールNFTという方法で、URIを隠しておくことができる。
  • thirdwebでは、コントラクト作成者がフラグを手動解除する形式のリビールを提供している
  • thirdwebでのリビールのやり方と、実際のコントラクトでの変化を確認できた。

この記事を書いた人

Webプランナー、開発会社の創業メンバーを経て、Fintech・DX・Web3の企画・開発に従事。2021年に独立し、2023年に株式会社hanzochangを設立。現在はAIを活用した業務改善と、自社サービス「指定管理者制度AI」の開発・運用に取り組んでいます。

半澤勇大のXアカウント(新しいタブで開く)

この記事の株式会社hanzochangについて
少し紹介させてください!

この記事に関連する当社のサービス

Web3アプリ開発受託サービス

ウォレット連携やNFTを、使いやすいアプリに。

Solanaなどのブロックチェーンを使ったアプリを、企画・検証から開発・運用まで支援します。ウォレット連携やコントラクトだけでなく、利用者が操作する画面までまとめて設計します。

サービスの詳細を見る
Jくんが接続されたアプリを組み立て、鉛筆で原稿を作るイラスト。Web3サービス開発とコンテンツ作成を表す。
  • 企画・技術検証

    事業の目的に合わせ、必要な機能と技術を検討。

  • アプリ・連携開発

    ウォレットやコントラクトと画面を一体で開発。

  • 公開・運用支援

    公開後の保守や機能改善まで継続して対応。

Web3アプリの開発について、お気軽にご相談ください。