【#2 テストネットへデプロイ&OpenSeaでNFTを表示確認編】簡単なNFT(ERC1155)を発行するコントラクトと、それを表示するサイトをMoralisで作ってみよう

どうも、でりおてんちょーです。

今回は、dapp構築を簡単にしてくれるサービス「Moralis」を利用しながら、コントラクトをテストネットへデプロイ&OpenSeaでNFTを表示確認していきたいと思います。

出典:Twitter

本シリーズは、ボリュームが多いため数記事に分割してお届けしてまいります。

また、本記事は前回の記事からの続きとなりますので、以下の記事から順に進めていかれることを推奨いたします。

前記事の最後(上写真のところ)から続きの内容としてご活用ください。

Solidityでコントラクトの開発をおこなうことには慣れてきたものの、フロントエンドの開発は初心者といった方に参考にしていただけば幸いです。

でははじめに、この記事の構成について説明します。

STEP
コントラクトの作成(※中断続きから)

まずは、Webサイトで表示することになるNFTを発行するための簡単なコントラクトを、前回中断していたところの続きから構築・デプロイしていきます。

STEP
OpenSeaのテストネット(Rinkeby)でNFTを表示してみる

次に、OpenSeaのテストネット(Rinkeby)でNFTを表示する作業へ移り、以下画像のように作成したNFTを表示確認します。

今回のゴール

本記事が、dapp構築を簡単にしてくれるサービス「Moralis」の概要や使い方などについて理解したいと思われている方にとって、少しでもお役に立てれば幸いです。

※本記事は特定のFT / NFTの購入を推奨するものではありません。あくまで勉強の一環としてご活用ください

今月のスポンサー:Yay! – WEB3時代のSNS「Yay!」でリサーチャー募集
目次

コントラクトの作成(※中断続きから)

前回コントラクト(MoralisNFT.sol)の作成を途中で中断していたので、そちらを開きます。

まずは、ERC1155コントラクトのconstructorの""内に、「Site is available at: ○○○○」の○○○○部分をコピペします。

https://ughvlh28uzea.usemoralis.comの部分のこと

そしてこれをbaseURIの形(末尾に/{id}.jsonを付け足す)に変更します。

https://ughvlh28uzea.usemoralis.com/{id}.json

これがERC1155コントラクトにURLを渡す方法であり、OpenSeaなどが読み取れる形式になります。

参考:
eips.ethereum.org/EIPS/eip-1155#metadata

このように多くの場合、画像データをはじめとするNFTのメタデータはフルオンチェーンと呼ばれる形式ではなく、JSONファイル形式で特定のホスト先を指定しているケースが多いです。

ではここで一度、ローカル環境にコントラクトをデプロイしてErrorが起きないか確認しておきましょう。

ターミナルで以下コマンドを実行してコンパイルをおこない、Solidityのコードをデプロイできる形にします。

$ npx hardhat compile

コンパイルと聞くと難しそうな印象ですが、要は機械が読める形式に翻訳してあげる作業というイメージです。

これでコントラクトをデプロイする準備が完了したので、次はいよいよデプロイ手順に移ります。

まずは以下のコマンドを実行して、前回の記事で作成したscriptsディレクトリに、deploy.jsファイルを作成します。

$ touch scripts/deploy.js

続いて、作成したdeploy.jsファイルに以下をコピペして保存してください。

async function main() {
    const factory = await ethers.getContractFactory("MoralisNFT");
    const contract = await factory.deploy();
    await contract.deployed();
    console.log("Deployed to:", contract.address)
  }
  main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
    });

上のコードを簡潔に説明すると、MoralisNFTというコントラクトをデプロイしてみて、成功したら「Deployed to:(コントラクトアドレス)」を返しますが、失敗したらエラーメッセージを返すというものです。

ではローカル環境でデプロイしてみるために、まずは以下コマンドでローカルネットワークを起動します。

$ npx hardhat node

するとこのように、ローカル環境用に10,000ETHが入ったアカウントが20個作成されます。

このローカルネットワークを立ち上げたまま、別のターミナルシェルを開いて以下コマンドを実行してみてください。

$ npx hardhat run scripts/deploy.js --network localhost

