メニュー
  1. ホーム
  2. web3開発
  3. 【#1 ローカルネット編】簡単なNFT(ERC1155)を発行するコントラクトと、それを表示するサイトをMoralisで作ってみよう

【#1 ローカルネット編】簡単なNFT(ERC1155)を発行するコントラクトと、それを表示するサイトをMoralisで作ってみよう

web3開発
でりおてんちょー

どうも、イーサリアムnavi運営のでりおてんちょーです。

イーサリアムnaviでは、毎日大量に流れてくるクリプトニュースを調査し、その中でも面白いトピックやクリプトネイティブな題材を選び出し、それを分かりやすく読みやすい形でお伝えしています。パラパラと内容を眺めているだけでも、事業やリサーチの新たなヒントに繋がることがあります。世界の最先端では、どのようなクリプトコアな試みが行われているのかを認識するだけでも、 思わず狭くなりがちな視野を広げてくれるでしょう。

今回は、dapp構築を簡単にしてくれるサービス「Moralis」を利用して、概要やその使い方について解説していきたいと思います。

出典：Twitter

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

  1. 簡単なNFT(ERC1155)を発行するコントラクトの作成
  2. メタデータ設定などの作業
  3. Moralisアカウントの作成
  4. Moralisを活用してWebサイトの作成

NFTを発行するためのコントラクトについては、本メディアでも何度かテーマとして取り上げてきましたが、フロントエンドの開発は筆者自身あまり経験がなかったため記事にしてこなかったという背景があります。

しかしながら、『Moralisを利用することでフロントエンドの開発を爆速かつ簡単に進めることができる』という情報を聞きつけたので、試しに使ってみた次第です。

結論としてMoralisは、無料で使えて非常に使い勝手が良いサービスで、今後も長くお世話になっていくのではないかと考えており、他の方にもオススメできるものでした。

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

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

STEP
Moralisとは？

まずはMoralisの概要について、公式ドキュメントを日本語訳したものを載せております。
※いきなり開発から始めたいという方は読み飛ばしていただいても結構です。

STEP
簡単なNFT(ERC1155)を発行するコントラクトの作成

まずはWebサイトで表示することになるNFTを発行するための簡単なコントラクトを、Hardhatを使って構築していきます。

STEP
メタデータ設定などの作業①

NFTの画像データや名前などの「メタデータ」を設定するための作業を進めていきます。

STEP
Moralisアカウントの作成

ある程度進んだところで一度メタデータ設定作業を中断して、本記事を進める上で必要なMoralisアカウントの作成をおこなっていきます。

STEP
メタデータ設定などの作業②

Moralisアカウントの作成を終えたら、残ったメタデータ設定などの作業を終えてシリーズ1を終了といたします。

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

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

「定期購読プラン」の詳細はこちら

「定期購読プラン」は現在、トライアル期間を設けているため、初回は30日間無料でプランにご登録いただけます。この機会にぜひお試しいただき、サービスの魅力を体験していただければ幸いです。

※ 1ヶ月間の無料トライアル期間終了後に、自動的に有料プランへと移行します。
※ 無料トライアル期間中にご解約いただければ、ご利用料金は発生いたしません。

定期購読プランに登録する
目次

Moralisとは？

Moralisについての概要は本記事では詳述しませんが、気になる方は公式ドキュメントをご確認いただくか、公式ドキュメントの一部を筆者が日本語訳した以下アコーディオンから必要箇所をクリック展開してご参考ください。

Moralisとは？

Moralisは人生を変えるEthereum SDKとサーバーのソリューションです。

クリプトのFirebaseを考えてみてください。Moralisはブロックチェーンプロジェクトのためのマネージドバックエンドを提供します。ユーザーの残高をデータベースに自動的に同期し、オンチェーンアラートの設定、スマートコントラクトイベントの監視、インデックスの構築など、さまざまなことが可能になります。すべての機能は、使いやすいSDKからアクセスできます。Moralisが提供するすべての機能は、デフォルトでクロスチェーンに対応しています🤯。

