Kingsleyは、認定Ethereumブロックチェーン開発者であり、Consensysでテクニカルライターとして勤務し、開発者ツールを専門としています。Consensys入社以前は、GigsterやBraintrustなど複数のプラットフォームでフリーランスのバックエンド開発者として活躍していました。5年にわたるソフトウェア開発経験を持ち、JavaScript（Node.js & React）、GoLang、SQL、Dockerなどのツールに精通しています。Kingsleyは、最新のweb3技術を活用したステップバイステップのチュートリアルやハウツーガイドの作成を得意とし、他の開発者がより優れたdappを構築できるよう支援しています。現在はドバイを拠点とし、余暇にはバスケットボールやサッカーを楽しんでいます。
すべての記事を読む
web3のパラダイムシフトがインターネットを再構築し続ける中、開発者はユーザーエンゲージメントを高め、意思決定を民主化し、オンチェーンで構築したアプリを使用するユーザーから貴重なインサイトを得る新しい方法を常に模索する必要があります。ユーザーフィードバックを収集する方法の一つとして、フィードバックフォームやアンケートフォームをdappに統合することが挙げられます。フィードバックフォームはユーザーと開発者の間のコミュニケーションギャップを埋め、アプリケーションを改善するためのリアルタイムフィードバックを大規模に提供します。また、積極的な参加と集団的意思決定の環境を育みます。
フィードバックフォームをオンチェーンガバナンスに活用する分散型自律組織（DAO）から、従業員のセンチメントを測るために活用する企業まで、フィードバックフォームの用途は無限大です。
このブログでは、フィードバックフォームをアプリケーションのバックエンドに統合し、ユーザーフィードバックの収集を開始するためのステップバイステップのチュートリアルを提供します。そのために、MetaMask SDKとその他のConsensysツールを使用して社内で構築したフィードバックフォーム「Form xChange」を使用します。
dappのUXを改善したい方、カンファレンス後のフィードバックを収集したい方、または意思決定の民主化を目指すDAOメンバーの方など、このチュートリアルではフィードバックフォームを統合し、アプリケーション内に新しいコミュニケーションチャネルを開く方法をご紹介します。
Form xChangeとは何か、どのように機能するか？
Form xChangeは、ブロックチェーン上でフィードバックフォームを作成・活用するために開発されたオープンソースツールです。Form xChangeのスマートコントラクトは現在Lineaにデプロイされていますが、その柔軟なアーキテクチャにより、あらゆるEVM互換ネットワークへのデプロイが可能です。
このプラットフォームでは、参加者がフォームに組み込まれた提案に対して匿名で投票でき、参加者とフォーム作成者の両方が結果を閲覧できるため、web3の透明性の精神を体現しています。
Form xChangeはNext.jsで構築されたユーザーフレンドリーなインターフェースを採用しており、Solidityで記述された2つのスマートコントラクト（FeedbackFormコントラクトとFeedbackFormFactoryコントラクト）を使用して動作します。プロセスはシンプルで、新しいフォームが作成されるたびに新しいFeedbackFormコントラクトがデプロイされ、このタスクはFeedbackFormFactoryコントラクトによって効率的に処理されます。
Form xChangeを利用するには、まずMetaMaskウォレットを使用してアプリケーションに接続・サインインする必要があります。サポートされている主なロールと責任は以下の通りです：
フォーム作成者
フィードバック収集のための複数の質問を含む新しいフォームを作成する機能。
フィードバック収集後、各セクションへのユーザー回答から導き出された平均スコアを閲覧する機能。
参加者
匿名性を保ちながら、フォームや提案に回答を送信する機能。
回答送信後に結果を閲覧するアクセス権。
ユーザーフィードバックを大規模に収集するためにdappにフィードバックフォームを統合する
シンプルなユースケースのユーザーは、Form xChangeの既存のデプロイ済みインスタンスをそのまま利用できますが、独自のユースケースがあり、自分でインスタンスをホストしたい、またはユーザーインターフェースの外観を制御したい場合は、このブログのこのセクションが役立ちます。
リポジトリをローカルマシンにクローンしてバックエンドを起動する方法、Form xChangeバックエンドの新しいインスタンスをLineaにデプロイする方法、そして最後にMetaMask SDKとそれがあらゆるプラットフォームからユーザーのMetaMaskウォレットクライアントへの接続を容易にする方法について説明します。
このチュートリアルの範囲を超えるため、ユーザーインターフェースの構築は行いませんが、独自のユーザーインターフェースの構築アプローチについては、このリポジトリをご参照ください。
Form xChangeバックエンドのクローン方法
このセクションでは、コンピューターにnode.js v16以上がインストールされていること、およびTruffle開発環境がインストールされていることを前提としています。
リポジトリをクローンする：
git clone [email protected]:Consensys/Form-XChange.gitコントラクトディレクトリに移動する：
cd Form-XChange/packages/form-XChangeコントラクトをコンパイルする：
truffle compileテストを実行する：
truffle test
Form xChangeバックエンドの独自インスタンスをLineaにデプロイする方法
Lineaとは何か、なぜLineaにデプロイするのか？Lineaはタイプ2のゼロ知識Ethereum Virtual Machine（zkEVM）であり、Ethereumの環境をロールアップとして再現することで、開発者がEthereumの経験とセキュリティを活かしながら、より低いトランザクションコストで開発できます。
Lineaは、より速いファイナリティ、すべての開発ツールとの互換性、MetaMaskとのデフォルト統合、高いスループットなどの利点を提供しており、Form xChangeバックエンドのデプロイに最適な選択肢です。
Lineaとは何か、なぜ優れた選択肢なのかを理解したところで、Lineaへのデプロイ方法を詳しく見ていきましょう。このセクションを進めるには、MetaMaskウォレット拡張機能がインストールされていること、およびLinea Ethが必要です。Linea Ethの取得方法についてはドキュメントをご参照ください。
Truffleダッシュボードを起動する：
truffle dashboardブラウザで
localhost:24012にアクセスし、MetaMaskウォレットを接続して、ネットワークのドロップダウンからLineaを選択する。別のターミナルで
truffle migrate --network dashboardを実行する。localhost:24012に戻り、デプロイの確認を求めるプロンプトで「確認」をクリックする。
以上です。truffle migrate --network dashboardコマンドを実行したターミナルウィンドウに、新しくデプロイされたコントラクトアドレスが表示されます。Lineaブロックエクスプローラーにアクセスして、デプロイが成功したことを確認できます。
MetaMask SDKを使用してdappをユーザーのウォレットにシームレスに接続する
Form XChangeバックエンドをLineaにデプロイしたら、ユーザーがdappを操作する際に困難を感じないようにしたいと思います。つまり、ユーザーが手間なくウォレットクライアントをdappに接続できるようにシームレスにしたいのです。
MetaMaskはLineaにデプロイされたあらゆるdappへの接続に最も効果的な方法を提供しており、MetaMaskウォレット拡張機能にはデフォルトでLineaネットワークオプションが含まれています。さらに、開発者がdappにMetaMaskサポートを追加するプロセスを簡素化するために、MetaMaskは最近JavaScript、モバイル、ゲームプラットフォームで使用できるMetaMask SDKをリリースしました。
ReactフロントエンドのコードベースでMetaMask SDKを使用するには、以下の手順に従ってください：
YarnまたはNPMを使用してMetaMask SDKをインストールする：
yarn add @metamask/sdk or npm install @metamask sdkMetaMask SDKをReactプロジェクトにインポートする：
import { MetaMaskSDK } from '@metamask/sdk';以下のオプションを使用してMetaMask SDKをインスタンス化する
ReactコードベースのどこでもMetaMask SDKにアクセスする：
window.ethereum.request({ method: 'eth_requestAccounts', params: [] });
ethereum.request()を使用してeth_requestAccountsを呼び出すと、インストールまたは接続のポップアップが表示されるため、常にこの関数を最初に呼び出すことをお勧めします。
Node.js、iOS、UnityなどでのMetaMask SDKの使用方法については、MetaMask SDKドキュメントをご参照ください。
Form xChangeは、貴重なフィードバック収集を促進し、ユーザーの参加と参加型意思決定を促進することでdappを強化します。また、あらゆるEVM互換ネットワークで動作する能力とユーザーフレンドリーなインターフェースにより、統合が容易です。
このチュートリアルでは、フィードバックフォームをdappに統合するための手順を提供しています。バックエンドの準備とLineaへのデプロイから、MetaMask SDKを使用したMetaMaskとの接続確立によるより良いユーザーエクスペリエンスまで、dapp内に魅力的で民主的な環境を育む準備が整いました。web3の力はあなたの手の中にあります！
MetaMask SDKの詳細については、metamask.com/developer/sdkをご覧ください。
AIによる翻訳です。エラーが含まれている可能性があります。常に情報を確認してください。
