NFT を活用してウェブサイトの可能性を解き放つ
TechFlow厳選深潮セレクト
NFT を活用してウェブサイトの可能性を解き放つ
サイトにBrand Connectをどのように統合すれば、最初のトークン化されたアプリケーションネットワーク（TAPP - 当社が社内で作成・使用している用語）を構築できるでしょうか？
Web3業界の深掘り報道に専念し潮流を洞察Token Negotiator（Brand Connect）は、Smart Token LabsがTokenScriptフレームワークに基づいて作成した新しい技術製品です。これは完全にオープンソースのNPMパッケージであり、任意のウェブサイトがこれを利用してオンチェーンおよびオフチェーンのtoken attestation（検証・証明）を実現できます。
リンク：https://www.npmjs.com/package/@tokenscript/token-negotiator
本稿では、Brand Connectをウェブサイトに統合する方法を紹介し、初めてのトークン化アプリケーションネットワーク（TAPP ― 当社内で使用している造語）の構築をサポートします。このプロセスでは、広く利用されているライブラリReactを使用して、複数のネットワークにおけるトークンの体験と操作方法を示します。
本記事から最大限の価値を得るために、まずQ&A形式で基本的な概念や用語を紹介しましょう。
トークンとは何ですか？
本記事で言及するすべてのトークンとは、NFT（ブロックチェーン上で発行される非代替性トークン）または暗号技術によって作成され、改ざん・複製不可能なトークン（主にデバイスメモリ、電子メール、またはネットワークストレージプロトコルに保存される資産）を指します。
このようなタイプのトークンは、自動車の鍵、コンサートチケット、アート作品、あるいは本人確認（DID）など、あらゆるデジタル形式のものを表すことができます。さらに多くの可能性が今後開拓されていくでしょう。
トークン化ネットワークとは何ですか？
トークン化ネットワークとは、ユーザー体験をトークンを中心とした革新的なアイデアとして捉えるものです。
attestation（検証・証明）とは何ですか？
attestationとは、ある事象に対する証拠または証明を意味します。たとえば、空港では有効なパスポートと航空券を提示することで、飛行機に乗る資格があることを証明します。同様の概念がトークン化ネットワークにも適用され、トークンの所有権はattestation（検証・証明）後に後続の操作を行うことができます。
なぜトークンを使うべきなのでしょうか？
トークンは特定の用途や中央集権的サービスに制限されません。
どこでも認証・利用が可能です。
分散型のセキュリティとプライバシーを提供します。
中央集権的サービスと比べて、ユーザーがより多くのコントロールを持てます。
トークンを採用することで、既存の摩擦を減らし、ユーザーが必要なサービスに簡単にアクセスできる新しいインターネットの形態が生まれます。
代替手段はあるのでしょうか？
従来のWeb 2.0と呼ばれるネットワークサービスは、トークンで解決可能なさまざまな方法（一定の体験のハードルがあり、異なる分野で使用可能な証明を作成する）を提供しています。しかし、本稿で紹介する内容は、今日私たちが知り、使用しているネットワークよりも多くの可能性と応用能力を持つ新たなパラダイムへの想像力を広げるものとなるでしょう。
トークンを使用する（または使用しない）リスクは何ですか？
トークン化ネットワークは非常に新しい概念であり、その全潜在能力や技術リスクを理解するには、まだ学ぶこと、作ることも多くあります。
これまでのところ、ユーザーが自身の証明情報を安全に保ちたい場合や、企業が適切なソリューションを求める場合において、トークンの使用はより良いリスク管理につながると考えています。
メリットは何ですか？
企業はNFTコレクションを通じて、それまで見つけることや接触できなかった新たなターゲット層にリーチできます。
ユーザーは複数のアプリケーションで同じトークンを利用でき、ネットワークサービスへのトークン許可に伴うユーザーフリクションが減少します。
開発者は、トークンの所有権を基盤とした新しいタイプのアプリケーションを構築できます。
では、ここから本題に入りましょう！
まず、以下のコマンドで新しいReactアプリをインストールしてください（要件）：
npx create-react-app my-app
完了したら、ディレクトリを変更します：
cd my-app
その後、以下を実行：
npm run start
以下のような画面が表示されるはずです：
次に、以下のコマンドでToken Negotiator (Brand Connector) をインストールします。
npm i @tokenscript/token-negotiator
「tokenContextProvider.js」を下記のアプリケーションディレクトリのように作成します。
インストールが完了したら、ページにいくつかのトークンを読み込む準備が整います。次に、ディレクトリ内に「tokenContextProvider.js」という名前のスクリプトを作成し、以下のアプリケーションディレクトリ構成に従ってください：
このファイルでは、Reacts ContextProvider APIを使ってライブラリを設定し、props経由でコンポーネントにトークンを提供します。
新しく作成したファイルに以下の内容を追加してください：
申し訳ありませんが、コードは原文リンクをご確認ください。
契約アドレス'0x264...'とチェーン'rinkeby'を、ご自身が所有するNFTのスマートコントラクトアドレスと位置に合わせて変更してください。NFTをお持ちでない場合は、テストネット上でミントする方法が多数あります。OpenSeaなどコード不要のものも含みます。
issuers: [
{
collectionID: "demo-tokens",
contract: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09',
chain: 'rinkeby'
}
]
NFTを保持し、Token Negotiatorを設定したら、ライブラリがユーザーのトークンを読み取れるようにするために4つの変更を加える必要があります。
次に、「App.js」に以下の変更を加えます。ライブラリを接続し、「overlay-tn」というクラス要素にマークアップされたオーバーレイコンポーネントを挿入します。
その後、「StoreFront.js」という新しいコンポーネントを作成し、販売中の商品リストを表示します。
申し訳ありませんが、コードは原文リンクをご確認ください。
最後に、「StoreItem.js」という新しいコンポーネントを作成し、各店舗商品のデータを表示します。
設定手順：Create-React-App / webpack 5に基づく変更、または前述の完成版に移行。
Webpack第5版では、Node.jsのpolyfillがデフォルトで提供されなくなり、必要なモジュールを明示的にインポートする必要があります。これによりCreate-React-Appを含む多くのプロジェクトに影響が出ましたが、以下の解決策があります：
https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5?ref=hackernoon.com
あるいは、このステップをスキップして、以下のリンクにある完全なサンプルコードを使用することもできます：
https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website?ref=hackernoon.com
よし、設定が完了しました。アプリケーションのテストを始めましょう。サーバーを起動すると以下のような表示がされます：
プロジェクトディレクトリ内で、コマンドラインで以下を実行：
npm run start
1. Token Negotiatorコンポーネントのfabボタンをクリックすると、トークン使用に必要な設定の詳細が表示されます。
2. 次に、エンドユーザーは自分のウォレットを接続する必要があります。トークンはそこに保管されています。
3. ユーザーは、どのトークンコレクションをウェブサイトに読み込むか選択できます。この例では1つのコレクションのみ使用していますが、実際には複数の機能を含め、ユーザー体験の中でトークンが直接異なる機能を発揮することが可能です。
4. これで、エンドユーザーは自分のトークンをサイトに読み込み、割引などの特典を享受できます。この技術は、特定のNFTシリーズの所有者に特別サービスを提供したい企業サイトに応用できます。
まとめ
本稿では、React JSプロジェクトにToken Negotiator（Brand Connect）を導入する方法を紹介し、特定のNFTコレクションの所有者が割引や他の限定サービスを有効化できるようにしました。
本記事が皆様のインスピレーションとなり、TokenScriptの技術フレームワークを通じてトークンの無限の可能性を引き出す一助になれば幸いです。
"TokenScriptは、Web3の未来において、トークンのコンポーザビリティのための新しい標準を提供します。そこでは、トークンはウェブページのようにどこにでも存在し、所有権、アイデンティティ、インタラクションの主要な対象となります。" -- CTO Weiwu
ご閲覧ありがとうございました
私たちは、すべての人にとってより良いネットワークを構築するためのオープンソース技術の開発を目指しています。
下記にてご意見やご感想をぜひお聞かせください。近日中に別の記事を公開予定で、ブロックチェーンの知識がなくても利用可能な、暗号技術で設計されたオフチェーントークンについて解説します。
関連リンク：
TechFlow公式コミュニティへようこそ
Telegram購読グループ：https://t.me/TechFlowDaily
Twitter公式アカウント：https://x.com/TechFlowPost
Twitter英語アカウント：https://x.com/BlockFlow_News
Smart Token Labs 中文爱好者
