【DeNATechCon2024】NFTリテラシー検定の裏側と苦労話

NFTリテラシー検定の裏側と苦労話 Web2チームがWeb3に挑んだ軌跡 フリップ芸⼈並の速度で振り返る © DeNA Co., Ltd.

⾃⼰紹介 ten3 web3チームの⼈ 2022/09にDeNAにやってきて、PickfiveやPlayback9の開発 チームに参加したことをかわきりにweb3案件に関わり始めた ⼈。 DeNAのpublic chainでのリリース第⼀弾となるNFTリテラシー 検定の開発を中⼼に、web3チームのグループリーダー（お飾 り）を⾏っている⼈。 特技：みんなに助けてもらう。（他⼒本願） 特徴：髪の⾊が変わります。 本⽇のten3: フリップ芸⼈ © DeNA Co., Ltd. 2

やってきたこと マスタリングイー サリアム勉強会 （部内）始まる 突如NFTリテラ シー検定開発の リーダーになる 2022/12 2022/09 Pickfiveの開発に関 わる © DeNA Co., Ltd. NFTリテラシー検 定の開発に参加 NFTリテラシー検 定リリース（今度 こそ本当に） 2023/08 2023/04 2023/06 2023/02 2022/10 中途採⽤で⼊社 ETHGlobal Waterlooにも出る ETHGlobal Tokyo に出場 2024/10 NFTリテラシー検 定リリースして、 すぐにメンテに⼊ る 3

本⽇のお話 ● ● ● ● ● ● ● ● ● ● ● © DeNA Co., Ltd. NFTリテラシー検定とは NFTリテラシー検定の成り⽴ち Web2エンジニアがPublic Chainに挑むまで お⾦(暗号資産)の管理どうしよう？ あれれ？Frontendエンジニアいなくね？ Testnetのはずなのにお⾦(ETH)が⾜りないです これ⾯⽩くなくね？⼤改修！ デプロイしようとしたら３万円かかりますよ！ 3000円払って無料でNFTゲットしてね！ ２度⽬の⼤改修！MetaTxもX(旧Twitter)連携も⼊れちまえ！ そのほか⾊々語りたいことは多い 4

NFTリテラシー検定とは NFTのことをe-learningしてNFTをミントする！そんなサイトです！ 詳しくなれてNFTもゲット！なんて素敵なサイト！ 使ってみてね！ 詳しくはブースで！遊びにきてね！ © DeNA Co., Ltd. 5

NFTリテラシー検定の成り⽴ち © DeNA Co., Ltd. 6

NFTリテラシー検定の成り⽴ち DeNAではNFTを使ったサービスが3つほどありました。 Playback9 / Pickfive / NFTコレクション どれもLine NFT（現在のDOSI）を使ったサービスです！ © DeNA Co., Ltd. 7

NFTリテラシー検定の成り⽴ち Blockchain事業を本格的に検討していくにあたり、クローズドなLine BlockchainだけではなくEthereumなどのパブリックなBlockchainでの技術 やノウハウを検討する必要がある。 何かパブリックなBlockchainでできないか？ そんな検討から始まりNFTリテラシー検定のプロジェクトは始まりました。 © DeNA Co., Ltd. 8

我々は知らなかった こんなに多くの困難に向き合うことになろうとは。。。 © DeNA Co., Ltd. 9

Web2エンジニアが パブリックチェーンに挑むまで © DeNA Co., Ltd. 10

