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

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

開発
2022年2月5日
でりおてんちょー

どうも、イーサリアム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の購入を推奨するものではございませんので、あくまで勉強の一環としてご活用ください。

【AD】Nouns DAO JAPAN

Nouns DAO JAPANは世界で一番Nounsを広げるコミュニティを目指します。Discord参加はこちら

目次

Moralisとは？

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

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

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

参考：
Ultimate NFT Programming Tutorial – FULL COURSE

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

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

Moralis
Moralis Moralis provides enterprise-grade Web3 APIs that connect any tech stack to blockchain networks. Our 24/7 worldwide support ensures your project’s easy launch, p…

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

  • 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を表示確認していきたいと思います。 出…

まとめ

【AD】GAME OF THE LOTUS PROJECT
でりおてんちょー

「地方創生×NFT」の取り組みとして非常にユニークで面白いと思います。

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

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

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

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

イーサリアムnaviを運営するSTILL合同会社では、以下などに関するお問い合わせを受け付けております。

  • 広告掲載
  • PR記事の執筆業務
  • リサーチャー業務
  • アドバイザリー業務
  • その他(ご依頼・ご提案・ご相談など)

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

STILL｜クリプト事業支援
STILL｜クリプト事業支援 イーサリアムnaviを軸としたクリプトコア人材向け広告・PR事業、世界のクリプトネイティブなNFTプロジェクトのリサーチ代行などの事業を展開しています。
開発
Hardhat HTML/CSS/JavaScript Solidity フロントエンド開発
励みになるので、よかったらSNSなどでシェアしてください！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

でりおてんちょーのアバター でりおてんちょー

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

リサーチ業務やアドバイザー業務、PRなど含む記事執筆業務などのお仕事のご依頼や、イーサリアムnaviに対する広告掲載などは、お問合せページよりお気軽にご連絡ください。

関連記事

目次