所要時間:20分
このガイドでは、Cloudflare Workers を使って Sequence Collections API でメディアを保存し、Metadata API から画像を取得して表示する方法を説明します。
この手順は8ステップで完了します。
- Sequence Builder Console から Secret API Key を取得 します。
- cURLリクエストで コレクションを作成(初回のみ)
- トークンを作成(tokenIDを使ってトークンを作成)
- アセットを作成(assetIDを作成)
- 画像を保存(画像を処理して保存)
- 非プライベートに更新
- cURLリクエストでコレクションを公開(一度だけ)
- cURLリクエストでAPIからアセットを表示(一度だけ)
まず、Collectible Minting Service Guideのこのセクションに従ってCloudflare Workerを作成してください。
1. Secret API Keyを取得する
バックエンドサービスを利用するには、リクエストを認証するためのSecret API
Keyが必要です。
まずは設定画面にアクセスし、Sequence Builder ConsoleでAPI Keysを選択します。
下にスクロールして+ Add Service Account
を選択します。
アクセス権限を「write」と「confirm」に変更します。
最後にキーをコピーし、wrangler.toml
の JWT_ACCESS_KEY
として保存してください。今後は Sequence Builder コンソールからこのキーにアクセスできなくなります。
2. cURLリクエストからコレクションを作成する
サービスにメディアをアップロードするためには、最初にコレクションを作成する必要があります。Builder Console から取得した Secret API Key
と projectID
を使用します。
サービスにリクエストを送り、collectionID
を取得します。
curl --location 'https://metadata.sequence.app/rpc/Collections/CreateCollection' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <secret_API_key or jwt_access_key>' \
--data '{
"projectId": <project_id>,
"collection": {
"metadata": {
"name": "<collection_name>",
"description": "<description>",
"external_link" : "<https://link>"
},
"image": "",
"decimals": <decimals_typically_as_0>,
"properties": null,
"attributes": null
}
}'
レスポンスで返された collectionID
を wrangler.toml
の COLLECTION_ID
に設定します。
3. TokenID を使ってトークンを作成する
Cloudflare Worker を利用する場合は、wrangler.toml
に node_compat = true
を追加し、@0xsequence/metadata
パッケージで window オブジェクトを利用可能にします。
SequenceCollections
を利用するために、pnpm install @0xsequence/metadata
で metadata パッケージをインストールします。
import { SequenceCollections } from '@0xsequence/metadata'
import { ethers } from 'ethers'
...
const METADATA_URL = 'https://metadata.sequence.app'
const collectionsService = new SequenceCollections(METADATA_URL, JWT_ACCESS_KEY)
const randomTokenIDSpace = ethers.BigNumber.from(ethers.hexlify(ethers.randomBytes(20)))
const res1 = await collectionsService.createToken({
projectId: projectID,
collectionId: collectionID,
token: {
tokenId: String(randomTokenIDSpace),
name: name,
description: description,
decimals: 0,
attributes: attributes // can leave blank
}
})
4. TokenID を使ってアセットを作成する
リクエストで metadataField
(assetType)を image
に設定し、必要な他のフィールドも入力して、次のステップで使用するアセットレスポンスを取得します。
const jsonCreateAsset = await collectionsService.createAsset({
projectId: projectID,
asset: {
id: Number(String(randomTokenIDSpace).slice(0,10)),
collectionId: collectionID,
tokenId: String(randomTokenIDSpace),
metadataField: "image"
}
})
5. 画像アセットを保存する
前の jsonCreateAsset
オブジェクトから渡された asset.id
を使用します。
...
const uploadAsset = async (env: Env, projectID: any, collectionID: any, assetID: any, tokenID: any, url: any) => {
const response = await fetch(url);
if (!response.ok) throw new Error(`Failed to fetch file from ${url}: ${response.statusText}`);
const arrayBuffer = await response.arrayBuffer();
const blob = new Blob([arrayBuffer]);
const formData = new FormData();
formData.append('file', blob, `image.png`); // You might want to dynamically determine the filename
let METADATA_URL = 'https://metadata.sequence.app'
// Construct the endpoint URL
const endpointURL = `${METADATA_URL}/projects/${projectID}/collections/${collectionID}/tokens/${tokenID}/upload/${assetID}`;
try {
// Use fetch to make the request
const fetchResponse = await fetch(endpointURL, {
method: 'PUT',
body: formData,
headers: {
'X-Access-Key': env.PROJECT_ACCESS_KEY,
'Authorization': `Bearer ${env.JWT_ACCESS_KEY}`, // Put your token here
},
});
// Assuming the response is JSON
const data = await fetchResponse.json();
return data;
}catch(err){
console.log(err)
}
}
...
const uploadAssetRes = await uploadAsset(env, projectID, collectionID, jsonCreateAsset.asset.id, String(randomTokenIDSpace), imageUrl)
...
返された uploadAssetRes.url
が Sequence サーバー上のメディアファイルの URL です。
6. 非プライベートトークンを更新する
次に、private
ブール値を false
に設定してトークンを非プライベートにします。
const res3 = await collectionsService.updateToken({
projectId: projectID,
collectionId: collectionID,
private: false,
tokenId: String(randomTokenIDSpace),
token: {
name: name,
attributes: attributes,
tokenId: String(randomTokenIDSpace),
}
})
7. cURLリクエストからコレクションを公開する
最後に、これも一度だけのリクエストとして、projectID
と collectionID
をもとに以下のコマンドを実行してコレクションを公開します。
curl --location 'https://metadata.sequence.app/rpc/Collections/PublishCollection' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <secrect_API_key or jwt_access_key> \
--data '{
"projectId": <project_id>,
"collectionId": <collection_id>
}'
これにより、コレクション内でprivateフラグが false
に設定されたすべてのトークンが公開され、その他のトークンは変更されるまで非表示のままになります。
8. APIからアセットを公開レンダリングする
これまでの作業をテストするには、変数を更新した上でこの cURL リクエストを実行し、ファイルをローカル端末にダウンロードできます。
または、ブラウザに貼り付けて画像を確認することもできます。
同じコードを使用した場合、<file_name>
は image.png
になります。
curl --location 'https://metadata.sequence.app/projects/<project_id>/collections/<collection_id>/tokens/<token_id>/<file_name>' --output stored_file.png
また、コレクションを ERC721
や ERC1155
の baseURI
に使用する場合は、スマートコントラクトの setBaseMetadataURI
に以下の URI
を書き込みます。
https://metadata.sequence.app/projects/<project_id>/collections/<collection_id>/tokens/
スマートコントラクトは自動的に tokenID
を末尾に付加します。
お試しください。
curl https://metadata.sequence.app/projects/1229/collections/40/tokens/457657099779485875855215293997335918990635014431
または ブラウザで確認
API からアセットをプライベートにレンダリングする
または、アセットをプライベートのまま保存しつつ、リクエストのヘッダーにシークレットAPIキーを渡し、必要なパラメータを指定することでデータをレンダリングすることも可能です。このガイドでは metadata_field
を image
に設定しています。
curl --location 'https://metadata.sequence.app/projects/<project_id>/collections/<collection_id>/tokens/<token_id>/asset/<metadada_field>' \
--header 'Authorization: Bearer <secret_api_key or jwt_access_key>' \
--output stored_file.png
このガイドの全コードは こちら でご覧いただけます。