Web2エンジニアがパブリックチェーンに挑むまで パブリックチェーンでのサービスを検討するにあたり、今後スマートコントラク トをデプロイしNFTだけにとどまらず分散型のアプリケーション(DApps)を構築‧ 運⽤するノウハウを獲得していく必要があった。 幸いなことにチームの中に有識者(去年登壇した彼です）はいたが、⼀⼈だけ知識 を持っていてもチームとしては機能しません。 © DeNA Co., Ltd. 11

勉強会！ そこで、我々のチームはEthereumとスマートコントラクトに関しての知識を獲得するために勉強 会を始めることにしました。 お題は以下の2つ ● ● © DeNA Co., Ltd. EthereumのWhite paper ○ https://ethereum.org/ja/whitepaper Mastering Ethereum ○ https://www.oreilly.co.jp/books/9784873118963/ ○ オライリーさんから出版されているやつ 12

• https://ethereum.org/ja/whitepaper
• https://www.oreilly.co.jp/books/9784873118963/

特急で勉強会 プロジェクトとしても動かないといけないので急いでやりました！ ● ● ● ● ● © DeNA Co., Ltd. 週２回 1時間 参加⼈数8〜12⼈ほど（リテラシー検定チーム以外も参加） 当番制 ○ 当番は希望者で構成（6⼈だったかな？） ○ 当番の⼈は指定された範囲を予習して内容をまとめる ○ まとめた内容を1時間で発表 ○ 範囲は１章分、または内容が多い場合は前後半で担当者を分ける。 ○ １時間で１担当分を進⾏ 約２ヶ⽉で完了 13

苦労ポイント ● 週２回だったので2週間経つと⾃分の当番がくる！ ● 当時担当していた開発案件と並⾏で読書とまとめの作成を⾏う必要があ る。 ● 楕円曲線の回とか、読んだだけだと説明できないから追加で勉強しない と理解できない。 © DeNA Co., Ltd. 14

やってよかったポイント ● 体系的に学べた ● サンプル問題などもあってローカルでスマートコントラクトを動かして みれる ● スマートコントラクトのセキュリティ問題など、DApps固有の考え⽅ ● そもそも勉強会が楽しい ● チームビルディング © DeNA Co., Ltd. 15

お⾦(暗号資産)の管理どうしよう？ © DeNA Co., Ltd. 16

お⾦（暗号資産）の管理どうしよう？ NFTリテラシー検定では仮想通貨でユーザーから売り上げを上げる仕組みはありません が、運営上で暗号資産を利⽤しなけらばならないシーンが存在します。 それが © DeNA Co., Ltd. 17

ガス代 © DeNA Co., Ltd. 18

何をするにもガス代 Ethereum上にあるスマートコントラクトを操作する際に⼿数料のような形でガス代を ⽀払いが必要になります。 具体的には ● ● スマートコントラクトのデプロイ スマートコントラクトの設定値変更（Write系の操作） です。 ユーザー視点だと、NFTの発⾏(Mint)もWrite系の操作なのでガス代がかかりますが、 運⽤という視点だとテスト時にガス代がかかるともいえます。 © DeNA Co., Ltd. 19

なぜ暗号資産を管理する必要があるのか？ プロジェクト内で発⽣する費⽤を会社のお⾦で払う必要があるからです。 デプロイしたり、スマートコントラクトの設定値を変更したりなどプロジェクトに関わる作 業にお⾦がかかるのです。 これらはプロジェクトの費⽤なので当然会社のお⾦です。 会社のお⾦ということは決裁者の承認が必要ということです。 © DeNA Co., Ltd. 20

NFTリテラシー検定の暗号資産決済フロー 実⾏者 エンジニア トランザクション 内容のレビュー PJ責任者 ⽬的のレビュー 決裁者 ⾦額の決裁 これらを経て、Ethereumにトランザクションを実⾏します。 実⾏フローはDouble Jump TokyoさんのNSuiteで現在は運⽤しています。 © DeNA Co., Ltd. 21

苦労ポイント ● 普段リリースに関わらないような⼈（決裁者）なんかも巻き込む ● リリースなどの活動がフローによっては慎重になりがち ● 緊急時とかslackでメンション投げまくり © DeNA Co., Ltd. 22

やってよかったポイント ● そもそもスマートコントラクトはデプロイしたら取り下げれないから慎 重くらいでいい ● ⼀定のフローに準拠してサービスの運⽤費⽤として決済できるように なった。 ● 暗号資産の利⽤⽤途について相互チェックが⾏える。 © DeNA Co., Ltd. 23

あれれ？Frontendエンジニアいなくね？ © DeNA Co., Ltd. 24

NFTリテラシー検定の技術スタック FrontEnd ServerSide ⾔語 ● ⾔語 ● TypeScript go フレームワーク ● Next.js フレームワーク ● gin 主な利⽤ライブラリ ● RainbowKit ● wagmi ● siwe ● Sentry 主な利⽤ライブラリ ● go-ethereum ● siwe-go © DeNA Co., Ltd. SmartContract ⾔語 ● solidity 主な利⽤ライブラリ ● circom ● openzeppelin ● snarkjs ● hardhat ● Foundry ● mythril 利⽤したSaaS ● GCP ○ Spanner ○ CloudRun ○ Cloud Storage ○ Secret Manager ○ Cloud Armor ○ Looker ● Alchemy ● WalletConnect ● OpenZeppelin Defender 25

だがFrontend専⾨家がいない Smart Contract書いたことある経験者はいる！ ⻑年サーバーサイドを書いてきたベテランエンジニアもいる！ 他のサービスでGCPを使ったサービス構成経験もある！ だが。。。。。 Frontendをメインにやってきたエンジニアがいない © DeNA Co., Ltd. 26

Web3領域でもFrontendエンジニアは重要 Smart ContractをBlockchain上で動かすことによって分散型アプリケーショ ン(DApps)の根幹の部分は動作している。 Smart Contractにアクセスするクライアントアプリケーションが必要とな る。 DAppsを突き詰めた場合サーバーサイドはSmart Contractに置き換えること はできる！（かもしれない）が、クライアントアプリケーションはなんらか の形で必要になる。 でも、いない！ © DeNA Co., Ltd. 27

いないなら © DeNA Co., Ltd. 28

俺がやる！ © DeNA Co., Ltd. 29

華麗に転⾝！クライアントエンジニア ⻑年、サーバサイドしか書いてこなかったエンジニア(ten3)が華麗に転⾝！ 初めてのTypeScript！ 初めてのNext.js！ 初めてのDApps！ Reactって何！？ © DeNA Co., Ltd. 30

転⾝するためにやったこと ● ● ● ● ● © DeNA Co., Ltd. Next.jsのチュートリアル→最低限画⾯作れる！ RainbowKitを使ってWallet繋いでみる→DApps⼊⾨！ api通信書いてみる→クライアント/サーバーな構成⼊⾨！ やってみたことをまとめてチーム内勉強会で発表→学習の定着！ 助けてアピール→チーム全体で作り上げる！ 31

苦労ポイント ● ● ● ● © DeNA Co., Ltd. 学習しながらプロダクションレベルのアプリケーション構築が⼤変 ライブラリの知識がないので適切なものを探しきれない Reactiveプログラミングなどクライアント独特の世界観 Web3プログラムでは⾃社の世界観とパブリック（DApps)の世界観をク ライアントが結びつける 32