なぜMoralisを使うのか？

Moralisは、Ethereum、BSC、Polygon、Solana、Elrond（さらに追加予定）上でdAppを構築しデプロイする最速の方法です。すべてのMoralisのdAppはデフォルトでクロスチェーンです。Moralis上で構築することで、あなたのdAppは将来的にも保証されます。たとえ新しいブロックチェーンが発明されたとしても、あなたのdAppはどのチェーン上でも即座に動作するのです。あなたが初めてブロックチェーンプロジェクトを構築する場合でも、すでにベテランの開発者であっても、Moralisはあなたのプロジェクトの構築、維持、改善を容易にします。以下のビデオでは、Moralisがどのようなもので、どのようにあなたのプロジェクトに役立つのか、より詳しく説明しています。

What is Moralis Web3? Life-Changing Ethereum SDK, Building Dapps Fast

Moralisサーバーとは何ですか？

Moralisで構築されたすべてのdAppの中核には、Moralisサーバーがあります。Moralis SDKと共に、ユーザー認証とユーザートークン残高、NFT、トランザクション、イベントなどのブロックチェーンデータを持つdAppを迅速に作成することができるものです。それでは、使用することになる Moralisサーバーのさまざまなコンポーネントを簡単にまとめてみましょう。

データベース

ここにすべてのデータが保存されます。例えば、ユーザーがクリプトウォレット認証を使ってdAppにサインインすると、そのウォレットアドレスは、トークン残高、過去の取引、イベントなど、設定したデータと共に自動的にデータベースに保存されます。このデータは、dAppフロントエンドで即座に使用することができます。詳しくは、以下の章をご覧ください。Moralisサーバーデータベースとユーザー認証の章を参照してください。

クラウドコード

dAppの中でバックエンドのコードを実行する必要がある場合、Moralisのクラウドコード機能を利用することで実行することができます。例えば、バックエンドで計算を必要とするデータの集計やフィルタリングを行う必要があるかもしれません。クラウドコードを使えば、JavaScriptで関数を書き、それをdAppから呼び出すか、特定のイベントが発生したとき、またはスケジュールされたジョブによってトリガーさせることができます。これについては、クラウドコードの章で詳しく説明しています。

MoralisSDK

MoralisのSDKは、これらすべてを結びつけるものです。私たちのJavaScript SDKは、あなたのdAppがあなたのMoralisサーバーと対話する方法です。SDKを使用すると、ユーザー名とパスワード、またはMetaMaskのようなクリプトウォレットを通じてユーザーを認証することができます。また、SDKを使用してユーザーデータを取得および設定して、残高、NFT、イベント、またはトランザクションを取得することができます。SDKの詳細については、ここをクリックしてください。

Moralisドキュメンテーションへようこそ

Welcome to the Moralis Documentation

わずか数行のコードでMoralisを使ったクールな作品を発見できることに興奮しています。始める前に、いくつかの重要な情報を確認しておきましょう。

期待されること

  • このドキュメントは、ある程度のプログラミングの知識があることを前提としています。
  • このドキュメントは現在進行形で、定期的に更新されます。
  • もし、このドキュメントに分かりにくい点があったり、改善の提案がある場合は、Moralisフォーラムに投稿して私たちに教えてください。
  • Moralis SDKやサーバーダッシュボードにバグを発見した場合は、このGitHubレポに詳細な説明と再現手順を添えて報告してください。技術的な質問、またはコードに関するヘルプが必要な場合は、Moralisフォーラムに投稿してください。もし、どこに投稿したらよいかわからない場合は、MoralisフォーラムまたはFAQ & How to Get Helpページに投稿してください。

前提条件

このドキュメントは、JavaScript、オブジェクトの操作、データベースへの問い合わせ、およびWeb3の開発に関する何らかの知識があることを想定しています。詳しくは、前提条件のページをご覧ください。Web3の開発が初めての方は、以下の動画をご覧ください。

