Solana Dev 101 - 新しい DAS API で SvelteKit アプリを作成する

はじめに

Digital Asset Standard API (DAS) SDK は、型、1 行で記述できる抽象化、適切にフォーマットされたレスポンスを導入することで、Solana における圧縮と DAS の複雑な処理を簡素化します。

このステップ形式のチュートリアルでは、DAS SDK の getAssetsByGroup メソッドを使用して、NFT コレクションの画像を Web ページに表示する方法を説明します。また、より複雑なシナリオで DAS SDK を使用するための基礎も身につけられます。

前提条件

このチュートリアルを最大限に活用するため、次の前提条件を満たしていることを確認してください。

• npm または yarn がインストールされていること：これらはプロジェクトの依存関係を管理するために必要なパッケージマネージャーです。
• JavaScript の基礎知識：変数、関数、オブジェクトなど、JavaScript の基本を理解している必要があります。
• Git がインストールされていること：バージョン管理と共同作業に必要です。

環境のセットアップ

このチュートリアルを進めるには、こちらで提供されているボイラープレートリポジトリの使用をおすすめします。

このビルドの実際の動作は、こちらで確認できます。

ステップ 1：新しい SvelteKit プロジェクトをセットアップする

まず、新しい SvelteKit プロジェクトをセットアップします。create-svelte テンプレートを使用してプロジェクト構成を作成できます。ターミナルで次のコマンドを実行してください。

git clone https://github.com/helius-labs/das-ui.git

次に、新しいディレクトリへ移動します。

cd das-ui

続いて、プロジェクトの依存関係をインストールします。

npm install

ステップ 2：ユーティリティ関数をセットアップする

作成された src/lib/util ディレクトリ内に、collection.ts という名前の新しいファイルを作成します。

このファイル内で、次のように getCollection 関数をセットアップします。

import { Helius } from 'helius-sdk';

export async function getCollection() {
// Request goes here //
}

getCollection 関数は、DAS API から NFT データのコレクションを取得する非同期関数です。fetch や axios の呼び出しをセットアップする代わりに、Helius SDK を使用して RPC リクエストを行います。

1. まず、ローカルストレージのキー「nftData」にデータが保存されているか確認します。データがある場合は、その JSON データを解析して返します。

const storedData = localStorage.getItem('nftData');

if (storedData !== null) {
    return JSON.parse(storedData);
}

これは、データをすでに取得している場合に不要なネットワークリクエストを減らすためのキャッシュです。独自のキャッシュ処理と読み込みロジックを使用することもできます。

       2. 次に、API キーを使用して Helius クライアントを初期化します。必要に応じて、使用するクラスターと RPC のリクエスト ID も渡せます。

const helius = new Helius('YOUR_API_KEY');

3. ページネーション用の変数をいくつか初期化します。これらを使用して DAS API の結果をページ分割し、すべての項目を取得するまで一度に 1,000 件ずつ取得します。

let results = [];
let page = 1;
let paginate = true;

4. paginate が true である限り実行される while ループに入ります。このループ内で helius.rpc.getAssetsByGroup() を使用して DAS API にリクエストを送信します。グループキー、グループ値、現在のページ番号を指定します。

while (paginate) {
    try {
        const response = await helius.rpc.getAssetsByGroup({
            groupKey: 'collection',
            groupValue: 'YOUR_COLLECTION_VALUE',
            page: page,
        });
        ...
    }
    ...
}

5. レスポンス内の項目を処理します。項目数が 1,000 未満の場合はすべての項目を取得済みであるため、paginate を false に設定してループを終了します。それ以外の場合は page 変数を増分し、次のループ処理で次の項目群を取得します。

const nfts = response.items;

// if the amount of items returned is less than 1000, stop pagination
if (nfts.length < 1000) {
    paginate = false;
} else {
    // otherwise, increase the page number to get the next page of results
    page++;
}

6. レスポンス内の各項目について、メタデータから name と image を抽出し、results 配列に追加します。

