どうも、でりおてんちょーです。
今回は、dapp構築を簡単にしてくれるサービス「Moralis」を利用して、概要やその使い方について解説していきたいと思います。
- 簡単なNFT(ERC1155)を発行するコントラクトの作成
- メタデータ設定などの作業
- Moralisアカウントの作成
- Moralisを活用してWebサイトの作成
NFTを発行するためのコントラクトについては、本メディアでも何度かテーマとして取り上げてきましたが、フロントエンドの開発は筆者自身あまり経験がなかったため記事にしてこなかったという背景があります。
結論としてMoralisは、無料で使えて非常に使い勝手が良いサービスで、今後も長くお世話になっていくのではないかと考えており、他の方にもオススメできるものでした。
Solidityでコントラクトの開発をおこなうことには慣れてきたものの、フロントエンドの開発は初心者といった方に参考にしていただけば幸いです。
でははじめに、この記事の構成について説明します。
まずはMoralisの概要について、公式ドキュメントを日本語訳したものを載せております。
※いきなり開発から始めたいという方は読み飛ばしていただいても結構です。
まずはWebサイトで表示することになるNFTを発行するための簡単なコントラクトを、Hardhatを使って構築していきます。
NFTの画像データや名前などの「メタデータ」を設定するための作業を進めていきます。
ある程度進んだところで一度メタデータ設定作業を中断して、本記事を進める上で必要なMoralisアカウントの作成をおこなっていきます。
Moralisアカウントの作成を終えたら、残ったメタデータ設定などの作業を終えてシリーズ1を終了といたします。
本記事が、dapp構築を簡単にしてくれるサービス「Moralis」の概要や使い方などについて理解したいと思われている方にとって、少しでもお役に立てれば幸いです。
※本記事は特定のFT / NFTの購入を推奨するものではありません。あくまで勉強の一環としてご活用ください
Moralisとは？
簡単なNFT(ERC1155)を発行するコントラクトの作成
今回は、以下のチュートリアル動画を参考にしながら、Moralisを利用してdappを開発していきます。
ちなみに重要なこととして、YouTubeにアップされているMoralis関連の動画を見ていると、3ヶ月前にもかかわらず今と構文が異なってErrorが発生してしまい、先に進めないことが多分にあります。
ちなみに参考にしたチュートリアル動画はこちらです。
— でりおてんちょー | イーサリアムnavi運営 (@yutakandori) January 27, 2022
2時間14分のチュートリアル動画ですが、3ヵ月前にもかかわらず情報が古くなっていたりしており、調べるのに時間を費やしたことで合計24時間くらいかかりました😂https://t.co/PmBi6AoBl5
さて本題に移ります。今回、筆者の作業実行環境は以下です。
- macOS Big Sur v11.6
- Visual Studio Code – コード エディター
- Node.js v14.17.3
また、今回はHardhatを使用してスマートコントラクトの作成に取り掛かっていきます。
Hardhatは、Ethereum上でのスマートコントラクトやdAppの構築を容易にする開発環境です。
今までは、TruffleやGanacheを利用してEthereumのスマートコントラクト/dappなどを開発する方法が主流でしたが、2021年半ばあたりからHardhatを利用する人が徐々に増えてきている状況です。
Hardhatについての詳細は、以下の記事をご参考ください。
上の記事の『実践編②〜ローカル環境にコントラクトをデプロイしてみよう〜』の前までの作業を済ませたら、ルートディレクトリに、「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つ
を作成していきます。
ここでコントラクトの作成は保存して一旦終了し、メタデータについての作業に移っていくこととします。
メタデータ設定などの作業①
まずは、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つの要素をメタデータを設定しました。
- image（NFTの画像）
- description（NFTの説明文）
- name（NFTの名前）
- external_url（外部リンク）
最後4つ目のexternal_urlは多くのケースでは設定しなくても問題ないのですが、今回は「いらすとや」さんの画像を拝借したので、外部リンクとして設定しておきました。
また、使用する画像データもディレクトリの中に入れておきましょう。
artwork.png,photo.pngが画像データに該当しますさて、こちらのメタデータをホストしていくのですが、ここでMoralisアカウントが必要になります。
まずはターミナルで以下1つ目のコマンドを実行して、インストールが完了した後2つ目のデプロイコマンドを実行するところまできたら、次の章「Moralisアカウントの作成」に移ってください。
$ npm install -g moralis-admin-cli
$ moralis-admin-cli deploy 
Moralisアカウントの作成
まずはMoralis公式サイトからアカウントを作成して、ログインします。
左側の「Servers」メニューを選んだ状態で、右上ピンク枠の「Create a new Server」をクリックします。
すると
- Mainnet Server
- Testnet Server
- Local Devchain Server
を選択できるので、今回は真ん中の「Testnet Server」を選択します。
①に名前（今回筆者は「Moralis_Ethereumnavi_Metadata」にしました。）を、②に最も近い居住地を、③は複数選択可ですが、今回はRinkebyを選択して「Add instance」をクリックします。
完了したら「View Details」をクリックして、以下の画面を展開します。
メタデータ設定などの作業②
では、「メタデータ設定などの作業①」の続きから進めていきます。
先ほどAPIキーの入力を求められるところで中断していましたが、この「CLI API Key」「CLI API Secret」をそれぞれターミナルにコピペして実行します。
すると上写真のように返されます。
筆者は、既に作成済みのものがあるので2を選択してEnterキーを押しますが、皆さんは最初のプロジェクトであれば0を選択してEnterキーを押してください。
すると、上記隠れている部分（https://ughvlh28uzea.usemoralis.com）のようなURLが得られますので、こちらをコピペしてブラウザで開いてみてください。
コードを書き直すたびにデプロイしなおせば、簡単にサイトをアップデートすることが可能です。
また、コードエディターにVSCodeを利用している場合は、ファイル名を右クリックして「Open With Live Server」をおこなうことでいつでも手軽にローカル環境でサイトの見栄え、メソッドの確認などがおこなえて便利です。
また、画像などのメタデータ（0.json,1.json）に関しても同時にデプロイされたため、先程のURL（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形式のメタデータの文字列が表示されるようになりました。
今回はERC1155規格なので、ここから少しだけ以下を参考に手直しを加えていきます。
URI 値は、クライアントによる ID の置換を可能にする。
もし文字列{id}がURI内に存在すれば、クライアントはこれを16進数で表した実際のトークンIDに”必ず”置き換えなければならない。
これにより、多数のトークンのために一度URIを定義することで、多数のトークンが同じオンチェーン文字列を使用することができます。置換された16進数IDの文字列形式は、”必ず”小文字の英数字でなければならない。
[0-9a-f]で、0xのprefixはつけない。置換された16進数IDの文字列フォーマットは、必要に応じて先頭をゼロパディングし、”必ず”16進文字列の長さを64にする必要があります。
出典：EIP-1155: Multi Token Standard
このようなURIの例： https://token-cdn-domain/{id}.json は，クライアントがトークンID 314592/0x4CCE0 を参照している場合、
https://token-cdn-domain/000000000000000000000000000000000000000000000000000000000004cce0.json に置き換えられます。
何やら難しいことが書かれていますが、要はERC1155規格ではtokenIDを64桁の16進数で表してくださいね、ということです。
例えばtokenIDが1の場合は0000000000000000000000000000000000000000000000000000000000000001となります。
ということで、先程0.json,1.jsonとなっていたファイル名を、それぞれ64桁の以下に変更します。
0000000000000000000000000000000000000000000000000000000000000000.json0000000000000000000000000000000000000000000000000000000000000001.json
ここまで完了したら、再度moralis-admin-cli deployコマンドでデプロイし直しましょう。
以下URLで検索すると、0.pngのJSON形式のメタデータが表示されるようになりました。
ローカルネットでの作業はここまでなので、本編は以上になります。
まとめ
本記事では、dapp構築を簡単にしてくれるサービス「Moralis」を利用して、概要やその使い方について解説しました。
本記事が、Moralisやdapp構築の初級編の内容などについて理解したいと思われている方にとって、少しでもお役に立ったのであれば幸いです。
ここまで読んでこられた中で、分かりづらかったところや間違っていると思われる箇所など、ぜひご指摘いただけますと幸いです。
最後に、MoralisやSolidityなどについて
- 聞いてみたいことがある
- 分からない部分がある
- もっと多くの情報が知りたい
という方は、Discordコミュニティ「イーサリアムnavi」にご参加ください！
イーサリアムnaviのDiscordコミュニティには
- Solidityを勉強したい・既に勉強している
- 開発に興味がある
- NFTが好き・興味がある
といった方々がたくさん集まっており、日々NFTや開発に関する情報を共有したり、不定期で勉強会などイベントも開催しています。
また、Twitter・YouTubeでの情報発信にも力を入れていますので、合わせてフォローしていただけると幸いです。
匿名コミュニティYay!がリサーチャーを募集中です。
誰もが素が出せて、フラットで、他人に寛容なバーチャルワールドを作っています。
この冬IEOを目指しています。一緒にサスティナブルな経済圏を作っていきましょう！