How to Build Web3 Dapps (Ganache, Truffle, Moralis) – Ivan on Tech Explains

経験豊富な開発者の方は、TruffleとGanacheを使用してMoralisでdAppを構築する方法について、次のビデオをご覧ください。

How to Build Serverless Dapps Part 1 – Web3.js & Moralis Programming Tutorial

Moralisで最初のdAppをセットアップする

Moralisを使った最初のサーバーのセットアップや、dAppとの連携方法については、Getting Startedの章を参照してください。または、3分でできる簡単なdAppの作り方についてのガイドをご覧ください。

Build a Simple dApp in 3 Minutes – Setup (Part 1)

Moralisサーバーの作成

各dAppには、オンチェーン部分（スマートコントラクト）とオフチェーン部分（サーバー）があります。サーバーは、ブロックチェーンからデータを収集し、Webやモバイルアプリなどのクライアントに提供するために使用されます。

Moralisサーバーとは何ですか？

各dAppは通常2つのパートに分かれています。

  • オンチェーン部分：スマートコントラクト、トークンやNFTなどのオンチェーンアセット、オンチェーントランザクションなど。
  • オフチェーン部分：ブロックチェーンからデータを収集し、ウェブアプリやモバイルアプリなどのクライアントにAPIを提供し、ブロックチェーンにインデックスを付け、リアルタイムのアラートを提供し、異なるチェーンで起こっているイベントを調整し、ユーザーのライフサイクルを処理するなど、多くのことを行うバックエンドインフラです。

オフチェーン部分の実装を高速化するために、Moralis Serverが使用されます。Moralis Serverは、ほとんどのdAppができるだけ早く開始するために必要とするすべての機能をバンドルしたソリューションです。

What is Moralis Web3? Life-Changing Ethereum SDK, Building Dapps Fast

（↑）Moralisサーバーのパワーと、クロスチェーンdAppsの構築に役立つことを理解したい場合は、このビデオをご覧ください。

Moralisサーバーの立ち上げ

Building Your First Ethereum Dapp – Logging in Users and Seeing all Their Assets and Transactions

（↑）ビデオチュートリアルをご希望の方は、このビデオでこの記事でカバーされている内容を多くカバーしています。

無料アカウントに登録する

Moralisにアクセスし、無料アカウントにサインアップしてください。

Moralisサーバーの作成

右上の「Create new server」をクリックします。Moralisを使用して、メインネット、テストネット、ローカルdevチェーン（例えばHardhatやGanache）用のdAppsを開発することができます。とりあえず、Mainnet Serverを選択してください。

次に、dAppにデータを取得させたいネットワークを選択します。このデモの目的では、Ethereum、Polygon、BSC、Avalancheを選択します。

これで、ダッシュボードにサーバーが表示されます。次に、サーバーと通信するウェブアプリを作成して、ユーザーのログイン、ユーザーデータ（トークン、NFT、過去の取引）の取得など、さまざまなことができるようになります。もちろん、デフォルトではすべてクロスチェーンです🤯。

SDKの接続

Moralisサーバーを起動したら、次はMoralis SDKを使用してサーバーに接続します。このガイドでは、いくつかの簡単なステップでそれを行う方法を説明します。

このガイドでは、Vanilla Javascriptを使用した手順を紹介します。Moralisには、React、Angular、その他の一般的なフレームワークのための専用のボイラープレートがあります。

ボイラープレート（boilerplate）とは、使い回す前提で用意されたテキスト（文言）の通称。 いわゆる「テンプレ」「お決まりの」テキストのことである。 海外のプレスリリースによくある文末の定型的文言や、コンピュータプログラミングにおいて高頻度で使い回されるソースコード群などを指す意味で用いられる。

出典：ボイラープレートとは何？ Weblio辞書
あわせて読みたい
Getting Started | Moralis Web3 Documentation

Moralis Boilerplateは、様々なフレームワークを使い始めるためのスタータープロジェクトです。

WebページにMoralisを追加する

空のページを作成する