やってよかったポイント ● ● ● ● ● © DeNA Co., Ltd. チームに（エセ）クライアントエンジニア誕⽣ 初めてや、解らないことに対してのハードルが下がった チーム全体がフォローしてくれるようになった DApps感を⼀番感じれるポジション（だと思っている）を担当 結局、⾃分⼀⼈ではなく、みんながクライアントをやるようになった ○ チームの担当範囲のボーダレス化 33

Testnetのはずなのにお⾦(ETH)が⾜りないです © DeNA Co., Ltd. 34

Testnetの暗号資産 ご存知の通り、Blockchainでの開発には暗号資産での⽀払いが随所にかかります。 ● ● 開発中のスマートコントラクトのデプロイ ガス代 ○ スマートコントラクトの機能確認 ■ NFTリテラシー検定ではないが、暗号資産を預け⼊れたりするようなプログラムもかけ る しかし、これらを開発段階で使っていたらお⾦がいくらあっても⾜りないのでTestnetと呼ばれるstaging 環境のようなBlockchain上で開発を⾏います。 testnet上での暗号資産はFaucetと呼ばれる蛇⼝から制限付きではあるもののテストに必要な分を取得す るスマートコントラクトが存在します。 もちろん、NFTリテラシー検定でもFaucetを利⽤してテスト⽤の暗号資産を⼊⼿してテストを⾏っていま した。 © DeNA Co., Ltd. 35

しかし © DeNA Co., Ltd. 36

ある⽇ © DeNA Co., Ltd. 37

Faucetから取得できるETHが © DeNA Co., Ltd. 38

1/10に！！ 0.2ETH -> 0.02ETH © DeNA Co., Ltd. 39

