Web3 dappにユーザーフィードバックループを構築する方法

ユーザーフィードバックの収集は、プロダクトマーケットフィットを実現し、成功するアプリケーションを構築するための最も重要なステップの一つです。UXデザインの標準がいまだ発展途上にあるweb3においては、その重要性はさらに高まります。

web3開発者がdappのユーザーフィードバックを収集する方法として、現在もGoogleやMailchimpといった企業が提供する中央集権型ソリューションが主流です。しかし今では、オンチェーンのフィードバックフォームも利用可能になっています。このweb3ネイティブなフィードバックフォームについて、dappの成功にとってなぜ重要なのか、そしてその使い方を見ていきましょう。

以前の記事では、Consensysが開発した新しいオープンソースの分散型web3フォームForm-xChangeを紹介し、MetaMask SDKを使ってdappに統合する方法をご説明しました。

このチュートリアルでは、フロントエンドへのフィードバックフォームのデプロイと、ユーザーがdappについて意見を共有するための新しいフォームの作成方法を、前回の手順をベースに解説します。その前に、プロダクト開発・管理においてユーザーフィードバックを収集することの重要性を簡単におさらいしましょう。

マスアダプションを後押しするweb3ユーザーフィードバックフォーム

web3では、ネイティブで分散型のフィードバックフォームが切実に求められています。その理由は何でしょうか？

1. コストを大幅に削減できる： フォーム作成に伴うコストは、スマートコントラクトのデプロイ時の一度きりです。LineaのようなL2にデプロイすれば、通常数ドル程度で済みます。

2. ほぼ無限のカスタマイズが可能： テキスト、リアクション、リンクなど、収集したいフィードバックの種類に合わせてフォームを設計できます。さらに、フロントエンドはコントラクトとは完全に独立しているため、必要に応じて自由にカスタマイズできます。

3. 使った分だけ支払う： 分散型フォームでは、回答数に応じた料金プランはありません。理論上、何件でも回答を記録できます。 ユーザーがガス代を負担するモデルを採用する場合、コントラクトのデプロイ費用以外は一切かかりません。 ユーザーの代わりに費用を負担する場合も、コスト効率の高いネットワークで運用すれば数セント程度です。

4. トークンゲーティングを実装できる： 分散型フォームを使えば、フォームへの回答者を制限できます。たとえば、自分のコレクションのNFTを保有するウォレット、一定量以上のETH残高があるウォレット、または任意のERC-20トークンを保有するウォレットのみにアクセスを限定することが理論上可能です。

チュートリアル：独自の分散型ユーザーフィードバックフォームを作成する

ステップ1：MetaMaskをインストールする

Linea上でコントラクトのデプロイと操作を行います。そのためには、Lineaネットワークが設定済みで、少量のLineaETHを保有する暗号資産ウォレットが必要です。

まずweb3ウォレットが必要です。このチュートリアルでは、Lineaが自動設定された無料で使いやすいウォレット、MetaMaskを使用します。こちらからブラウザ拡張機能としてMetaMaskをインストールできます。

注意：このチュートリアルでは、Brave以外のブラウザ（Edge、Chrome、Safariなど）の使用を推奨します。執筆時点では、Form-xChangeはBraveブラウザで既知の問題が確認されています。

拡張機能を追加すると、MetaMaskがウォレットのリカバリーフレーズの取得を含む一連のステップを案内します。このフレーズは大切に保管してください。紛失した場合は復元できません。盗まれた場合は、第三者があなたの資産にアクセスできてしまいます。

ウォレットの設定が完了したら、MetaMask拡張機能の左上にあるネットワークのドロップダウンに移動し、テストネットワークを表示をオンにします。新しいドロップダウンからLinea Goerliネットワークを選択します。正常に設定されると、ウォレットは次のような表示になります：

ステップ2：フォーセットからLineaETHを取得する

Lineaを初めて使用する場合、ウォレットのLineaETH残高は当然0です。

これを変えましょう。InfuraにはフォーセットがあI、毎日0.5 LineaETHを無料で取得できます。このフォーセットを利用するには、無料のInfuraアカウントの作成が必要な場合があります。

チャージが完了すると、少量のLineaETH残高が表示されます：

ステップ3：Linea RPCエンドポイントを取得する

前のステップで作成したアカウントを使って、再度Infuraにサインインします。メインダッシュボードに自動的にリダイレクトされます。

右上で新しいAPIキーを作成して、新しいプロジェクトを作成します。

ネットワークにはweb3 APIを選択します。キーの名前は任意で設定できます。

キーが作成されると、エンドポイントの一覧が表示されるプロジェクトダッシュボードに再度リダイレクトされます。ここで、Lineaテストネットに関連するエンドポイントを控えておいてください。後のステップでForm-xChangeコントラクトをデプロイする際に必要になります。

ステップ4：nodeとnpmをインストールする

Form-xChangeソリューションは、Infura、Next.js、Truffle、Dapp APIのスタックで動作します。これらの技術をインストールして使用するには、ローカルマシンにnodeとnpmが必要です。

お使いのOSに対応したダウンロードはこちら。

完了したら、ターミナルでバージョン番号を確認し、正しくインストールされていることを確かめてください。

$ node -v
$ npm -v
コピー

ステップ5：Form-xChangeリポジトリをクローンする

前述のとおり、Form-xChangeはソースコードがGitHub上で公開されているオープンソースリポジトリです。

以下のコマンドを使って、このリポジトリをクローンし、必要なパッケージをすべてインストールしましょう：

$ git clone https://github.com/Consensys/Form-XChange
$ cd Form-XChange
$ npm install
コピー