for (const nft of nfts) {
    const name = nft.content?.metadata.name;
    const image = nft.content?.links?.image;

    results.push({ name, image });
}

7. 最後に、結果をローカルストレージに保存し、次回再取得する必要がないようにしてから、結果を返します。

localStorage.setItem('nftData', JSON.stringify(results));
return results;

完全なコードは次のとおりです。 

import { Helius } from 'helius-sdk';

export async function getCollection() {
	const storedData = localStorage.getItem('nftData');

	if (storedData !== null) {
		return JSON.parse(storedData);
	}

	const helius = new Helius('YOUR_API_KEY');
	let results = [];
	let page = 1;
	let paginate = true;
	while (paginate) {
		try {
			const response = await helius.rpc.getAssetsByGroup({
				groupKey: 'collection',
				groupValue: '8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH',
				page: page,
			});
			const nfts = response.items;

			// if the amount of items returned is less than 1000, stop pagination
			if (nfts.length < 1000) {
				paginate = false;
			} else {
				// otherwise, increase the page number to get the next page of results
				page++;
			}
			for (const nft of nfts) {
				const name = nft.content?.metadata.name;
				const image = nft.content?.links?.image;

				results.push({ name, image });
			}
			localStorage.setItem('nftData', JSON.stringify(results));
			return results;
		} catch (e) {
			console.log(e);
		}
	}
}

YOUR_API_KEY を実際の Helius API キーに、groupValue を表示するコレクションの実際の値に置き換えてください。この例では、groupValue は 8Rt3Ayqth4DAiPnW9MDFi63TiQJHmohfTWLMQFHi4KZH です。これは Solana Monkey Business Gen 3 のコレクション ID です。

ステップ 3：Collection コンポーネントを作成する

1. $lib/components ディレクトリに、Collection.svelte という名前の新しいファイルを作成します。このファイル内の <script> タグに必要な import を設定します。

このコードでは、次の処理を行っています。

• このコンポーネントで使用する getCollection 関数を import します。
• svelte から onMount、onDestroy、afterUpdate を import します。
• 各 NFT の名前と画像を受け取るため、コレクションを空の型に設定します。
• onMount 関数から getCollection 関数を呼び出し、コレクションデータを設定します。

2. 次に、画像が表示領域に入ったときだけレンダリングされるよう、Intersection Observer を設定します。この例のように多数の画像を読み込む場合は特に重要です。

3. 次に、前の afterUpdate 関数で設定したオブザーバーを停止するよう、onDestroy をセットアップします。

4. 次に、Tailwind を使用してグリッド形式のレイアウトを作成し、すべての画面サイズに対応させます。

5. 返されたデータから画像を読み込み、表示するようにグリッドの内部を設定します。

上記のコードでは、次の処理を行っています。

• 外側の div と Tailwind を使用してグリッドと列を設定します。
• 各項目の画像ソースを読み込むため、ここに each ブロックを配置します。
• 返された各 NFT 項目を表示するため、グリッドレイアウトにカードと画像の div を追加します。

完全なコードは次のとおりです。

ステップ 4：コレクションを表示するページを作成する

1. src/routes ディレクトリに、+page.svelte という名前の新しいファイルを作成し、次のコードを入力します。

このステップでは、Collection コンポーネントをメインページに import します。

2. 次に、ページのレイアウトを設定します。

このステップでは、次の処理を行っています。

• ページコンテンツを配置するコンテナを設定します。
• ヘッダーを追加します（<style> タグでスタイルを設定します）。
• import した Collection.svelte をコンテナ内の <h1> の直下に配置します。

ステップ 5：サーバーを起動する

これで SvelteKit サーバーを起動する準備ができました。ターミナルで次のコマンドを実行してください。

npm run dev

まとめ

これで、Helius SDK を使用して NFT コレクションを取得し、表示する SvelteKit プロジェクトを正常にセットアップできました。collection.ts で設定した関数は柔軟性があり、さまざまなフレームワークで利用できます。このチュートリアルで、より複雑なユースケースに DAS SDK を活用するための基礎を身につけられました。