NFTマーケットプレイスのアーキテクチャ設計 ― FanTopはどのように動いているか

2022年3月2日に開催したエンジニア向け勉強会NFTプラットフォームの作り方ー FanTopの裏側。多くの方にご参加いただいたのですが、残念ながら都合があわなかったり、後でイベントを知ったという方もいらっしゃるのではないでしょうか。

そうした方々向けに、連載第2弾としてテキスト起こし版を作成しました。スライド資料と合わせてご覧ください。

NFTマーケットプレイス「FanTop」はどのように動いているのか

NFTマーケットプレイスは、フロントエンドとバックエンドのみならず、ブロックチェーンを扱う必要があります。そのアーキテクチャには、ブロックチェーンのリアルタイム性の課題を補ったり、書き込みや整合性検証などの役割を持つ機能も必要となります。

今回は、NFTマーケットプレイス「FanTop」のアーキテクチャを元に、各操作と裏側の仕組みなどを紹介します。

登壇者紹介

岩下郁海 @iwashita_ikumi

メディアドゥ新卒入社1年目。フロントエンド・バックエンド・インフラと1年目で様々なことを経験&勉強中。Web小説が好き。

自己紹介

新卒で入社1年目の岩下と申します。大学時代はJavaとC言語、Pythonで画像処理関連の研究を行っていました。大学ではC言語コンパイラを作って、それを大学独自の機械語やアセンブラに変換していました。メディアドゥに入ってからは、主にフロントエンドエンジニアとしてReactとTypeScriptを扱っています。

FanTopのアーキテクチャ

FanTopの全体像は以下のようになっています。ブロックチェーンとAWSが連携した構成になっており、ブロックチェーン単体で動作するものではありません。

ブロックチェーンでは取引履歴やNFTの保有者を管理しています。そして、このブロックチェーンに対してブラウザやWorkerがトランザクションを発行して、情報の書き換えを行っています。決済を含む処理やユーザーによって変更されると困る処理に関しては、Workerが行っています。ブラウザからWorkerに対してトランザクションの依頼を出す際には、APIを経由してデータベースを介して処理を行います。

次にブロックチェーンとブラウザ、AWSの役割を説明します。

まずブロックチェーンに関して説明します。FanTopではFlowと呼ばれるブロックチェーンを採用しており、NFT保有権の管理を担っています。NFTのデータがユーザーのストレージに書き込まれて、それら全てのNFTの履歴がブロックチェーン上に記録されます。

また、Flowはパブリックブロックチェーンであり、全世界に取引が公開されています。そのため、非常に透明性が高いという特徴を持っています。FanTopで行われているトランザクションが気になった場合は、Flow Scanというサイトで確認することができます。

次にWebアプリ（ブラウザ）についてです。役割としてはNFTマーケットプレイスのUIと、NFT出品やNFT送信といったブロックチェーントランザクションの発行ができます。使用技術はNext.js/TypeScript/SWR/styled-components/FCLを利用しています（FCLはFlow Client Libraryの略で、Bloctoの認証やトランザクション用のライブラリのことです）。

AWSの役割はバックエンドで、ブラウザ表示の高速化のためデータのキャッシングを行っています。あくまでデータの主体はFlowです。その他にもクレジットカードによる決済処理であったり、ブロックチェーントランザクションの発行、監視などが主な役割になります。また、言語はGoを使用しています。

FanTopは最近ローンチしたサービスということもあって、使用技術に関しても非常に新しいものを選択しています。新卒で入った身としては、すごく嬉しいポイントです。

NFT発行までのプロセス

次に、FanTopにおけるNFT発行の仕組みについて、各サービスがどのように連携しているのかを説明します。まずFanTopにおけるNFT発行について、Flowブロックチェーンのサービスと、クレジットカード決済を説明します。

そもそもNFTはブロックチェーンに書き込むことによって透明性と信頼性を担保しています。それを踏まえて、FanTopはフルオンチェーンのサービスとして構築しており、UI上でNFTを獲得した際、ブロックチェーン上でも実際にユーザーがNFTを保有した状態になっています。

続いて、決済についてです。通常のNFTマーケットプレイスは仮想通貨取引が主流ですが、仮想通貨を持っていない方でもNFTを手軽に買えるよう、利便性を向上させるためにクレジットカード決済に対応しています。通常のNFTマーケットプレイスに関しては、ブロックチェーン上で仮想通貨を手に入れた報酬として、NFTが発行されます。つまり、ブロックチェーン上で決済とNFTの発行が完結します。一方、クレジットカード決済の場合は、ブロックチェーン上で決済が完結しません。よって、NFTの発行と決済の整合性を担保する仕組みを開発したことが、FanTopにおいて重要なポイントです。

