FanTopのフロントエンド開発 − ブロックチェーンを考慮した開発について

NFTマーケットプレイスであるFanTopでは、パブリックチェーンのFlowを採用しており、一般的なフロント開発に加えてブロックチェーンの性質を考慮した開発が必要となります。今回は、そのようなFantopのフロント開発全般の概要と認証周り等について解説します。

登壇者紹介

安村亮祐

新卒入社2年目。1年目は、FanTopのフロントエンドの開発に携わる。現在はバックエンドと管理画面の開発に従事し、幅広い分野に挑戦・勉強中。

FanTopについて

まずFanTopのサービス概要について紹介します。FanTopはブロックチェーンをベースとした、NFTのマーケットプレイスです。主な特徴は3つあります。

NFTに馴染みのないユーザー層を対象としている

一般的なNFT取引所のような仮想通貨決済ではなく、法定通貨による決済を採用しています。

ビューアアプリ

ビューアアプリでは上の画像にあるように、自分の持っているNFTをAR機能を用いて現実空間上に表示して、写真を撮って楽しんだりできます。また、3Dルーム機能を用いて、自分の持っているNFTを3Dルーム内に飾って楽しんだりできます。

NFTデジタル特典

紙の書籍にNFTの引き換えコード（16桁）を付けて販売し、購入したユーザーはFanTop内でコードを入力することで、手数料なしでNFTを取得できます。

Flowについて

FanTopで採用しているブロックチェーンであるFlowについて紹介します。Flowの特徴は主に2つ。

1つ目はスケーラブルであるということです。NBA Top ShotというNFT化されたバスケットボール選手のハイライトシーンを売買できるサイトでは累計150万ユーザー、2,000万トランザクションを捌いた実績があります。ここでいうトランザクションとは、ブロックチェーンにデータを書き込む処理のことを指します。ここから先もそういった意味で捉えてください。

2つ目は他のブロックチェーンと比べてガス代（トランザクション実行手数料）が安いという点です。代表的なブロックチェーンであるEthereumのガス代が数千円程度かかるのに対して、Flowは約0.02円と非常に安価になっています。FanTopではNFTデジタル特典で多くのユーザーに対してガス代を無料でNFTを配布する必要がありますので、ガス代を運営側で支払うことが可能な額であると言った点からもFlowを採用しています。

開発環境としてはCadence言語という独自の言語が提供されています。このCadence言語を使ってスマートコントラクト（NFTの取引ルール）を記述したり、トランザクション処理を記述しています。また、FCL（Flow Client Library）というJavaScriptライブラリも提供されており、これを使ってWebアプリでウォレットやFlowの対話などが可能になります。

BloctoではFlowに紐付いている秘密鍵を管理しています。秘密鍵を管理している理由は、ブロックチェーンでは秘密鍵による署名によってアカウントの所有者であることを証明する仕組みになっているからです。その大切な秘密鍵を管理するのがウォレットであるBloctoの役割になります。
Bloctoの使用方法としては、先ほどのFCLを用いてiframe内にウォレットを表示して使用する方式をとっています。このウォレット内でメール認証によるBloctoへのサインインを行うことで、トランザクションや任意のメッセージへの署名が可能になります。

FanTopのフロントエンド開発について

FanTopの開発は2021年3月頃からはじまり、初期の課題としては3つありました。

新規事業である
社内実績のない分野の開発
NFTという一般ユーザーに分かりにくい商品を扱う

新規事業であるということから、競合他社がいる状況でサービス開発やリリースの速さが非常に重要でした。また、開発のテーマとしてNFTやブロックチェーンを分かりやすく伝えるデザインやUXが必要であるといったテーマがありました。

今回はこの開発テーマをベースに技術スタック、コンポーネント設計、デザインUI/UXという3つの観点でFanTopのフロントエンド開発の概要についてお話します。

技術スタックについて

FanTopでは開発言語にTypeScriptを採用しています。ライブラリにReact、デザイン周りはstyled-components、後はFlowやウォレットとの対話にFCLを使用しています。フレームワークはNext.jsを使用しています。

これらの技術は社内で実績のある技術という点が評価されて採用されています。これによって初期の学習コストや導入コストを限りなく小さくして、ブロックチェーンにかかる開発にリソースを割けるようになり、開発速度が向上しました。

コンポーネント設計について

こちらの図はディレクトリとそのフォルダの関係性を表したものになります。開発初期段階におけるコンポーネント設計の方針としては、一番上にある /pages の中にある各ページのファイルの中にUI・ロジックを集約させていることが挙げられます。これは開発の初期段階においては仕様変更によるデザインやロジックの影響範囲が大きいということで、その影響範囲を限定させるという意図になります。これによって修正箇所が明確になって、開発効率が向上したと考えています。

一方で、これはあくまでも開発の初期方針であり、現在は共通コンポーネントの切り出しであったり、リファクタリングを進めている段階になっています。

デザイン・UI/UXについて

FanTopのようなサービスにおいてブロックチェーンを採用するデメリットは主に2つあると考えられます。

1つ目はトランザクション実行に時間を要するということです。これはブロックチェーンが分散型台帳なので、各ノードでブロックの整合性をチェックすることに時間を要するのが原因になります。Flowでは数十秒から1分程度の待ち時間が発生するという問題があります。一般的にユーザーが待てる時間は3秒程度と言われており、それ以上になるとユーザーの離脱につながるなどの問題がありますが、このFlowの待ち時間はWebサービスにとって致命的な問題となっています。

2つ目は、ブロックチェーン自体が一般ユーザーにとって分かりにくい技術である点です。よく分からないものに対する不安などからサービスの利用や継続に悪影響を及ぼしてしまうデメリットがあります。

こういった中でFanTopは他のサービスと比べてデザインやUI/UXが非常に重要になってきます。今回、上記のような背景がある中でブロックチェーンの性質である分かりづらさやリアルタイム性に欠けるといった点を考慮したデザイン・UI/UXを2つの視点から説明します。

ブロックチェーンに馴染みのないユーザー・詳しいユーザー両者を対象に

FanTopではNFTやブロックチェーンに馴染みのないユーザーや、逆に詳しいユーザーの両者を想定した設計を重視しています。幾つか例がありますが、今回は3つ紹介します。

法定通貨を利用している
トランザクション処理中のアニメーション
トランザクションの実行履歴を確認できる

1つ目は仮想通貨ではなく、法定通貨を決済に利用している点です。これによってNFTを購入するために仮想通貨を用意する必要がないので、購入のハードルを下げられています。

2つ目がトランザクション処理中のアニメーションです。下記の動画はNFTを購入した後、ブロックチェーンへの書き込み、変更履歴を書き込んでいる様子なのですが、アニメーションを追加することによってブロックチェーンが分からない方にとっても直感的に書き込まれていることを表現するような工夫をしています。

3つ目にトランザクションの実行履歴を確認できるようにしています。左下に表示している画像がFanTopのNFT取引履歴の一覧を一部を切り取ったものになります。ここにはFlowのアイコンが表示されており、これをクリックするとFlowscanと呼ばれるFlow上のトランザクション履歴を閲覧できるサイトに飛ぶようになっています。

ここで、その取引のトランザクションIDであったり、誰から誰にNFTが渡ったかの履歴をチェックできます。こういったFlowscanへのリンクをFanTopの随所に表示しています。これにより、NFTに詳しいユーザーの方にとってもちゃんとオンチェーンに書き込んでいることを伝えて安心感を与えられる設計になっています。

トランザクションの待ち時間を考慮した設計

今回は新規登録フローを例に挙げて説明します。上の図はFanTopの新規登録フローの流れになります。青の背景がBlocto側の処理、赤の背景がFanTop側の処理となっています。

上側の従来の処理では、シーケンシャルな処理になっていました。そのため、前の処理が終わるまでは次の処理を行えないような設計になっています。そうした中で、中央の赤字で書いてある保管庫（FanTopのNFTを保管するためのFlow上の領域）を作成する処理がトランザクション処理になります。この処理がボトルネックになってしまってUXの低下や離脱の要因を招いていました。

現在はすべての処理を1ページに集約させるような設計としています。この処理の中で、保管庫の作成とFanTop側のアカウント登録を並列処理にしています。並列化したことで、保管庫を作成している間にFanTopのアカウント登録、例えばユーザーIDや誕生日などの入力を行えるようにしました。これにより、待ち時間の大幅な短縮と、ブロックチェーンを意識させないような設計を実現しています。