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

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

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

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

あわせて読みたい

【#1 ローカルネット編】簡単なNFT(ERC1155)を発行するコントラクトと、それを表示するサイトをMoralis… 今回は、dapp構築を簡単にしてくれるサービス「Moralis」を利用して、概要やその使い方について解説していきたいと思います。 出典：Twitter 本シリーズは、ボリューム…

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

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

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

※本記事は一般的な情報提供を目的としたものであり、法的または投資上のアドバイスとして解釈されることを意図したものではなく、また解釈されるべきではありません。ゆえに、特定のFT/NFTの購入を推奨するものではございませんので、あくまで勉強の一環としてご活用ください。

コントラクトの作成（※中断続きから）

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

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

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

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

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

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

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

あわせて読みたい

NFTの画像データは基本Ethereumチェーン上にはありません 先日 フルオンチェーンNFT サーバー管理（ホスト）型NFT の違い、及び第3の選択肢として「IPFS」の可能性についてTwitterで言及したところ、かなり大きな反響がありまし…

あわせて読みたい

不可能を可能にする開発テクニック｜724KBのJPG画像をフルオンチェーンNFTにする方法と具体的な手順を解… 先日、ニュージーランド在住のフォトグラファーShinichi MaruyamaさんのNFT作品 “Light Sculpture” が公開されました。 「Light Sculpture」は永続性をコンセ…

ではここで一度、ローカル環境にコントラクトをデプロイして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です。

以上を踏まえて、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を表示する手順などを中心に書いていこうと思います。

• 法人プランLP：https://ethereumnavi.com/lp/corporate/
• Twitter：@STILL_Corp
• メールアドレス：info@still-llc.com