では動画を使ってFanTopでどのようにNFTが発行されているのか紹介します。

「購入する」ボタンを押すと購入リクエストが送られ、リクエスト情報をもとに決済画面に遷移します。そこで、決済情報を入力して決済します。ボックス開封準備中になると、裏側でトランザクションの発行や監視を行って、トランザクションが書き込まれます。正しくトランザクションが処理されると、開封できる状態になります。この時点でユーザーはブロックチェーン上でNFTを保有できていて、UI上においても開封のアニメーションを流すことでNFTが取得できたことを体験・実感することができます。ではこの一連の流れの裏側をさらに詳しく順を追って説明していきます。

まず「購入する」ボタンを押して、クレジットカード決済するまでの部分です。購入リクエストを送ると、APIから決済URLが返ってきます。このURLは決済会社のサイトのもので、遷移した先でクレジットカード情報を入力します。決済が成功すると、仮確定の状態になります。

決済が仮確定になると、ブラウザがFanTopのAPIにNFT発行リクエストを送信します。この時UI上は、ボックス開封準備中で、ぐるぐる回るアニメーションが表示されている状態です。裏側ではAPIが決済会社に決済確認を行います。もし決済が失敗していればユーザーにレスポンスを戻し、正しく決済できていればNFT発行リクエストをFanTopのデータベースに送信します。

この時、データベース上にNFTの在庫がなかった場合には、決済をキャンセルしてユーザーにレスポンスを戻します。この在庫は、先ほどFlowブロックチェーン上のデータのキャッシングについて説明しましたが、そこで見ています。APIは都度処理なので、直接Flowに書き込みは行っていません。Workerがブロックチェーンの監視をプロセスとして常駐する形で、処理が分かれています。

次にデータベースです。NFT発行リクエストが書き込まれると、Workerがリクエストを検知して、必要な情報を元にトランザクションをFlowに対して発行します。そうするとトランザクションが承認待ちになります。

その間もユーザーにはずっと開封準備中のUIが表示されます。この時Workerはトランザクションのイベントを監視して、NFT発行のイベントを探します。トランザクションが確定すると、Workerがトランザクション確定を検知して、NFTが発行されたことをデータベースに記録します。

NFT発行が確定したら、決済も同時に確定させます。裏側ではAPIに対してトランザクションが確定したか確認しており、データベースがNFT発行された状態になったことで、ブラウザ上で「開封する」ボタンが押せるようになります。ユーザーが開封動作を行って、NFT発行できたのをアニメーションを通して実感できます。

1年目の経験

最後に、新卒1年目だったので、苦労話を少し共有してみます。主に3点あって、1つ目はFanTop独自のWorkerとブロックチェーンの兼ね合いを最初、全然分かっていなかったことです。そもそもWeb開発の経験がほとんどなかったので、いきなりWorkerというものが出てきても理解していませんでした。今回の勉強会を通じてWorkerの処理を整理することで、ブロックチェーンとWorkerのビジネス要件を理解できました。

次に、会社でコードを書くということです。自分だけが分かるコードではなく、他の人でも分かるコードを書く必要があるのだと学び、成長できたことが良かったです。

最後にフロントエンドで使用しているReactについてです。Hooksで悩む日々、Stateの更新や無限レンダリングが全然直らないことが多々ありました。最近も悩んでいたのですが、業務は楽しいです。

質疑応答

データベースは何に使用してますか？

ブラウザに表示する画像のパスであったり、ユーザーの情報などをデータベースに格納しています。ブロックチェーンにおいては、オンライン処理では取り出せないものもあるので、データベースを介しています。

IPFSではピン留め（保存する命令）を続けないとキャッシュアウトされませんか？

IPFSにはハッシュ値しか記録していません。ご指摘の通りIPFSは永続的なデータベースではないので、ピン留めし続けないといつか消えてしまいます。現段階においては、ユーザーに自分の持っているNFTの画像を保存してもらう必要があります。その画像の持ち主であることはハッシュ値をチェックすることで確認できますが、その画像自体をずっと提供し続けるというのは、現時点ではサービスのスコープ外になります。