Goerli -> Sepolia へのtestnet移⾏ NFTリテラシー検定は初期段階ではEthereumのmainnetをターゲットとしてローンチ予定でした。 その為、開発段階ではEthereumのGoerli testnetで開発を進めていましたが、Sepolia testnetへの移⾏が 開始されました。 これに伴いGoerli testnetのfaucetから引き出せるGoerli ETHの量が0.2から0.02に引き下げられ、さらに faucetの利⽤に対して0.001 ETH(mainnet側）を持っている必要がある制限が加えられました。 © DeNA Co., Ltd. 40

Goerli ETH供給量低下の影響 幸い、Goerli上で開発する上で⼤きな影響はなかった ● ● Gas代は毎⽇数⼈でちょっとずつ集める Deployや簡単なテストを⾏う分には0.02でも基本的には⾜りた 発⽣した問題が顕在化した部分としては ● © DeNA Co., Ltd. QA担当者などETHを保持していないメンバーがFaucetから⾃分で引き出せないので開発者な どがGoerli ETHを送⾦する必要があった 41

なぜSepolia移⾏をすぐできなかったか？ NFTリテラシー検定はOpenSea側で各ユーザーが実際に獲得したNFTを確認してもらうように設計されて いた。 しかし、OpenSea側がSepolia testnetに当時対応していなかったため通しでのUI確認を⾏う場合、Goerli testnetを使う必要があった。 そのため、すぐにSepoliaに移⾏する選択が取れずにGoerli ETHをみんなでかき集める戦いが⾏われたの である。 © DeNA Co., Ltd. 42

苦労ポイント ● Testnetの移⾏に伴いテスト⽤の暗号資産が使えなくなることがある。 ● 連携先の対応状況は異なる ● 頑張ってかき集めた © DeNA Co., Ltd. 43

やってよかったポイント ● 結果なんとかなった！ ● みんなの連帯感すごい！ © DeNA Co., Ltd. 44

これ⾯⽩くなくね？⼤改修！ © DeNA Co., Ltd. 45

技術的な話ではなく NFTリテラシー検定は誤解を恐れずにいえばe-learningです。 ユーザーの皆様に最終的にこうなってほしいというサービスが提供するゴー ルとしては ● NFTに関わる基礎知識を獲得していただく ● 実際にMetamaskなどのWalletを利⽤する体験 ● 合格証としてNFTをmintする体験 NFTリテラシー検定を通してこれらの体験をしていただくことが⽬的です。 © DeNA Co., Ltd. 46

旧NFTリテラシー検定 元々のリテラシー検定は学習とテストという形で、問題は学習した結果しっかり覚えていますよ！ というのを確認するような構成でした。 ⼤雑把な流れとしては以下のような感じで、いわゆる暗記を要求するものです。 テキストを読んで 学習 © DeNA Co., Ltd. 頑張って覚える 記憶を頼りにテス トを解く 47

テキスト読んでいるだけだと⾯⽩くない しかし、このやり⽅だとテキストを⻑々と読んでいる時間が多く、極めてモチベーションが ⾼くないとテキストを読み⾶ばしてしまいがちです。 その弊害として、問題をいきなり解き始めて適当な解答を繰り返すだけになるのではない か？ とても⾯⽩くないe-learningサイトとなってしまうのではないか？とチーム全体で懸念とな りました。 © DeNA Co., Ltd. 48

学習するときはわからないところを⾒返す そこで、この学習サイクルを細かいものにしつつ、現在学習しているものにフォーカスして理解するために、テキストパー トとテストパートを⼀体化させ、細かく確認しながら学習するような現在の形に変更しました。 テキストを読 んで学習 理解度チェッ ク わからなかっ たら戻って確 認 © DeNA Co., Ltd. テキストを読 んで学習 理解度チェッ ク わからなかっ たら戻って確 認 49

苦労ポイント ● 学習効果はしっかりある形にしたい ● データ構造を⼤幅変更 ● ページング処理の⾒直しなどFrontendも⼤改修 © DeNA Co., Ltd. 50

やってよかったポイント ● チーム内の体感でもコンテンツ内容がみやすくなった ● 問題集全体のUIが⾒直されて⾒栄えも良くなった ● サービスに対してしっかり向き合うチーム © DeNA Co., Ltd. 51

デプロイしようとしたら ３万円かかりますよ！ © DeNA Co., Ltd. 52

Smart Contractのデプロイにはガス代がかかる 開発も進み、本番環境を構築しリリース準備 NFTのSmart ContractをEthereumのmainnetにデプロイしようとした時に思 い知らされることとなりました。 デプロイには費⽤がかかる！ BlockchainのWrite系のアクションにガス代がかかることはわかっていまし た。 © DeNA Co., Ltd. 53

わかったつもりでした © DeNA Co., Ltd. 54

現実として受け⽌めるタイミング なぜtestnetも使って開発をしていたにも関わらず、本番へのデプロイにかか る費⽤を意識できていなかったのか？ それは、faucetで⼊⼿したtestnet⽤の暗号資産を消費しているだけでは、ガ ス代を⽇本円と結びつけきれていなかったためです。 そのため、実際にETHを消費してデプロイをしようとした際に⽇本円でかか る値段を意識することになったのです。 © DeNA Co., Ltd. 55

その費⽤、約３万円 © DeNA Co., Ltd. 56

事前に把握する⽅法 事前にかかる費⽤をある程度把握することは可能です。 いざ実際に対応しようとしてビックリしないためにも事前計算しましょう。 © DeNA Co., Ltd. 57

testnetにデプロイした時のガス費⽤ ここに注⽬ Gas Limit & Usage By Txnの実際の消費が3,936,621かかっています。 これはデプロイに必要なガスの量なのでmainnetでもほぼ変わらない © DeNA Co., Ltd. 58

本番デプロイにかかったガス代 ここが⼤きく違う Usage × Gas Price = かかるから費⽤(ETH) ETHを⽇本円のレートにすると3万円超！！！ © DeNA Co., Ltd. 59

苦労ポイント ● 実際の⾦額を⽬の当たりにするとビックリ！ ● 運⽤費をちゃんと⾒積もれていなかった ● なんらかの理由で更新しないといけないと再び費⽤がかかるぞ！ © DeNA Co., Ltd. 60

やってよかったポイント ● Gas PriceやGas unitについて敏感になった ● Blockchainを使ったアプリケーションの運⽤費のかかり⽅の違いを体感 ● Gas Optimization(処理の最適化）について考える機会を得た © DeNA Co., Ltd. 61

3000円払って無料でNFTゲットしてね！ © DeNA Co., Ltd. 62

またもガス代の問題 NFTリテラシー検定は検定を終了した後にユーザー⾃⾝が合格を証明するNFTをミントする体験がある。 しかし、NFTのミントはスマートコントラクトへのWrite系のトランザクションなので当然ガス代がかか る。 NFTリテラシー検定の合格証⾃体は無料ではあるのだが、ガス代は有料 © DeNA Co., Ltd. 63

普通のNFTよりミントにかかるガス代は⾼い さらに、NFTリテラシー検定の問題を全問正解したことを証明するためにZero-Knowladge Proof (zkp / ゼロ知識証明)を利⽤しており、その検証するための処理があるため通常のミントするだけのNFTコントラ クトに⽐べて処理が多い。 これはガス代が通常のミントに⽐べて⾼額になることを意味する。 © DeNA Co., Ltd. 64

その差、約2.5倍 © DeNA Co., Ltd. 65

ユーザーの反応 当然のように「ミント費⽤⾼いよー」という声が上がる。 © DeNA Co., Ltd. 66

そして。。。 © DeNA Co., Ltd. 67

わずか５⽇間でメンテナンスに突⼊ © DeNA Co., Ltd. 68

メンテナンス後の対応 再開に向けての対応の検討 ● ● ● © DeNA Co., Ltd. zkpとNFTミントにかかるガス代の調査 ガス代対策 ○ 処理の最適化の検討 ○ ガス代が安いL2のチェーンへの移⾏検討 ⾼いガス代払ってくれた⽅達への払い戻し 69

苦労ポイント ● デプロイの時と共通だがガス⾒積もりしてないとユーザーにも影響があ る ● 払い戻し作業を⾏った © DeNA Co., Ltd. 70

やってよかったポイント ● ユーザーの反応に向かい合えた ● 現在のNFTリテラシー検定の形になるための全てが出揃った © DeNA Co., Ltd. 71

２度⽬の⼤改修！ MetaTxもX(旧Twitter)連携も⼊れちまえ！ © DeNA Co., Ltd. 72

ユーザー負担のガス代軽減作戦 ユーザー負担のガス代が⾼かったからメンテナンスに⼊れて、その後の⽅針を検討しました。 当初案としてはEVMの互換性があるPolygon PoSならデプロイ先を変えるだけですぐに再開できる⾒通しで動き始めまし た。 Polygon PoSへのデプロイは本当に簡単で、デプロイ先やbuildの設定を少し変えるだけですぐにできました。 © DeNA Co., Ltd. 73

それだけで終わらないのが NFTリテラシー検定 © DeNA Co., Ltd. 74

どうせやるなら！ © DeNA Co., Ltd. 75

ガス代はDeNAが負担！ © DeNA Co., Ltd. 76

ガス代をDeNAが負担する⽅法 ガス代はTransaction発⾏者が負担するものですが、MetaTx(メタトランザクション）と呼ばれるユーザーが発⾏するトラ ンザクションを別のトランザクションに内包して送信するための規格があります。 © DeNA Co., Ltd. 77

© DeNA Co., Ltd. 78

ざっくりとMetaTxとは 1. 2. 3. 4. 5. ユーザーが送りたいリクエストに署名する(ERC-712) ユーザーが署名したリクエストを内包したトランザクションを作成する 署名つきトランザクションを検証する 署名つきトランザクションを内包したトランザクションを発⾏する 署名つきトランザクションを取り出して処理する みたいなことをやっています。 詳しくはエンジニアブログ⾒てね！ https://engineering.dena.com/blog/2024/01/nft_literacy/ © DeNA Co., Ltd. 79

• https://engineering.dena.com/blog/2024/01/nft_literacy/

さらにX(旧Twitter)連携 NFTリテラシー検定では合格証を獲得したユーザーの⽅にオリジナルNFTのAirDrop(配布)企画を⾏う予定がありました。 （既に実施済み） その際に、⼀定のアクティブな⼈間のアカウントであることを確認したくX(旧Twitter)のアカウントとNFTリテラシー検定 で利⽤しているEOAを結びつけたいためXのアカウント連携機能もつけることにしました！ ですが、知っての通りX(旧Twitter)のapiは現在v2に移⾏中で若⼲混沌としています。 ドキュメントも絶賛アップデートされている最中で、エラーコード等が全て明記されているわけではなく。。。 若⼲⼿探りながら実装を進めていくことになりました。 © DeNA Co., Ltd. 80

そんな追加実装を乗り越えて © DeNA Co., Ltd. 81

2023/10/25 無事にメンテナンス終了！ © DeNA Co., Ltd. 82

苦労ポイント ● 想定していなかったMetaTxの実装のために追加で勉強！ ● Openzeppelin DefenderなどのSaaSの導⼊ ● X(旧Twitter)連携も合わせて、サービス再開したいが追加機能もモリモリ © DeNA Co., Ltd. 83

やってよかったポイント ● ● ● ● © DeNA Co., Ltd. ユーザーのガス代負担をなくすことができた ERC2771やERC712などのMetaTxに関わるノウハウを会得できた X(旧Twitter)のapiの現状が⾒えた 今回もチームメンバーのサポートが最⾼！ 84

その他⾊々語りたいことは多い © DeNA Co., Ltd. 85

とても15分では語りきれない その他⾊々な困難があってとてもtechconの⾃分の持ち時間では語りきれないので、ざっとタイトルだけ紹介！ ● ● ● ● © DeNA Co., Ltd. openseaのtransferの仕様変更でプログラムの考慮漏れに気づいた ○ 開発途中で譲渡不可の仕様に⽳があった ○ Transferの処理が２系統あったが両⽅は塞げていなかった ○ openseaの仕様変更のおかげで気づけた ライブラリのバージョンアップが⽌まらない ○ Web3分野のライブラリのアップデート速度すごい ○ マイナーバージョン‧メジャーバージョンガンガン上がる testnetで⾒えちゃうよ(NFT) ○ 仮データは気を付ける ○ IPものやる時は気をつけようね ○ testnet含めてpublicな世界！ mintしないとopenseaのコレクションページ ○ openseaのページも拘りたい ○ だが、mintするまで設定変更できない 86

もっと話を聞きたい⼈は ブースにも遊びにきてね！ © DeNA Co., Ltd. 87

ご清聴ありがとうございました！ © DeNA Co., Ltd. 88