Arweave でファイルを簡単に管理: 4EVERLAND で Web3 フロントエンドパスマニフェストを完了するための究極のガイド

パスマニフェストを使用する理由

NFT が IPFS でリリースされると、イメージとメタデータが IPFS ネットワークにアップロードされ、次の形式のルート CID が取得されます。

ipfs://bafybeic36ik6cngu37xbzmpytuvyo7z3lyeen44clkkxq5d263zj4nkzr4

このルート CID を利用することで、各 NFT のイメージパスを root cid/'ファイル名の形式で定義することができます。たとえば、NFT のメタデータ内の画像パスは次のようになります。

ipfs://bafybeie7byrnb3vo2lc2lwaqm5lox6jiow5ntzod3aoquki36gtirdhodm/0.png

同様に、Arweave で NFT を公開したい場合は、パスマニフェストを使用してNFT を収集し、パス経由で NFT にアクセスできるようにします。

例えば

https://arweave.net/Bgw5-GwpymUoe5VMeb-No9WWXpjWsq_8g4oeiGP5RnA/0.png

arweave で ID を使用して各画像にアクセスする代わりに、次のようにします。

https://arweave.net/ISvPQyG8qWzJ1Pv5em5xK8Ht38HZ3ub1fPHbFEqDPK0

NFTの作成方法

以下では、4EVERLAND Bucket + Path Manifests を使用して Arweave ネットワークに NFT ファイルを保存する方法を説明します。

バケットを作成してNFTファイルをアップロードする

まず、 4everland ダッシュボードでバケットを作成し、[AR に同期] ボタンを有効にする必要があります。

次に、バケットに nft フォルダーをアップロードして、すべての nft の TxID を取得します。ダッシュボードでの手動操作に加えて、S3互換 API を使用してアップロードおよび取得することもできます。

S3 クライアントの初期化

// initS3Client.js
import { S3 } from '@aws-sdk/client-s3'
export const client = new S3({
    endpoint: 'https://endpoint.4everland.co',
    credentials:{
        accessKeyId: '',
        secretAccessKey: '',
        sessionToken: '',
    },
    forcePathStyle: false,
    region: 'eu-west-2'
})

NFT をバッチでアップロードします。

import { Upload } from '@aws-sdk/lib-storage'
import { clinet } from './initS3Client.js'
let files = [] //  File Arrary
let Bucket = 'NFT_Bucket'
files.forEach(aysnc(file) => {
    try{
       const task = new Upload({
            client,
            Bucket,
            Key: 'YOUR_folder' + '/' + file.name,
            Body: file,
            ContentType: file.type
        })
        await task.done()
    }catch(error){
     console.log(error)
    }
})


// 同步到AR需要时间，可以等待几分钟后，获取 AR Hash(Tx ID) list:

let arHashPath = {}
files.forEach(aysnc(file) => {
    try{
       const data = await client.headObject({
           Bucket,
           Key: 'YOUR_folder' + '/' + file.name,
       })
        const meta = data.Metadata;
        arHashPath[file.name] = {id: meta["arweave-hash"] ?? ''}
    }catch(error){
     console.log(error)
    }
})

イメージのマニフェスト ID を生成する

各NFTのTxIDを取得後、Path Manifestsの規格に従って以下のjsonファイルに組み立てられますので、規格の詳細については公式の手順を参照してください。

//manifest-files.json 
{
  "manifest": "arweave/paths",
  "version": "0.1.0",
  "paths": {
    "01.jpeg": {
      "id": "ItVxP8RILEsBjTObeO_piBUME31mj9fa8XJ00v_A94o"
    },
    "02.jpeg": {
      "id": "eiCwWO60Qd8J6wz1ndB82jNgSDotAC8peN38ZAVonl4"
    },
    "03.jpeg": {
      "id": "YUHwbOdf2sSKdGps03qH9LJHX4caYKM5_BOdBpMXOxc"
    },
    "04.jpeg": {
      "id": "kD8Eft7JP82_u9whX710vzsSntn_WP07TgrSB2bGEso"
    },
    "05.jpeg": {
      "id": "KSeYJwZORk3BzelAazsmd6laGAAugHPMqHoXTZ0V4BE"
    }
  }
}

次に、このmanifest-files.jsonファイルをバケットにアップロードします。Content-Typeタグをapplication/x.arweave-manifest+jsonとして指定し、このファイルのArHashを画像のマニフェストIDとして取得する必要があります。


let manifestFile = {
  manifest: 'arweave/paths',
  version: '0.1.0',
  paths: arHashPath
}

let blob = new Blob([JSON.stringify(manifestFile)], {
  type: "application/json",
});
async function upload(){
    try{
       const task = new Upload({
            client,
            Bucket,
            Key: 'YOUR_folder' + '/' + 'manifest-files.json',
            Body: blob,
            ContentType: 'application/x.arweave-manifest+json'
        })
        await task.done()
    }catch(error){
     console.log(error)
    }
}
// 上传
await upload()