まず、同じディレクトリに index.html と main.js という空のページを作成し、main.js ファイルと一緒に moralis スクリプトをインポートします。ページには、ログイン用とログアウト用の2つのボタンを設置します。（コードはここを参照）

SDKの初期化

SDKを初期化するために、MoralisダッシュボードからサーバーURLとAPP IDを取得する必要があります。Moralis Dashboardにアクセスし、サーバー名の横にある[View Details]をクリックします。

次に、Moralis.start関数を使ってサーバーを初期化します。

（コードはここを参照）

認証デモ

SDKが正常に接続されたので、Moralisのパワーを使ってみましょう。ユーザーをログインさせ、Moralisデータベース内のすべてのチェーンからそのユーザーのすべてのトークン、トランザクション、NFTを即座に取得することができます。

（コードはここを参照）

ローカルホストからページを表示

index.htmlをlocalhostでWebページとして実行します。最も簡単な方法は、Visual Studio Codeのライブサーバ拡張機能を使うことです。index.htmlを右クリックし、「Open with Live Server」を選択するだけです。

Metamaskでログイン

webページにアクセスし、「Login」をクリックします。Metamaskのポップアップ表示され、サインインするよう求められます。

Moralisデータベースですべてのユーザー資産を見る

ユーザーがログインするとすぐに、Moralisはそのユーザーに関するすべてのオンチェーンデータをすべてのチェーンから取得し、Moralisデータベースに格納します。モラリスデータベースを見るには、サーバーに行き「Dashboard」をクリックしてください。

アセットの移動

Metamaskウォレット内のアセットを移動して、Moralisデータベースがリアルタイムに記録を更新していく様子を観察してみましょう。

氷山の一角

すでにお分かりのように、Moralisはブロックチェーン開発者のための真のスーパーパワーです。しかし、この小さなデモは氷山の一角に過ぎません。Moralisは、あらゆるブロックチェーンのユースケースに対応する無限のツールと機能を提供します。最も重要なことは、すべてのものがデフォルトでクロスチェーンであるということです。Moralisの完全なパワーを把握するために、残りのドキュメントを自由に探索してください。

NPM経由での接続

Moralis NPMパッケージのインストール

大規模なプロジェクトでは、npmモジュールを使用します。

npm install moralis

ブラウザ

その後、通常通りにincludeします。

const Moralis = require('moralis');

NodeJs

サーバーサイドのアプリケーションやNodeJsのコマンドラインツールの場合は、以下をincludeします。

// In a node environment
const Moralis  = require('moralis/node');
ボイラープレートプロジェクト

Moralisボイラープレートは、様々なフレームワークを使い始めるためのスタータープロジェクトです。

Web3 Reactボイラープレート

このReactボイラープレートは、次のような新しいDappを始めるためのすべての機能を備えています。

  1. ウォレットによるユーザー認証
  2. WalletConnectの完全サポート
  3. ユーザー残高のページ
  4. ユーザーNFTのページ
  5. ユーザートランザクションのページ
  6. ページまたはウォレット
  7. 分散型取引所(DEX)向けページ
GitHub
GitHub – ethereum-boilerplate/ethereum-boilerplate: The ultimate NextJS Ethereum Dapp Boilerplate wh… The ultimate NextJS Ethereum Dapp Boilerplate which gives you maximum flexibility and speed. Feel free to fork and contribute. Although this repo is called &quo…

Web3 React Nativeボイラープレート

このReact Nativeボイラープレートには、以下のような新しいiOSやAndroidのWeb3アプリを始めるための機能がすべて備わっています。

  1. ウォレットによるユーザー認証
  2. WalletConnectの完全サポート
  3. ユーザー残高のページ
  4. ユーザーNFTのページ
  5. ユーザートランザクションのページ
  6. ページまたはウォレット
  7. 分散型取引所(DEX)向けページ
GitHub
GitHub – ethereum-boilerplate/ethereum-react-native-boilerplate: The ultimate full-stack Ethereum Re… The ultimate full-stack Ethereum React Native Dapp Boilerplate which gives you maximum flexibility and speed. Feel free to fork and contribute. Although this re…

