俺たちは雰囲気でWeb3を語っている
先日こちらの記事を書いたのですが、今回はWeb3の個人の感想とThirdwebイーサリアム版の実装方法を記述します。
Web3とは？
Web3の名付け親
Web3.0の用語は、Polkadot創設者のDr. Gavin Woodが名付け親です。ギャビンはビタリック、チャールズ・ホスキンソンと共にイーサリアムを開発したエンジニアとしても有名です。チャールズは現在はCardanoを立ち上げてます。本当にすごいメンバーで開発してたのですね。
技術屋目線のざっくり分析
Web2ではAjaxとjQueryが革命的技術であり、非同期通信、DOMの部分更新が容易になり、クラサバ業務システムのWebへのリプレースが加速した印象があります。
Web3では公開鍵暗号の署名&ハッシュ値&コンセンサス・アルゴリズムが特定の管理者を持たない(trustless)トランザクション処理を可能にし、またブロックチェーンのデータを公開鍵暗号のキーと紐づけることで所有の概念を提供しています。これはメタバースやNFTなどで必要になる機能であると期待されています。
Web3を語る上で技術的なことだけでなくアメリカ社会、金融も知っておくと視野が広がり、色々と謎が解けます。それでは３つの異なる視点でWeb3を見てみていきましょう。
視点1 - Web3とWeb2は共存する
本家のギャビンのWeb3の定義はtrustless(特定の管理者を持たないこと)であるため、その定義上、GAFAMとWeb3は相容れない存在になります。しかしながら、今のインターネットはGAFAMの時価総額は膨大であり、ギャビンの理想とするWeb3の世界とは真逆の方向に進んでいます。
とは言うものの、今のGAFAMに抗うのはダビデとゴリアテの美談というより、ドン・キホーテの喜劇といったところです。ギャビンもいきなりWeb3に移行するわけではなく、権威への依存を少しづつ減らしていければ良いとも言っています。
C++がCのエンハンスであったように、Web3はWeb2をリプレースするものではなく、Web2をエンハンス、アドオンするWeb2++的なものと捉えた方がしっくりくるし、より現実的な解釈になります。
スマートコントラクトはデータベースの状態を更新するストアードプロシージャのようなものです。UIや機械学習の実装はできませんし、CPUをヘビーに使えばガス代が高額になります。ReactJS、PyTorchなどの今現在使われている技術や、AWS、Vercel、Kubernetes、BigQueryなどの巨大IT企業の低コストのクラウド・サービスは民間企業には不可欠です。
今年(2023)にはアップルからARゴーグルがリリースされるとの噂もあります。マイクロソフトのOpenAI(ChatGPT)への１兆円規模の出資など、メタバースやAIもGAFAMの支配下になる可能性が高いです。
Web3が適用できる分野が金融とソーシャルメディアぐらいしかないこともあります。それ以外の市場の方が圧倒的に大きいわけです。NetflixのストレンジャーシングスやAmazonの物流システムをWeb3で実現することは難しいでしょう。
ハイブリッドコードを雰囲気で書く
さてガラリと話を変えて、Web2とWeb3のハイブリッドなコードをNext.jsで書くとすれば次のような感じになります。例えば、ブロックチェーンから記事を取得して、ChatGPTで記事を要約する場合は次のようになります。
const MyApp: NextPage = () => {
const {post} = useSmartContract() // スマコンから記事を取得
const {postSummary} = useOpenApi(post) // ChatGPTで要約
return <>...</>
}
視点2 - アメリカ社会の複雑さ
Web3の解説では必ずGAFAMが悪の組織のように描写され、データの個人所有や透明性が強調されます。そもそもなぜそれほどまでに欧米はプライバシーを重視するのでしょうか？
それにはアメリカで起きた事件とその歴史的な背景を知る必要があります。
2013年に起きたエドワード・スノーデン事件は、ギャビンの思想に大きな影響を与えています。
911のテロ以降、アメリカ国民の行動が国家とそれに協力した巨大企業によって監視されていた事実は、米国民に大きな衝撃を与えました。ギャビン自身はイギリス人ですが、スノーデンとの対談などで監視社会の恐ろしさを語っています。
アメリカの事情
イギリスのコンサル企業ケンブリッジ・アナリティカ社がフェースブックの個人情報を利用して、トランプvsヒラリーの大統領選やイギリスのEU離脱で広告ターゲティングした事件があります。特にマークザッカーバーグはこの事件以降メディアに叩かれ悪のヒーロー(villain)のような存在になってしまいました。FBの株価も低迷しています。
イーロン・マスクのTwitter買収は、言論の自由を守りたいイーロンの強い意思からです。トランプのアカウントを復活させたり、Twitter社がバイデン政権に有利な情報操作を行なっていたとTwitterファイルで暴露しています。イーロン自体はWeb3はバズワードであると否定的です。仮想通貨に関してはビットコインやドージコインなど購入しており好意的ではあります。
ジョージ・オーウェルの伝説的な小説１９８４のビックブラザーの存在。それを元にしたアップルの伝説的なテレビCMなどアメリカ人にとっての監視社会を知る上で重要な教材です。有名ユーチューバのLexもつい先日、熱く語っています。
2000年前後のトランプ政権の時代に米中の対立が悪化し、ファーウェイやTikTokなどの中国系企業がアメリカ人の個人情報を不適切に収集しているとの批判やTikTok禁止法案、コロナ禍で中国がスマフォで国民の行動を管理した事実もあります。
AWSはアメリカの米国防総省(DoD,ペンタゴン)で使用されています。また、ペンタゴンの1兆円規模の新システム(JWCC,旧JEDI)をAWS、Microsoft、Oracle、Googleの４社が分割して受注しています。元々はマイクロソフトが独占受注したのですが、４社に管理を分散した良い例です。
視点3 - 資金調達のためのバズワード的な意味合い
Web3の多くのカンファレンスが投資家に向けた発信であり、エンジニアではなく投資家やビジネス側の人間が登壇します。そのためポジショントーク、つまり自信の投資先への利益誘導のためのトークショーになります。
フェースブックに投資したマークアンドリーセンとピーターティールやARKのキャシー・ウッドは有名な投資家です。彼女とイーロン、ジャックのトークは見ものです。
ビットコイン至上主義者のジャック・ドーシーはWeb3はVCに所有されていると言っています。ビットコイン信者(bitcoin maxis)はイーサリアムやソラーナのようなWeb3を否定しています。中でもマイケル・セーラは教祖的な存在です。
イーロンもWeb3はマーケティング上のバズワードだともツイートしています。
その象徴が、時代の寵児となったサム・バンクマン=フリード(SBF) です。
Web3の成功事例であり、優等生であったFTX創設者のSBFだったのですが、一夜にして崩壊してしまいました。微妙な話題ですのでここでは書きませんが、SBF事件の概要を知りたい方は、与沢翼さんの動画を見てください。
AIブームもそうなのですが、アメリカでの起業はVCから資金調達を繰り返し評価額を上げながら、最終的な出口戦略としてIPOをするか巨大企業に身売りします。創業者の持ち株比率は希釈され議決権が弱まります。
Web3がキャズム越えしない理由
現状、Web3でFBやTwitterのようにキャズム超えしたサービスはありません。Web3が話題にはなるものの、誰もWeb3のサービスを使っていない現実があります。理由は、
もはや、 クラウド & ネイティブ・アプリ & AIの時代になり、GAFAMの技術無しではビジネスが成立しなくなっているからです。
ギャビンがWeb3を提唱した2014年からGAFAMの時価総額は右肩上がりです。民主党から独禁法違反の訴訟の動きもあるほどです。
また、GAFAMだけでなく、テスラの自動運転のAI技術やトヨタのモビリティカンパニーへのシフトなどインターネット=Webブラウザの時代は終わりつつあります。
TikTokやインスタなどネイティブアプリへの移行が進み、レコメンドエンジン、ChatGPT、Stable DiffusionなどAIの採用も進みつつあります。Web3の技術だけではビジネスは成り立たなくなっています。
Amazonの物流システムやUberのAI配車システムなどWeb3だけでは完結できない事業もあります。
Web3がイマイチ流行らない理由
中でもアップルはネイティブアプリでの課金で収益を上げていることもあり、かなり排他的です。SafariでMetamask拡張はできませんし、NFTの売買にもアップル税を徴収するとしています。
新興国ではアンドロイドが主流ではありますが、可処分所得の低さ、ネットワーク帯域の細さなどあり、dAppsで課金は難しいでしょう。また、Googleの収益のほとんどは広告であり、仮想通貨(課金モデル)との相性の悪さがあります。
それを打破すべく、ソラーナはウォレット搭載のモバイル端末Sagaをリリースし、ネイティブdAppの時代とチャレンジしています。残念ながら日本ではまだ利用できないようです。
Web3の現状
Web3の現状について、海外、日本、GAFAMの切り口で説明します。
冬の時代が到来。ベアーマーケット
残念ながらCrypto Winter (冬の時代)です。ビットコインは一年ほど前に700万円の高値をつけたあとズルズルと値を下げ、2023年2月時点で300万円まで暴落しています。他の仮想通貨も同様です。多くのWeb3企業が倒産や人員削減をしました。
直接の原因はアメリカの高インフレとその後の金利の引き上げにより、投資家が株、仮想通貨から債券に資産を移したことが原因です。マクロ経済の影響をもろに受けたわけです。
経済の話
コロナ禍の期間、バイデン政権は国民にドルをばら撒きました。多くの人がロックダウンでお金の使い道もなく WAGMI 仮想通貨や株に投資しました。FOMOこのビックチャンスに乗り遅れるなとRobinhoodのようなゲーム感覚の投資アプリが若者の間で人気になりました。コロナが収束すると、大衆は YOLO お金を使い始めました。中国のサプライチェーンはまだ回復してませんでしたから、需要>供給になり、物価が高騰しました。また、お金をばら撒いたためにドルの価値は希釈されたこと、ロシアによる原油価格の上昇も物価高に拍車をかけました。
一般的に経済は2%程度(消費者物価指数CPI)のインフレが良いとされています。しかし、アメリカのCPIは7%になってしまいました。生活必需品の値上げは低所得者層にダメージを与え、暴動、犯罪など社会が不安定になります。景気の加熱を鎮静化(富裕層の財布の紐を絞める)するために中央銀行は金利を引き上げ市場からドルを吸い上げ、お金の価値を高めました。金利が上がると借入が難しくなり、企業は投資を控えます。
投資家は不安定なグロース株、仮想通貨などを売却し、安定した米国債を購入します。日本の投資家も米国債を買うために円を売却しドルを調達しました。そのため円安ドル高になりました。
とどめを刺したのばサム・バンクマン=フリード(SBF)の事件になります。FUD信用不安はあっという間に伝染しました。特にソラーナは大暴落してしまいました。
新興国で普及している
リープフロッグ現象です。銀行口座の保有率が低い、インド、ベトナム、ドバイ、ナイジェリア、南米などの新興地域で仮想通貨が普及しています。新興国は人口構成が若者中心でITなど新しい技術への抵抗がないことや、海外に出稼ぎに出ている人が自国の家族へ送金するために仮想通貨を利用しているようです。高齢者が多く既存の金融システムが安定している先進国ではあまり普及はしていないようです。アメリカでもウォーレン・バフェットとやビルゲイツは仮想通貨に反対の立場です。
新興国の状況
新興国の自国通貨の弱さもあります。スリランカでは60%近いインフレでスリランカルピーは対ドルで40%下落しました。トルコもインフレのため仮想通貨が普及しています。紙幣が一夜にして紙屑になってしまうため、キャッシュを保持する不安からiPhoneや自動車を購入したりします。
バイナンスの天才CZやカルダノのチャーリはアフリカ諸国を訪問し政府関係者と交流を深めています。ジャック・ドーシーもアフリカに頻繁に訪れています。
ギャングによる死者で世界で一番危険な国と称されるエルサルバドルは世界で初めてビットコインを法定通貨にしました。L2のライトニングでスターバックでコーヒーが買えます。
ウクラナへはUSに次いで世界で２番に仮想通貨が普及しているようです。世界中から仮想通貨でウクライナへ寄付が行われました。
フィリピンでAxie Infinityゲームをしながら仮想通貨を稼ぐことができるというサービスが流行ったこともあります。しかし、仮想通貨の暴落により多くの人が財産を失ったようです。
日本の事情
残念ながら海外と比べるとあまり流行ってはいません。が、まだ諦めるのは早いです！
日本の事情
日本は少子高齢化の影響もあり現金信仰が強く、電子決済はそれほど普及していません。アメリカの場合はインフレヘッジとして仮想通貨で資産を持つメリットがあるのですが、日本は長年のデフレ経済で円の価値は下がりません。また、有事の円買いと言われるように円の世界的信用はかなり高いです。日本の対外純資産(諸外国にお金を貸したり投資した資産の合計)は31年連続で世界一です。
仮想通貨に対する法人の期末時価評価課税や、個人所得税が雑所得に分類されること、日本の仮想通貨取引所に上場されているコインの種類が少ないことなども投資対象として人気がない理由です。
また、マウントゴックス事件や2018年のビットコインバブル、コインチェックのNEM流出事件など仮想通貨にはネガティブな印象があります。
明るい話題は、若くて優秀なWeb3人材が海外に流出している事実に、岸田政権の新しい資本主義の骨太方針2022にてWeb3やメタバースに投資していくとしています。
Asterの渡辺さんのようにグローバルで活躍されている方もいらっしゃいます。Polkadotのプロモージョンビデオで流暢な英語でインタービューに答えていて凄いなと思いました。
NTTドコモのWeb3への巨額の投資も期待できそうですね。
TOYOTAが協賛しているDAOを社内で利用する試みも面白そうです。
TOEICは株式会社サイバーリンクスのイーサリアム基盤のチェーン上でスコア認定書を発行するようです。証明書の発行はブロックチェーンの書類が改竄されていないことや発行元が正しいことを担保する機能と親和性が良いですね。
GAFAMのスタンス
様子見、もしくは拒絶です。
GAFAMのスタンス
GAFAMとはWeb2の市場を独占している既得権益企業になります。従って、Web3に移行するモチベーションはあまりありません。
中でもアップルはNFTの購入もアップル税の対象とするなどかなり排他的なスタンスです。
GoogleはWeb3の部門を立ち上げたり、YouTubeのクリエータ・エコノミーに好意的です。GCPクラウドの料金を仮想通貨で支払えるようにするそうです。
イーサのノードの50%がAWSで動いている統計データがあります。
マイクロソフトはナスダックなど法人市場でブロックチェーンを導入するなどしています。日本発のブロックチェーン企業のAsterと業務提携をしています。
フェースブックはリブラが世界中から猛反発にあいプロジェクトが頓挫しました。社名をMetaに変更しメタバースに社運を賭けています。マーク・ザッカーバーグはメディア対策にしっぱしたこともあり株価は大暴落しています。
GAFAMは今はマイクロソフトが仕掛けたAI戦争が勃発したところで、それどころではないというのが実情でしょう。
以上でモヤっとした話は終了です。気分を変えて、次はイーサリアムの実装の話をします。
執筆に参考にした情報ソース
基本的にはBanklessを見て海外の仮想通貨事情をキャチアップしています。他にもTwittrで日々情報を追っかけています。
Bankless
Coin Bureau
Dapp University
Patrick Collins
イーサリアム
NFTにはざっくり言うと、イーサリアムとソラーナの２種類があります。他にも、スクエニがPolkadot基盤のEnjinでNFTをリリースする話もあります。
イーサリアムではEdition Drop(ERC1155) を使用するとライセンスキーの仕組みを実装できます。
世間で知られるNFT(RFC721)はその名の通りNon Fungible、つまりどのNFTトークンも唯一無二なものです。サルの画像のNFTの場合、帽子や毛の色を変えたりして個性を出しています。
一方でライセンスキーを実装する場合は唯一無二である必要はありません。そこで、Semi-FungibleなトークンとしてERC1155が作られました。つまり、一つのサルの画像から複数のトークンを生成するようなことが可能です。
またイーサリアムにはレイヤー2という姉妹関係のブロックチェーンがいくつか存在します。その中でもポリゴンはThirdwebでもサポートしており人気があります。イーサとの互換性を保ちつつ、手数料が安く高速というメリットがあるためです。注)厳密にはポリゴンはside chainであり、L2ではない。
ポリゴンNFTのユースケース
海外の大企業での導入がちらほら見られます。
スターバックスのOdysseyはポリゴン上のNFTです。スタバ店内でアプリ決済するとポイントを貯めることができますが、それがNFTになるイメージです。
海外ではとても有名な掲示板サイトRedditがアバターNFTをポリゴン上で構築しています。
ただし、株主のように株主配当や会社の経営方針を決める権利を与えてしまうと、証券とみなされSECの管理対象になるリスクがあります。
本題) 実際に作ってみよう
前置きが長くなりましたが、本題に入ります。WebページのアクセスコントロールにWeb3技術(イーサリアム)を使おうという話です。
ThirdwebのサイトからEdition Dropを作成します。
やり方はこちらの動画を3:30まで見てください。
AlchemyのサイトからGoeriのトークンを補充してください。トークンを頂戴するにはAlchemyのアカウントを作成する必要があります。
ウォレットのインストール
Metamaskをインストールします。
ウォレット1つにつき、３つまでのトークンを払い出せるように設定します。
前回のソラーナの時は複数のスニーカ画像を作成しました。今回、イーサ(ERC1155)の場合はスニーカの画像が一つしかないことが特徴です。この一つの画像から複数のNFTトークンを払い出すことができます。
なんの変哲もないNext.jsプロジェクトを作成します。プロジェクト名をeth-edition-dropとします。
npx create-next-app -e with-tailwindcss eth-edition-drop
ThirdwebとイーサリアムのSDKをインストールします。
yarn add @thirdweb-dev/react @thirdweb-dev/sdk @thirdweb-dev/auth
基本的にはこちらの公式ビデオを参考にして作成します。
イーサスキャン(Goeri)で確認します。
Next.jsのプロジェクトを作成
Next.jsプロジェクトを新規作成し、以下の機能を実装していきます。
- ウォレットでのログイン
- NFTの購入(Claim)
- NFTでのアクセスコントロール
ソラーナの時と同じようにNext.jsのauthの設定をしていきます。
.env.localにウォレットの秘密キーを設定します。
PRIVATE_KEY=ffad7...
_app.tsxにThirdwebのProviderを設置します。next-authのように/api/authを使用して認証します。ソラーナとほぼ同じで一貫性がありますね。でカスタムフックを利用してスマートコントラクトを呼び出します。
import '../styles/globals.css'
import type {AppProps} from 'next/app'
import {ChainId, ThirdwebProvider} from "@thirdweb-dev/react";
export const domain = "example.org"
export const contractId = '0xF12(先ほど作成したERC1155のスマコン)'
const activeChainId = ChainId.Goerli // ガァーリ。イーサの開発用のチェーン
function MyApp({Component, pageProps}: AppProps) {
return (
<ThirdwebProvider
desiredChainId={activeChainId}
authConfig={{
authUrl: '/api/auth',
domain,
}}
>
<Component {...pageProps} />
</ThirdwebProvider>
)
}
import {ThirdwebAuth} from '@thirdweb-dev/auth/next'
import {domain} from "./pages/_app"
export const {ThirdwebAuthHandler, getUser} = ThirdwebAuth({
privateKey: process.env.PRIVATE_KEY!,
domain,
})
import {ThirdwebAuthHandler} from '../../../auth.config'
export default ThirdwebAuthHandler()
ログインページを作成する
ウォレットにログイン(接続)するためのページ(login.tsx)を作成します。カスタムフックで提供されていますのでボタンのイベントハンドラで呼び出します。ウォレットでログインするとuseUser()にユーザ情報がセットされます。
ThirdwebからConnectWalletという便利なReactコンポーネントが提供されていますのでそれを使いましょう。
import {useAddress, useLogin, useUser, useMetamask, useContract, useClaimNFT, ConnectWallet} from "@thirdweb-dev/react";
import {contractId} from "./_app";
import {NextPage} from "next";
const Login: NextPage = () => {
const address = useAddress() // Chrome Metamask Wallet address
const {contract} = useContract(contractId, "edition-drop")
const {user} = useUser()
const login = useLogin()
const {mutate: claimNft} = useClaimNFT(contract)
const handleLogin = () => {
login()
}
// claimとはNFTを購入する意味
const handleClaim = () => {
claimNft({ // NFTを購入するスマートコントラクトを呼び出す。
quantity: 1, // 数量
tokenId: 0, // スニーカ画像のNFT
to: address, // NFTを所有するウォレットID
})
}
return (
<>
<div className="w-40 m-5"><ConnectWallet accentColor="#f213a4" colorMode="light"/></div>
{address && (
<>
{user ?
<button className="p-2 bg-blue-300" onClick={handleClaim}>NFTを買う</button>
:
<button className="border-2" onClick={handleLogin}>ログイン</button>
}
</>)}
</>
)
}
以下のようにThirdwebのReactコンポーネント(ピンク)と購入ボタンが表示されます。
NFTでページのアクセスコントロール
NFTを購入した人だけ閲覧できるページを作ります。SSRでgetServerSidePropsにアクセスコントロールを実装します。
import type {GetServerSideProps, NextPage} from 'next'
import {ThirdwebSDK} from "@thirdweb-dev/sdk";
import {contractId} from "./_app"
import {getUser} from "../auth.config";
export const getServerSideProps: GetServerSideProps = async ({req, res}) => {
const user = await getUser(req)
if (!user) {
return {
redirect: {
destination: "/login",
permanent: false
}
}
}
const sdk = ThirdwebSDK.fromPrivateKey(
process.env.PRIVATE_KEY!,
'goerli'
)
// ログインユーザ(ウォレット)が所有しているNFTの数量を返します。
const checkBalance = async () => {
const contract = await sdk.getContract(contractId, 'edition-drop')
const balance = await contract.balanceOf(user.address, 0)
return balance.gt(0) // booleanを返します。
}
const hasNFT = await checkBalance()
if (!hasNFT) {
return {
redirect: {
destination: "/login",
permanent: false
}
}
}
return {props: {}}
}
const Home: NextPage = () => {
return (
<p>会員ページだよ！</p>
)
}
以上になります。ソラーナ版とほぼ同じなので説明をかなり端折りました。実際に動かしたい場合は、ソラーナ版から始めると分かりやすいです。
Discussion