async function getMainfestArHash(){
    try{
        const data = await client.headObject({
           Bucket,
           Key: 'YOUR_folder' + '/' + 'manifest-files.json',
        })
        const meta = data.Metadata;
        if (meta) {
            return meta["arweave-hash"];
        }
        return "";
    }catch(error){
     console.log(error)
    }
}
// 同步到AR需要时间，可以等待几分钟后执行
const arHash =  await getMainfestArHash()
console.log(arHash)

取得した TxID は udKzWCDO2PFvxHjiTRhNXuDslsE4jiKlu9A2gY1b1WE です。

ヒント: 大量の写真がある場合は、4EVERLAND ホスティングモジュールを使用してマニフェスト ID を生成できます。

バケット内の NFT フォルダーを選択し、「スナップショット」をクリックしてスナップショットリストに切り替えてフォルダーを公開します。
スナップショット内の ipfs cid をコピーし、ホスティングページに入り、「IPFS Deploy」に CID デプロイメントを入力します。
デプロイメントプラットフォームとして「Arweave」を選択します。デプロイメントが成功した後の AR ハッシュは、これらのイメージのマニフェスト ID です。

マニフェストIDを使用して各NFTのメタデータを作成する

次のように、01.jpeg を例として、各 nft のmetadata.jsonを生成します。

//文件名：0
{
    "name": "nft-ocean",
    "attributes": [
        {
            "trait_type": "tokenID",
            "value": "0"
        }
    ],
    "description": "nft-ocean image",
    //填入图片的ManifestID + '/'+文件名 
    "image": "ar://QmZ3Y31SwLU77CDfBoL5MphuSmrv414d2ZyunVcbNAJQRQ/01.jpeg"
}

上記の画像をアップロードする手順を参照して、各 nft の metadata.json ファイルに TokenID を付けて名前を付け、バケットにアップロードし、取得した TxID を再構成してマニフェスト形式の json ファイルを生成します。

{
    "manifest":"arweave/paths",
    "version":"0.1.0",
    "paths":{
        "0":{
            "id":"JcFZfJEJrDKudQsRfN2JnsBPUQTynk0i5XfUqCBcERw"
        },
        "1":{
            "id":"vEUOeIky5hv2GlD2SP2d9TYAua2pkxYxehOczqTGqfU"
        },
        "2":{
            "id":"hd6bI2-c0gr-9ZZsoO8jn_CTRFqWIRwRj5WckgfbmEY"
        },
        "3":{
            "id":"PVAOd8D2JGCW5oOf4bulbQn2npcaaDAexY8sJKzZiEU"
        },
        "4":{
            "id":"lT4RbJEIGsqwwEZB0gxeT1x0nov40crEtBWDHgKQx80"
        }
    }
}

このマニフェストメタデータ.json ファイルをバケットにアップロードし、コンテンツタイプを application/x.arweave-manifest+json として指定します。このファイルの ArHash (TxID) を取得します。この ID は、最終的に設定する必要がある BaseURI です。その契約。

この場合に取得される TxID は次のとおりです: 2svkHmAC3So_M-LUtDlcDeqPZEwSZsY64AB9L8cA-Uk

NFTを契約に導入する

特定の手順については、 NFT コントラクト展開チュートリアルを参照してください。前の手順はまったく同じです。「リソースの準備」ステップをスキップして、BaseURI を設定するステップに直接進みます。

上記の NFT メタデータによって生成されたマニフェスト ID を BaseURI に書き込む必要があります。

setBaseURI.js

require("dotenv").config()
const hre = require("hardhat");
const PRIVATE_KEY = process.env.PRIVATE_KEY
const NETWORK = process.env.NETWORK
const API_KEY = process.env.API_KEY


const provider = new hre.ethers.providers.InfuraProvider(NETWORK, API_KEY);
//编译完成合约会自动生成
const abi = require("../artifacts/contracts/NFT_WEB3_EXPLORER.sol/NFT_WEB3_EXPLORER.json").abi
const contractAddress = "合约地址"
const contract = new hre.ethers.Contract(contractAddress, abi, provider)
const wallet = new hre.ethers.Wallet(PRIVATE_KEY, provider)
const baseURI = "ar://2svkHmAC3So_M-LUtDlcDeqPZEwSZsY64AB9L8cA-Uk/" //metadata 的Manifest ID

async function main() {
  const contractWithSigner = contract.connect(wallet);
  //调用setBaseURI方法
  const tx = await contractWithSigner.setBaseURI(baseURI)
  console.log(tx.hash);
  await tx.wait();
  console.log("setBaseURL success");
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

その後の手順はチュートリアルと一致しており、mint を完了したら、opensea に移動して表示します。