特性ジェネレーター: URL 状態からメタデータを作成する (Url)

特性の選択が失われた場合、ミントを繰り返すことはできません

Bare Crypto ジェネレーター アプリケーションは、アバターのパーツ (肌、髪、アクセサリーなど) を react-url-query でアドレス バーに書き込みます。ランダム化、ダウンロード、共有は、同じ URL 状態を通じて行われます。ダウンロードした PNG/SVG と選択したオプション セットは、コレクションのミント メタデータの attributes 文字列となる原材料です。ジェネレーターはおもちゃではなく、ミント ファネルの視覚的な辞書です。```text Trait options (avatars OptionContext) ↓ sync URL query params (react-url-query) ↓ Avatar render (SVG DOM) ├─ download PNG (canvas rasterize) ├─ download SVG (outerHTML blob) └─ shareable deep link ↓ Mint metadata attributes[] trait_type / value pairs

## 最初に説明した概念```text
📦 URL State
Trait seçimlerinin sorgu parametrelerinde yaşaması; yenileme ve paylaşımda aynı görünüm.

📦 OptionContext
Generator'ın tüm trait anahtarlarını ve seçenek kümelerini tutan bağlam.

📦 Mint Metadata
IPFS'e yazılan JSON: name, description, image, attributes.

📦 Trait Attribute
`trait_type` + `value` çifti; marketplace Viewer filtreleri için ham madde.
```URL にない特性は、サポート リクエストで「同じアバターを戻す」と指定しても解決できません。

## URL を使用する理由

ジェネレーターの作成ページは、オプション キーを `UrlQueryParamTypes.string` にバインドします。すべてのオプションをランダムにサンプリングし、`onChangeUrlQueryParams` でプッシュします。したがって、ビューはリンクになり、Discord に貼り付けて、作成する前に確認できます。```text
URL as source of truth
  ?topType=…&clotheType=…&avatarStyle=Circle
         ↓
  OptionContext.setData(props)
         ↓
  deterministic render
```## PNG および SVG のダウンロード

SVG は、アバター DOM `outerHTML` から BLOB としてダウンロードされます。 PNG パスは SVG を画像としてロードし、キャンバス上に 2 倍のスケールを描画し、`file-saver` と `avataaars.png` を返します。 Mint パイプラインは通常、ラスターまたは SVG を IPFS に固定します。メタデータ `image` フィールドにハッシュを書き込みます。

## メタデータ コントラクト

マーケットプレイスのミントフォームでは、少なくともアーティストのようなフィールドが属性に追加されます。ジェネレーターの特性は同じスキーマにマッピングする必要があります: 各 URL キー → `trait_type`、選択された値 → `value`。そうしないと、Viewer と将来のレアリティ ツールは異なる言語を使用することになります。```text
ADR sketch
  Decision: URL-synced traits as mint attribute source
  Why: shareable looks; reproducible before mint
  Trade-off: long query strings; need allowlisted keys
  Follow-up: freeze trait vocabulary version in metadata
```## ファネル接続

ジェネレーター → ダウンロード/共有 → クライアント メタデータの作成 → IPFS → `tokenURI` のチェーン。 Bare Crypto では、これらのアプリケーションは別個のリポジトリです。契約名や属性語彙を共通化しておかないと、製品の表面が崩れてしまいます。

## このエピソードで最も混乱を招く対戦```text
❌ Generator sadece marketing widget'ıdır
✓ Mint metadata vocabulary'sinin kaynağıdır

❌ Trait'leri yalnız React state'te tutmak yeter
✓ Paylaşım ve destek için URL veya eşdeğeri gerekir

❌ PNG indirmek metadata demektir
✓ Metadata JSON + image URI ayrıdır; attributes map edilmelidir

❌ Tüm query key'lerini körlemesine kabul etmek
✓ Allowlist ve varsayılanlar olmadan bozuk görünümler çoğalır

独自のシステムのチェックリスト

1. URL 内に存在する特性キーとローカルのみに存在する特性キーはどれですか?
2. ランダム化後のリンクは、別のブラウザでも同じ SVG を生成しますか?
3. Mint メタデータ属性はジェネレーター キーと同一ですか?
4. PNG サイズ/SVG ハッシュは、ミント画像スペースとして十分ですか?
5. 特性語彙のバージョンはメタデータのどこに凍結されますか?

このセクションで覚えておくべきこと

1. URL 同期特性により、生成ビューが反復可能になります。
2. PNG/SVG ダウンロードはミント画像フィードです。属性には別のマップが必要です。
3. ジェネレーターとミントクライアントは同じ特性ボキャブラリーを共有する必要があります。

共有できないアバターとは、作成できないメタデータを意味します。