メインコンテンツまでスキップ

lesson-2_メタデータの設定

🃏 NFT メタデータの構築

さあ、少しわくわくしてきましたか? これから、自分自身のメタデータを作成する手順を順に説明しましょう。

まず、画像を準備する必要があります。ここでは、ChainIDEのシールド画像を4枚用意しました。もちろん、自分で用意した画像を使ってもOKです。

ブロンズ・シールド

image-20230223101752414

シルバー・シールド

image-20230223101816151

ゴールド・シールド

image-20230223101836025

プラチナ・シールド

image-20230223101907097

これらの画像をローカルデバイスに保存しましょう。

image-20230223102231474

次に、別のフォルダへ新しいファイルを4つ作成し、それぞれ1、2、3、4と名前をつけます。以下の内容を記入してください(画像のIPFSリンクは未完成です。画像をIPFSにアップロードした後、再度記入してください)。

1

{
"name": "Bronze Shield",
"description": "As a token of appreciation, ChainIDE is gifting its users with this rare Bronze Shield.",
"image": "ipfs://",
"attributes": [
{
"trait_type": "Rarity",
"value": "Rare"
}
]
}

2

{
"name": "Silver Shield",
"description": "To show our gratitude to ChainIDE users, we're offering this mythical Silver Shield as a gift.",
"image": "ipfs://",
"attributes": [
{
"trait_type": "Rarity",
"value": "Mythical"
}
]
}

3

{
"name": "Gold Shield",
"description": "As a gesture of thanks, ChainIDE is presenting its users with this legendary Gold Shield.",
"image": "ipfs://",
"attributes": [
{
"trait_type": "Rarity",
"value": "Legendary"
}
]
}

4

{
"name": "Platinum Shield",
"description": "ChainIDE is honored to gift its users with this immortal Platinum Shield as a symbol of our appreciation.",
"image": "ipfs://",
"attributes": [
{
"trait_type": "Rarity",
"value": "Immortal"
}
]
}

image-20230223103510159

🔧 IPFS 経由で NFT 画像とメタデータをアップロード

前述の通り、IPFSにファイルをアップロードするにはノードが必要であり、自身でIPFSノードを実行することは難しいと感じるかもしれません。

NFT StorageTextileはよく使われるIPFSノードプロバイダです。ここでは、デモ用にNFT Storageを使用します。

Login」をクリックします。

image-20230223103835432

Upload」をクリックします。

image-20230223104125770

「CAR files supported! What is a CAR?」をクリックします(CARは、複数のファイルで同じルートCIDを取得してIPFSへ一度にアップロードすることを可能にします。これはbaseURIに必要な機能であり、また、一度に画像をアップロードするのに便利です)。

image-20230223104827000

https://car.ipfs.io をクリックします。

Open file picker」クリックします。

image-20230223104942040

すべての画像をまとめて選択し、「Open」をクリックします。

image-20230223105028884

Download .car file」をクリックします。

image-20230223105114628

NFT.Storageに戻り、「Choose File」をクリックして、先ほどダウンロードしたCARファイルを選択します。次に「Upload」をクリックします。

image-20230223105418010

生成されたCIDをクリックします。

image-20230223105546864

「Bronze」に対応するCIDをクリックします。

image-20230223110400663

この画像のCIDをコピーします。これはURLのアドレスバーの前の部分です。

image-20230223110602486

コピーしたCIDを、ローカルコンピュータの対応するメタデータに貼り付けます。

以下は私のものです。

1

{
"name": "Bronze Shield",
"description": "As a token of appreciation, ChainIDE is gifting its users with this rare Bronze Shield.",
"image": "ipfs://bafybeid25fu5kqfwhy67hryylwiuerobvutztmm24g2yimkpezhf2i76vq",
"attributes": [
{
"trait_type": "Rarity",
"value": "Rare"
}
]
}

残りの3枚の画像についても同様の処理を行い、メタデータを取得します。

2

{
"name": "Silver Shield",
"description": "To show our gratitude to ChainIDE users, we're offering this mythical Silver Shield as a gift.",
"image": "ipfs://bafybeigpqjtc6dg2aw7up7b6k6lou2rn5vmqnce3sslhgukq4jexwjpuha",
"attributes": [
{
"trait_type": "Rarity",
"value": "Mythical"
}
]
}

3

{
"name": "Gold Shield",
"description": "As a gesture of thanks, ChainIDE is presenting its users with this legendary Gold Shield.",
"image": "ipfs://bafybeifj4zvhyegddyerjwwhmzrepa5ogsuo2r73sor2utwjjdkilcdw24",
"attributes": [
{
"trait_type": "Rarity",
"value": "Legendary"
}
]
}

4

{
"name": "Platinum Shield",
"description": "ChainIDE is honored to gift its users with this immortal Platinum Shield as a symbol of our appreciation.",
"image": "ipfs://bafybeifmjxhldqtvpy2dd26l7syfbhafiqyyylovupvljnqgcmfin2mzsm",
"attributes": [
{
"trait_type": "Rarity",
"value": "Immortal"
}
]
}

必要な変更を加えた後、もう一度メタデータをCARファイルとしてアップロードする手順を追ってみましょう。

1〜4すべてのメタデータファイルを更新した後、先ほど画像をCARファイルとしてアップロードした手順を参考に今度はメタデータファイルをアップロードしましょう。

アップロードが完了したら、ipfs://METADATA_CAR_CIDにアクセスしてみましょう。

image-20230223120843152

このメタデータCARのCIDをコピーします:bafybeihuwmkxnqban2ukneymhwctxfqec5ywrdiqyc7vmyegftrrllf7gq

IPFSのbaseURIに変換します:ipfs://bafybeihuwmkxnqban2ukneymhwctxfqec5ywrdiqyc7vmyegftrrllf7gq/

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#polygonで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の4点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット