フルオンチェーンNFT10選｜UniSwap V3 NFTやNounsを解説
この記事は「Flavours of On-Chain SVG NFTs on Ethereum」を日本語訳したものです。
・原文
NFTは、ブロックチェーン上の一意のアイテムとして、メタデータと対応するビジュアルを含むデータを指すURIを持っています。このURIは、通常のサーバーでホストされているビデオや画像、またはIPFS（ハッシュベースのアドレス）やArweave（ハッシュベースのコンテンツのインセンティブホスティング）などの他のサービスを指すHTTPリンクにすることができます。
ただし、ますます一般的になっている形式がもう1つあります。それは、データURIの使用です。これらのURIには、その中のすべての情報が含まれています。したがって、もう一方の端にはサーバーがありません。データURIを使用することで、NFT作成者は、NFTに関連するすべてのコンテンツを「オンチェーン」にすることを試すことができます。それは芸術に永続性のベクトルを追加します。イーサリアムが継続する場合、それをサポートするための補助的なインフラストラクチャは必要ありません。現在、一般的な形式は、NFTビジュアルをSVGとしてデータURIに保存することです。これは、ほとんどのブラウザーがネイティブに解析できるためです。
それは楽しいです、そしてスマートコントラクトコーディングのいくつかの制約（制限された実行と高価なストレージ）のために、それはそれ自体がガスゴルフのゲームになり、生きるダイナミックなアートを作成するためにアーキテクチャにできるだけ多く詰め込もうとします（現在）Ethereumで永遠に。
SVGオンチェーン？
イーサリアムがどのように機能するかを覚えておくことが重要です。コード（スマートコントラクトの形式）をイーサリアムにアップロードするには、料金を支払う必要があります。スマートコントラクトに保存されているデータに変更を加えるためにコードを実行する場合は、（エーテルを使用して）コストがかかります。ただし、コードが状態に変化をもたらさない場合でも、料金を支払わずにコードを実行することができます。状態を変更するには、トランザクションを発行します。状態を変更せずに単にコードを実行することは、一般にスマートコントラクトを「呼び出す」と呼ばれます。後者の例には、変数のフェッチ、トランザクションがネットワークに発行される前にトランザクションが成功するかどうかのチェック、現在の状態に基づく単純な計算の実行が含まれます。
これは、イーサリアムノードが長時間の停止しない操作（大量のコード）を実行することを期待できるという意味ではありません。トランザクションとしてネットワークに送信されない場合でも、計算はトランザクションの標準ルールに準拠する必要があります。したがって、結果の計算は、1つのイーサリアムブロックに収まるかのように解析する必要があります。したがって、いくつかの「ガスゴルフ」が関係しており、その目標は、（トランザクションがネットワークに送信されていない場合でも）1つのイーサリアムトランザクション内で実際に計算を生成できるようにすることです。
そのような重要な機能の1つは、既存の状態から画像を生成する機能です。したがって、オンチェーンSVGプロジェクトに共通しているのは、スマートコントラクトに格納されているコードに基づいて「表示」されたときに画像を生成することです。スマートコントラクトを「呼び出し」、現在の状態に基づいてコードを実行するように要求することでレンダリングされます。この実行は、状態を変更しないため、（エーテルの使用に関して）費用がかかりません。したがって、画像の生成/レンダリングを依頼できます。
別の言い方をすれば、オンチェーンSVGNFTは表示時にレンダリングされます。
*注意：ローカルマシンであろうとInfuraのようなホストされたサービスであろうと、計算はイーサリアムノードで処理されるため、レンダリングは完全に「無料」ではありません。ただし、これらの呼び出しは助成されており、dappプロバイダーはこれらの要求を処理するためにホストされたサービスに支払う必要があります。ただし、計算のサイズではなく、要求の量だけで決まります。
私のプロジェクトであるNeolasticsは、「表示」したときのレンダリングの簡単な例です。
1）ピースをミントすると、トランザクション時に一意のランダムなIDが割り当てられます。
2）generateSVGFromTokenID（）を呼び出すと、IDnrを入力として使用して9色を選択します。次に、コードはこれらの9色で9タイルのSVG正方形をコンパイルします。同じIDは、常に同じSVG出力を生成します。詳細については、後で説明します。
さまざまなプロジェクトがさまざまなアプローチを取っているため、SVGをどのようにまとめてチェーンに接続するかを検討する価値があります。作品をレンダリングするためのエントリポイントは、tokenURI（）関数を呼び出すことから始まります。場合によっては、メタデータにHTTPへのリンクが残っていても、コントラクトには、画像とメタデータを再作成できるようにする他の関数が格納されています。しかし、時が経つにつれて、新しいプロジェクトはそれをすべて、tokenURI（）に直接入れ始めました。
Avastars
Avastars、SVGオンチェーンを使用する最初のプロジェクト。
ID（avastarsメタデータコントラクト）を持つtokenURIを見てみましょう：
https://etherscan.io/address/0x0ea3a9ffde8164bf680510e163f78150dc0274bd
これはHTTPサーバーを指しているので、オンチェーンではないと予想されますか？そうではありません。その段階では、データURIはNFTビューアによって容易にサポートされていませんでした（ERC721標準の一部であるにもかかわらず）。したがって、最初のエントリポイントがHTTPサーバーを指している場合でも、すべてオンチェーンで取得できます。したがって、メタデータサーバーがダウンした場合でも、すべて再現可能です。
メタデータは、getAvastarMetadata（）を呼び出すことで利用できます。
まず、EtherScanについて覚えておくべきことがあります。これらの文字列呼び出しが奇妙な方法で表示されるというバグ（癖？）があります。カンマは新しい行として解釈されます。スマートコントラクトから実際に返されるものを読み取るには、ここのスペースをコンマに置き換える必要があります。
AvastarsTeleporterコントラクト（https://etherscan.io/address/0xf3e778f839934fc819cfa1040aabacecba01e049）には、レンダリング機能が含まれています。 renderAvastar（）を呼び出すと、SVGが表示されます。
しかし、SVGはどのように生成されますか？それはどのようにまとめられ、生成されますか？
Avastarsは、さまざまな特性を連結することによって機能します。これらの特性は元々SVGとしてコントラクトに注入されました。
SVGインジェクショントランザクションの例。Avastarsがデプロイされたときにトレイトを作成します。
https://etherscan.io/tx/0x800954149d30d98cff5d926d39504b1a184e976badc613fbc67a0226c1dc89b6
Squiggly.WTF
同様の形式であるHTTPメタデータサーバーを採用することで、Squigglyに続きましたが、必要に応じて作業を再現するためのオンチェーンコードがあります。tokenURI（）を呼び出して、何が表示されるかを確認しましょう。
しかし。このサーバーがダウンした場合に備えて、SquigglyにはgetIdtoSVG（）関数があります。
しかし。最終的な画像はどのように生成されますか？Squigglyでは、すべてのSVGがデプロイ時にスマートコントラクトにアップロードされました（Avastarsのような特性として注入されたものとは異なります）。
https://etherscan.io/address/0x36f379400de6c6bcdf4408b282f8b685c56adc60#code#L1451
シードから、最初にグラデーションを設定し、最終的な画像に表示される曲線を作成します。
Squiggly.wtfは、Avastarsとは異なり、チェーン上にメタデータを持っていません。
ボーナスポイント：Squiggly.wtfのメタデータをたどると、「image_data」フィールドがあることに気付くでしょう。これはERC721標準の一部ではありません。しかし。これは、HTTP URIとしてではなく、データURIとして画像フィールドを解析するための回避策として、OpenSeaによって導入されました。ほとんどのNFTマーケットプレイス（OpenSeaなど）は現在、データURIを直接サポートしているため、これはもう必要ありません。したがって、「image_data」の代わりに、メタデータの「image」だけを使用してこれを実行できます。
Neolastic
Neolasticsは、Squiggly.wtfと同様のアーキテクチャに従います。アートワークをオンチェーンで再現可能なオフチェーンメタデータサーバーを使用します。オンチェーンメタデータはありません。
IDを使用してコントラクトでtokenURIを呼び出しましょう：https ://etherscan.io/address/0xb2d6fb1dc231f97f8cc89467b52f7c4f78484044
同じ。オフチェーンサーバーを使用します。ただし、generateSVGofTokenById（）を使用すると、メタデータサーバーが将来オフラインになった場合でも、常にイメージをSVGに直接再作成できます。
ピースはどのようにまとめられていますか？ピースが結合され、レンダリング関数自体のシードから変更されるという点で、Squigglyとかなり似ています。ピースの作成に使用されるSVGは、アップロード時にスマートコントラクトにアップロードされました。
https://github.com/simondlr/neolastics/blob/master/packages/hardhat/contracts/ERC721.sol#L172
TinyBoxes
彼らは実際にアニメートします！クリックスルーを参照してください：https ://opensea.io/assets/0x46f9a4522666d2476a5f5cd51ea3e0b5800e7f98/1062
TinyBoxesも同様のアーキテクチャに従います。
tokenURI（）を呼び出しましょう：https://etherscan.io/address/0x46f9a4522666d2476a5f5cd51ea3e0b5800e7f98
以前と同じように、tokenArt（）と呼ばれる画像をチェーン上に保持するカスタムレンダリング関数があります。
特に、追加の非標準の追加があります。ERC721メタデータはオンチェーンではありませんが、画像自体の特性/メタデータはHTMLタグとして画像自体に保存されます。
SVGをどのように組み合わせますか？もう少し複雑です。それでもランダムシードから形状とアニメーションを構築しますが、SVG要素自体を組み合わせるためのより複雑な方法があります。
https://github.com/skyfly200/tiny-boxes/blob/master/contracts/TinyBoxRenderer.sol#L174
レンダリング関数自体で文字列ラングリングを行うことの複雑さの一部を抽象化するSVG.solがあります。
https://github.com/skyfly200/tiny-boxes/blob/master/contracts/libraries/SVG.sol
アニメーション要素を追加するのと同じ：https://github.com/skyfly200/tiny-boxes/blob/master/contracts/libraries/Animation.sol
ご覧のように。SolidityにSVGを追加することは、必ずしもきちんと整理されているわけではないので、これらの抽象化を行うことは役に立ちます。
Mandala
マンダラはそれに続きますが、初めて何か新しくて面白いことをします。
IDを使用してtokenURI（）を呼び出しましょう：https://etherscan.io/address/0xDaCa87395f3b1Bbc46F3FA187e996E03a5dCc985 。
メタデータサーバーを指す代わりに、実際には完全なJSON文字列と画像を取得します。HTTPサーバーは必要ありません。この時点では、データURIは広くサポートされていませんでしたが、Mandalasはそれでもプッシュして先駆者となりました。
何が起きてる？まず、etherscanには、コンマが改行として解釈されるバグ/癖があることに注意してください。したがって、上記の完全なデータURIには、1行目のxmlの後に、2行目のbase64の後にコンマがあります。画像全体（カンマの追加を含む）をコピーしてブラウザに貼り付けると、対応するマンダラが表示されます。
同様に新しいものは、base64エンコーディング（画像用）です。これは、URIにURI自体に影響を与えるいくつかの特殊文字があるためです。したがって、gifをレンダリングするには、base64にエンコードする必要があります。これはより安全です。彼らのSVGは安全である（特殊文字がない）ので、base64にエンコードする必要はありませんでした。ただし、誤って安全でない文字を追加するのは非常に簡単です。たとえば、CSSスタイリングに＃を使用すると、URIがトリップします。ただし、base64へのエンコードにはトレードオフがあります。つまり、より多くのガスが必要になります。
SVGをどのように組み合わせますか？
Mandalasは、新しいbase64エンコードピクセルでテンプレート化されたマンダラをペイントする独自のレンダリングシステムを使用しています。
https://etherscan.io/address/0xDaCa87395f3b1Bbc46F3FA187e996E03a5dCc985#code#F10#L164
UniSwap V3 NFT
UniSwap V3では、ポジションは一意であり、NFTとして取引されます。したがって、これらのポジションのためにクールなアートを作成する絶好の機会でした。UniSwapチームの規模が大きいため、ロビープラットフォームが全面的にデータURIを完全にサポートするのに役立ちました（ERC721標準の最初からそうであったはずです）。
tokenURI（）を呼び出しましょう：https ://etherscan.io/address/0xc36442b4a4522e871399cd717abdd847ab11fe88
すべてbase64です！最も安全なエンコーディング。これをデコードすると、メタデータのJSONが取得されます。次に、「画像」フィールドもbase64にSVGエンコードされていることがわかります。それをもう一度デコードすると、最後に甘いSVGが表示され、上に表示されている画像になります。素晴らしい！
SVGをどのように組み合わせますか？
多くの可動部分があり、その一部は基礎となる財政状態から生成されるため、これは非常に複雑です。世代をオフロードして、契約を分離します：NFTDesscriptor.solとNFTSVG.sol。繰り返しますが、複雑さのいくつかをさまざまな機能に抽象化します。
https://github.com/Uniswap/uniswap-v3-periphery/blob/main/contracts/libraries/NFTDescriptor.sol#L44
あなたが再び見ることができるように。Solidityは、このすべてのSVGを解析するために実際に作成されたわけではありません。プロジェクトが複雑になると、かなり毛むくじゃらになる可能性があります。😅
From：https://github.com/Uniswap/uniswap-v3-periphery/blob/main/contracts/libraries/NFTSVG.sol
まだ。できます！そして、それはきれいです。:)
Anchor Certificates
無題のフロンティアのための私のプロジェクトのもう一つ。アンカー証明書はそれに続き、すべてをチェーン上に置きます。
tokenURI（）を呼び出しましょう：
https://etherscan.io/address/0x600a4446094c341693c415e6743567b9bfc8a4a8
UniSwapと同じです。すべてオンチェーン。
SVGをどのように組み合わせますか？これはもっと簡単です。一部のコンポーネントは、個別の関数に抽出されます。その理由の1つは、Solidityが大きなコールスタック（ローカル変数が多すぎる）を保持できないため、Solidityを関数に入れると、計算を続行する前に最近使用した変数を削除できるためです。
Blitmap
Blitmapは、画像とメタデータの両方がオフチェーンである、より伝統的なアーキテクチャに従います。
tokenURI（）を呼び出しましょう：https://etherscan.io/address/0x8d04a8c79ceb0889bdd12acdf3fa9d207ed3ff63
しかし。NeolasticsやAvastarsなどの他のプロジェクトと同じように、カスタム関数から画像を生成できます。
それはすべて正しいですか？はい。blitmapの興味深い点は、基本的にrect 'ピクセル'からこれらの小さな画像を作成し、最終的な画像を取得するために多くのrectを生成することです。画像は、268バイトのピクセルとして（mintOriginal（）またはmintVariant（）を介して）チェーンに挿入され、このデータから再作成されます。
https://etherscan.io/address/0x8d04a8c79ceb0889bdd12acdf3fa9d207ed3ff63#code#F1#L379
Nouns
名詞はまた、すべてのメタデータとSVGをチェーン上に置きます。
tokenURI（）を呼び出しましょう：
https://etherscan.io/address/0x9c8ff314c9bc7f6e59a9d9225fb22946427edc03
名詞は、UniSwap V3 NFTとblitmapsの組み合わせに従うようです。つまり、別個の記述子コントラクト（NounsDescriptor.sol）を持ち、同様の関数命名を使用します。ただし、アートワークをパーツにエンコードしてから、SVG長方形のブロブに結合するという点で、ブリットマップに従います。エンコーディングの考え方は似ていますが、名詞には、「ピクセル」の長方形ではなく、似たような色の部分を1つのSVG長方形にグループ化する手法があります。SVG出力のサイズを節約します。
https://etherscan.io/address/0x0cfdb3ba1694c2bb2cfacb0339ad7b1ae5932b63#code#F7#L48
Avastarsとの類似性を共有し、特性がDescriptor.solコントラクトに追加されました。これは、画像全体が送信されたblitmapsとは異なります。
https://etherscan.io/address/0x0cfdb3ba1694c2bb2cfacb0339ad7b1ae5932b63#code#F1#L178
solSeedlings
（Genesisコレクションから）
tokenURI（）を呼び出しましょう：https://etherscan.io/address/0x5d4683ba64ee6283bb7fdb8a91252f6aab32a110
混合物。これは、データURIで許可されていない特殊文字が含まれているため、完全に標準ではありません。しかし、チェーン上のアートワークの多くのバリエーションで見てきたように、その一部がそこにある限り、より簡単に再現できます。
SVGはsolSeedlingsでどのように生成されますか？
コレクションによっては、solSeedlingsはすべてカスタムであり、ランダム性のためにシードも使用します。
次は何ですか？
SVGオンチェーンを使用するプロジェクトは他にもいくつかあるため、これは完全なリストではありません。しかし、私はプロジェクトがそれをどのように使用しているかを紹介したかったのです。これが、プロジェクトがメタデータとSVGをさまざまな方法でチェーン上に配置していることを理解し、画像をレンダリングおよびエンコードする独自の方法を探求するのに役立つことを願っています。
これは、オンチェーンアートワークプロジェクトが行われていることのサブセットにすぎません。0xmonのように、画像がcalldataとして保存され、gifとして取得される場合もあります。もう1つの例は、ビットマップとしてエンコードを行うbrotchainです。最も人気のあるジェネレーティブアートマーケットプレイスであるArtBlocksは、アートワークをチェーン上にレンダリングするためのスクリプトを保存します。ただし、これらのスクリプトでは、追加のオフチェーンライブラリ（p5.jsやthree.jsなど）を使用する必要があります。
何かが完全にチェーン上にあるかどうかについては、無限に議論することができますが、少なくとも、アートをイーサリアムのベアボーンに近づけることで起こっている非常に興味深い実験があります。SVGは現在、ブラウザでのその生来性のために人気のある形式ですが、将来的に他に何が生成されるか誰が知っていますか？より多くの標準が開発されると確信しています（たとえば、カスタムエンコーディングシステムを使用する名詞）。今のところ、美しいアートが制作されている急成長中のシーンです。
この記事が気に入ったらサポートをしてみませんか？