NFTマーケットプレイスボイラープレート

シンプルなNFTマーケットプレイスで、ユーザーは以下のことを行うことができます。

  • NFTの検索
  • NFTの購入
  • NFTの販売
  • クロスチェーンで動作

他のボイラープレート

Moralis Vanilla JS Boilerplate.

Moralis Angular Boilerplate (video demo).

Moralis VueJS 3 Boilerplate (Javascript).

Moralis VueJS 3 Boilerplate (Typescript Alternative).

簡単なNFT(ERC1155)を発行するコントラクトの作成

今回は、以下のチュートリアル動画を参考にしながら、Moralisを利用してdappを開発していきます。

参考：
Ultimate NFT Programming Tutorial – FULL COURSE

ちなみに重要なこととして、YouTubeにアップされているMoralis関連の動画を見ていると、3ヶ月前にもかかわらず今と構文が異なってErrorが発生してしまい、先に進めないことが多分にあります。

そのような箇所について本記事では、執筆時点における解決策により修正しておりますが、他にもご自身で解決が難しい箇所など出てきた際には以下のサイトが参考になるので、ご参考ください。

あわせて読みたい
Troubleshooting | Moralis v1 Answers to Common Issues.

さて本題に移ります。今回、筆者の作業実行環境は以下です。

  • macOS Big Sur v11.6
  • Visual Studio Code – コード エディター
  • Node.js v14.17.3

また、今回はHardhatを使用してスマートコントラクトの作成に取り掛かっていきます。

Hardhatは、Ethereum上でのスマートコントラクトやdAppの構築を容易にする開発環境です。

今までは、TruffleやGanacheを利用してEthereumのスマートコントラクト/dappなどを開発する方法が主流でしたが、2021年半ばあたりからHardhatを利用する人が徐々に増えてきている状況です。

Hardhatについての詳細は、以下の記事をご参考ください。

あわせて読みたい
【脱Truffle】Solidity開発ツール「Hardhat」の概要やメリット・使い方について徹底解説 今回は、Solidity開発ツール「Hardhat」の完全版記事として、概要や利用するメリット、その使い方について解説していきたいと思います。 筆者自身、Solidityの勉強を始…

上の記事の『実践編②〜ローカル環境にコントラクトをデプロイしてみよう〜』の前までの作業を済ませたら、ルートディレクトリに、「contracts」「scripts」ディレクトリを作成します。

$ mkdir contracts scripts

次に、contractsディレクトリに簡易なコントラクトを作成していくので、「MoralisNFT.sol」というファイルを作成します。

$ touch contracts/MoralisNFT.sol

今回は、簡単なNFT(ERC1155)を発行するためのコントラクトをEthereum Testnet (Rinkeby)へデプロイしてNFTをMintしてみるので、それ専用の以下コードをコピペしてください。

細かいコードの解説はここでは割愛しますが、需要が多ければ別途記事で解説します。

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

import "@openzeppelin/contracts/token/ERC1155/ERC1155.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "hardhat/console.sol";

contract MoralisNFT is ERC1155, Ownable {
    
    uint256 public constant ARTWORK = 0;
    uint256 public constant PHOTO = 1;
    
    constructor() ERC1155("") {
        _mint(msg.sender, ARTWORK, 1, "");
        _mint(msg.sender, PHOTO, 2, "");
    }

    function mint(address account, uint256 id, uint256 amount) public onlyOwner {
        _mint(account, id, amount, "");
    } 

    function burn(address account, uint256 id, uint256 amount) public {
        require(msg.sender == account);
        _burn(account, id, amount);
    }
}

ここでは簡易的に、

  • mintメソッドとburnメソッドのみを実装したコントラクト
  • ERC1155規格のNFT（tokenID=0）×1つ
  • ERC1155規格のNFT（tokenID=1）×2つ

を作成していきます。

ここでコントラクトの作成は保存して一旦終了し、メタデータについての作業に移っていくこととします。

コントラクトの作成については、次回の記事で再開して進めていきます。

続きはこちら
【#2 テストネットへデプロイ＆OpenSeaでNFTを表示確認編】簡単なNFT(ERC1155)を発行するコントラクトと… 今回は、dapp構築を簡単にしてくれるサービス「Moralis」を利用しながら、コントラクトをテストネットへデプロイ＆OpenSeaでNFTを表示確認していきたいと思います。 出…

メタデータ設定などの作業①

まずは、Hardhatを展開したものとは別に新しいディレクトリを作成して、index.htmlファイルを作成します。

$ touch index.html

そうしたら、以下のコードをコピペして保存しておいてください。

<html>
    hello :）
</html>

次に、0.json,1.jsonファイル（画像データをはじめとするNFTのメタデータ）を作成して、それぞれ以下のコードをコピペして一旦保存しておきます。

{
    "image": "",
    "description": "This is the NFT artwork for the Moraris test.",
    "name": "Irasutoya's artwork",
    "external_url": "https://www.irasutoya.com/2021/10/nft.html"
}
{
    "image": "",
    "description": "This is the NFT photo for the Moraris test.",
    "name": "Irasutoya's photo",
    "external_url": "https://www.irasutoya.com/2013/11/blog-post_4306.html"
}

今回は、以下4つの要素をメタデータを設定しました。

  1. image（NFTの画像）
  2. description（NFTの説明文）
  3. name（NFTの名前）
  4. external_url（外部リンク）

最後4つ目のexternal_urlは多くのケースでは設定しなくても問題ないのですが、今回は「いらすとや」さんの画像を拝借したので、外部リンクとして設定しておきました。

OpenSeaに表示させるためのメタデータ標準についての詳細は、以下の記事をご参考ください。
Metadata Standards

また、使用する画像データもディレクトリの中に入れておきましょう。

artwork.png,photo.pngが画像データに該当します

さて、こちらのメタデータをホストしていくのですが、ここでMoralisアカウントが必要になります。

まずはターミナルで以下1つ目のコマンドを実行して、インストールが完了した後2つ目のデプロイコマンドを実行するところまできたら、次の章「Moralisアカウントの作成」に移ってください。

$ npm install -g moralis-admin-cli
$ moralis-admin-cli deploy
APIキーの入力を求められるところまで来たらOKです

Moralisアカウントの作成

まずはMoralis公式サイトからアカウントを作成して、ログインします。

左側の「Servers」メニューを選んだ状態で、右上ピンク枠の「Create a new Server」をクリックします。

すると

  • Mainnet Server
  • Testnet Server
  • Local Devchain Server

を選択できるので、今回は真ん中の「Testnet Server」を選択します。

RegionでJapanの選択肢がないので、やむをえずSingaporeにしています。

①に名前（今回筆者は「Moralis_Ethereumnavi_Metadata」にしました。）を、②に最も近い居住地を、③は複数選択可ですが、今回はRinkebyを選択して「Add instance」をクリックします。

完了したら「View Details」をクリックして、以下の画面を展開します。

メタデータ設定などの作業②

では、「メタデータ設定などの作業①」の続きから進めていきます。

先ほどAPIキーの入力を求められるところで中断していましたが、この「CLI API Key」「CLI API Secret」をそれぞれターミナルにコピペして実行します。

すると上写真のように返されます。

筆者は、既に作成済みのものがあるので2を選択してEnterキーを押しますが、皆さんは最初のプロジェクトであれば0を選択してEnterキーを押してください。

画像編集を間違えてモザイクがかかっていますが、隠す意味はありませんmm

すると、上記隠れている部分（https://ughvlh28uzea.usemoralis.com）のようなURLが得られますので、こちらをコピペしてブラウザで開いてみてください。

hello:)と表示されればデプロイ成功です。

コードを書き直すたびにデプロイしなおせば、簡単にサイトをアップデートすることが可能です。