お気に入りのコードエディタ（VS Codeなど）でForm-xChangeリポジトリを開きます。これはすぐに使えるプロジェクトなので、いくつかの環境変数を設定する以外はほとんどコードを書く必要はありません。

ステップ6：フィードバックフォームをデプロイする

Truffleプロジェクトとフォームスマートコントラクトのサブフォルダーに移動します：

このフォルダーには、FeedbackFormとFeedbackFormFactoryという2つのメインコントラクトを含むcontractsサブフォルダーがあります。

前者は、質問のリストとそれに対する回答を保存できる個別のフォームを実装しています。

後者は、前者のカスタマイズされたバージョンをデプロイするために使用できるファクトリーコントラクトです。

ソースコードを確認し、作成したいフォームの種類に応じて変更を加えることができます。このチュートリアルではデフォルト設定のまま進めます。

このステップでは、FeedbackFormFactoryコントラクトをデプロイします。これにより、作成者であるわたしたちがNextフロントエンドからフォームを作成できるようになります。

これを行うには、.envという名前のファイルを作成し、以下の情報を追加します：

次に、truffle-config.jsファイルで、汎用RPCエンドポイントをステップ3で生成したInfuraエンドポイントに置き換えます。最終的な設定ファイルは次のようになります：

require("dotenv").config();
const mnemonic = process.env["MNEMONIC"];

const HDWalletProvider = require("@truffle/hdwallet-provider");

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1", // Localhost
      port: 9545,
      network_id: "5777",
      chain_id: 1337,
    },
    linea: {
      provider: () =>
        new HDWalletProvider(mnemonic, `< INFURA LINEA ENDPOINT >`),
      network_id: 59140,
      chain_id: 59140,
    },
  },
  mocha: {
    timeout: 100000,
  },
  compilers: {
    solc: {
      version: "0.8.13",
    },
  },
};
コピー

準備完了です！以下のコマンドを実行して、フィードバックフォームファクトリーコントラクトをデプロイします：

正常に完了すると、次のような出力が表示されます：

> [email protected] linea
> npm run compile && npm run generate-types && npm run migrate:linea

> [email protected] compile
> truffle compile

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

> [email protected] generate-types
> typechain --target=truffle-v5 'build/contracts/*.json'

Successfully generated 5 typings!

> [email protected] migrate:linea
> truffle migrate --network linea

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.

Starting migrations...
======================
> Network name:    'linea'
> Network id:      59140
> Block gas limit: 61000000 (0x3a2c940)

1_deploy_contracts.js
=====================

   Replacing 'FeedbackFormFactory'
   -------------------------------
   > transaction hash:    0x50ba2c362cb463d0b763ba5f092e3f1a8591dd9cd358f2feda035438ce02cee0
   > Blocks: 2            Seconds: 21
   > contract address:    0xBDAb1F857dC80968022784cc1C868820BFD2F7c5
   > block number:        1099121
   > block timestamp:     1688991002
   > account:             0xc361Fc33b99F88612257ac8cC2d852A5CEe0E217
   > balance:             0.62878173171592041
   > gas used:            2636875 (0x283c4b)
   > gas price:           2.500000007 gwei
   > value sent:          0 ETH
   > total cost:          0.006592187518458125 ETH

   > Saving artifacts
   -------------------------------------
   > Total cost:     0.006592187518458125 ETH

Summary
=======
> Total deployments:   1
> Final cost:          0.006592187518458125 ETH
コピー

コントラクトアドレスを控えておいてください。後のステップで必要になります。

ステップ7：Nextフロントエンドファクトリーをデプロイする

フィードバックフォームファクトリーコントラクトが稼働したので、次はNextフロントエンドに移りましょう。以下のコマンドを実行して、Nextアプリプロジェクトに移動します：

前のステップでデプロイしたコントラクトとアプリを接続する必要があります。lib/contract.ts/config.tsファイルを開き、コントラクトアドレスを追加することで接続できます。

apps/webフォルダーに別の*.env*ファイルを作成し、ステップ3のプロジェクトに関連するInfuraキーを追加します。

準備完了です！アプリをlocalhostにデプロイしましょう：

localhost:3000でアプリを確認できます。次のような表示になるはずです：

さっそく新しいフォームを作成しましょう！

アプリ右上の機能を使ってMetaMaskウォレットを接続します。接続が完了すると、アプリはあなたがファクトリーコントラクトをデプロイした人物であることを自動的に認識し、アプリの作成者としても認識されます。

これにより、こちらのUIから新しいフォームを作成できるようになります。

フォームのタイトル、説明、および少なくとも1つの質問を追加し、「フォームを作成」をクリックします。

MetaMaskがトランザクションの承認を求めます。フォームの作成は実質的に新しいFeedbackFormコントラクトの作成を意味するため、この操作が必要になります。

ホームページに戻ると、作成したフォームが表示されています。これでフォームへの回答を送信できます！

この回答を記録するために、MetaMaskを通じて少量のガス代の支払いが必要になります。

web3スタックで開発を続けよう：Infura、Linea、MetaMask

以上です！ほとんどコードを書くことなく、dapp向けの完全な分散型フォームソリューションをデプロイし、ユーザーフィードバックを収集できるようになりました。しかも、分散型でweb3ネイティブな形で収集できます。Form-xChangeのようなプロジェクトは、web2のUXデザインをweb3アプリケーションに持ち込む大きな一歩となるでしょう。Nextフロントエンドの見た目や操作感、スマートコントラクトが提供する機能を自由に変更してください。あなた自身のものにすることが、むしろ推奨されています。