ローカル環境の場合は、--network localhost は省略してもOKです。

「Deployed to:(コントラクトアドレス)」と返されたらローカル環境でのデプロイ成功です。

このようにHardhatを使うことで、簡単にローカル環境でのデプロイを試すことができるので、非常に便利です。

以上を踏まえて、OpenSeaのテストネット(Rinkeby)でNFTを表示する工程に移っていきたいと思います。

立ち上げたローカルネットワークは終了(ctrl + C, シェルを削除など)していただいて結構です。

OpenSeaのテストネット(Rinkeby)でNFTを表示してみる

執筆時点では、OpenSeaのEthereumテストネットはRinkebyしか対応していない状況なので、今回はRinkebyを使っていきます。

まずは、MetaMaskから①Rinkeby test Networkを選択し、同じく②Rinkeby test Networkをクリックします。

もし、Rinkeby test Network上のETHを保有していない場合は、faucet.rinkeby.ioなどを通して調達しておきましょう。

では、ターミナルで以下のコマンドを実行して、作成したコントラクトをRinkeby test Network上にデプロイします。

$ npx hardhat run scripts/deploy.js --network rinkeby

ローカル環境とは異なり、テスト環境の場合は少し時間がかかります。

デプロイが成功したらコントラクトアドレスが表示されるので、こちらをコピーしておきます。

続いて、テストネット版OpenSeaを開き、右上にあるプロフィールにある「My Collections」をクリックします。

既にコレクションに表示されていれば良いですが、まだ何も表示されていない方は「Import an existing smart contract」をクリックしてください。

今回はテストネットなので、真ん中をクリックします。

あとはコピーしたコントラクトアドレスをペーストして「Submit」をクリックすれば完了です。

「We couldn’t find this contract. Please ensure that this is a valid ERC721 or ERC1155 contract deployed on Rinkeby and that you have already minted items on the contract.」
と表示される場合は、半日もしくは1日経過してから再度試してみると成功することが多いです。

成功すると、このようにOpenSeaのコレクションとして表示され、当然ながらroyaltyなども設定できるようになっています。

ここまでの一連の作業を終えると、とても感慨深いものがありますよね。お疲れ様でした。

まとめ

本記事では、dapp構築を簡単にしてくれるサービス「Moralis」を利用しながら、コントラクトをテストネットへデプロイ&OpenSeaでNFTを表示確認しました。

本記事が、Moralisやdapp構築の初級編の内容などについて理解したいと思われている方にとって、少しでもお役に立ったのであれば幸いです。

ここまで読んでこられた中で、分かりづらかったところや間違っていると思われる箇所など、ぜひご指摘いただけますと幸いです。

次回は、Webサイトを作成して先程のNFTを表示する手順などを中心に書いていこうと思います。

最後に、MoralisやSolidityなどについて

  • 聞いてみたいことがある
  • 分からない部分がある
  • もっと多くの情報が知りたい

という方は、Discordコミュニティ「イーサリアムnavi」にご参加ください!

イーサリアムnaviのDiscordコミュニティには

  • Solidityを勉強したい・既に勉強している
  • 開発に興味がある
  • NFTが好き・興味がある

といった方々がたくさん集まっており、日々NFTや開発に関する情報を共有したり、不定期で勉強会などイベントも開催しています。

また、Twitter・YouTubeでの情報発信にも力を入れていますので、合わせてフォローしていただけると幸いです。


今月のスポンサー:Yay! – WEB3時代のSNS「Yay!」でリサーチャー募集

Yay!

匿名コミュニティYay!がリサーチャーを募集中です。

誰もが素が出せて、フラットで、他人に寛容なバーチャルワールドを作っています。

この冬IEOを目指しています。一緒にサスティナブルな経済圏を作っていきましょう!

励みになるので、よかったらSNSなどでシェアしてください!

この記事を書いた人

最先端のCryptoネイティブなNFTプロジェクト、SolidityなどWeb3開発情報、その他Ethereum周りの情報などを中心に発信しています。

リサーチャーやアドバイザー含むお仕事のご依頼や、イーサリアムnaviに対する広告掲載など、お気軽にご連絡ください。

目次
閉じる