また、コードエディターにVSCodeを利用している場合は、ファイル名を右クリックして「Open With Live Server」をおこなうことでいつでも手軽にローカル環境でサイトの見栄え、メソッドの確認などがおこなえて便利です。

また、画像などのメタデータ（0.json,1.json）に関しても同時にデプロイされたため、先程のURL（https://ughvlh28uzea.usemoralis.com/artwork.png）などからアクセス可能です。

https://ughvlh28uzea.usemoralis.com/artwork.png

ということでhttps://ughvlh28uzea.usemoralis.com/artwork.pnghttps://ughvlh28uzea.usemoralis.com/photo.pngを、それぞれ0.json,1.jsonファイルで空欄になっていたimage部分にコピペして、再度moralis-admin-cli deployコマンドでデプロイし直しましょう。

https://ughvlh28uzea.usemoralis.com/0.jsonをブラウザで開いてみると、以下のようにJSON形式のメタデータの文字列が表示されるようになりました。

https://ughvlh28uzea.usemoralis.com/0.json

今回はERC1155規格なので、ここから少しだけ以下を参考に手直しを加えていきます。

URI 値は、クライアントによる ID の置換を可能にする。
もし文字列{id}がURI内に存在すれば、クライアントはこれを16進数で表した実際のトークンIDに”必ず”置き換えなければならない。
これにより、多数のトークンのために一度URIを定義することで、多数のトークンが同じオンチェーン文字列を使用することができます。

置換された16進数IDの文字列形式は、”必ず”小文字の英数字でなければならない。
[0-9a-f]で、0xのprefixはつけない。

置換された16進数IDの文字列フォーマットは、必要に応じて先頭をゼロパディングし、”必ず”16進文字列の長さを64にする必要があります。
このようなURIの例： https://token-cdn-domain/{id}.json は，クライアントがトークンID 314592/0x4CCE0 を参照している場合、
https://token-cdn-domain/000000000000000000000000000000000000000000000000000000000004cce0.json に置き換えられます。

出典：EIP-1155: Multi Token Standard

何やら難しいことが書かれていますが、要はERC1155規格ではtokenIDを64桁の16進数で表してくださいね、ということです。

例えばtokenIDが1の場合は0000000000000000000000000000000000000000000000000000000000000001となります。

ということで、先程0.json,1.jsonとなっていたファイル名を、それぞれ64桁の以下に変更します。

0000000000000000000000000000000000000000000000000000000000000000.json
0000000000000000000000000000000000000000000000000000000000000001.json

長くて読みづらい。。

ここまで完了したら、再度moralis-admin-cli deployコマンドでデプロイし直しましょう。

以下URLで検索すると、0.pngのJSON形式のメタデータが表示されるようになりました。

https://ughvlh28uzea.usemoralis.com/0000000000000000000000000000000000000000000000000000000000000000.json

ローカルネットでの作業はここまでなので、本編は以上になります。

続きはこちら
【#2 テストネットへデプロイ＆OpenSeaでNFTを表示確認編】簡単なNFT(ERC1155)を発行するコントラクトと… 今回は、dapp構築を簡単にしてくれるサービス「Moralis」を利用しながら、コントラクトをテストネットへデプロイ＆OpenSeaでNFTを表示確認していきたいと思います。 出…

まとめ

イーサリアムnavi「法人プラン」サービス

本記事では、dapp構築を簡単にしてくれるサービス「Moralis」を利用して、概要やその使い方について解説しました。

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

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

次回は、Rinkeby（Ethereumテストネット）へデプロイする手順などを中心に書いていこうと思います。

イーサリアムnaviを運営するSTILL合同会社では、web3/crypto関連のリサーチ代行、アドバイザー業務、その他(ご依頼・ご提案・ご相談など)に関するお問い合わせを受け付けております。

まずはお気軽に、こちらからご連絡ください。

web3開発
Hardhat Solidity フロントエンド開発
みんなにも読んでほしいですか？
  • URLをコピーしました！
目次