Metamask Unity SDKを使ってWallet接続してみる

## はじめに
これは[RetailAI AdventurersAdvent Calendar 2023](https://qiita.com/advent-calendar/2023/rai-adventurers)の13日目の記事です。

https://qiita.com/advent-calendar/2023/rai-adventurers

昨日は@daisuke-yamamotoさんの『[Rust vs. Go: Effective Unit Testing](https://qiita.com/daisuke-yamamoto/items/c6e04c320623ff6c4f67)』でした :christmas_tree: :santa_tone1: :christmas_tree: 

本記事ではUnityアセットストアに公開されているMetamask SDKを使用してWallet接続をしてみよう！
という記事になります。

普段は主にBackend Engineerとして業務をしていますが、最近はブロックチェーンを使用したサンプルアプリを作ってみたりDIDやVC(Verifiable Credentials)の調査をしたり。

なぜ今回Unityかというと、、**単純に畑違いなものへの興味。** これに尽きます。
おじさんになっても、いや、おじさんだからこそ遊び心が必要なのです :rocket:  
毎日ラーメンは食えないのです。。
いや、あるいはラーメンならワンチャン・・・・・・いや、いけんな！！

ということで :dash: 

## さっそくやっていくぅ
### Metamask SDKとは
Unityアプリケーションにインポートする事で、ユーザーがMetamaskウォレットに簡単に接続できるようになるようです。

プラットフォームもmacOS、Windows、Linux、iOS、Android、WebGLなどマルチにサポートしています。

また、SDKはユーザーがMetamaskのiOS/Android AppでスキャンできるQRコードをレンダリングしたり、モバイルプラットフォームのDeep Linkもサポートするようです。
***
### Install
Unity HUBから適当な新規プロジェクトを作成します。(Unity自体の環境構築は割愛します)
今回使用しているUnity Editorのバージョンは `2022.3.5.f1`です。

Unity Asset Storeから[Unity用Metamask SDK](https://assetstore.unity.com/packages/decentralization/infrastructure/metamask-246786)をダウンロードし、Package ManagerからMetamask SDKをインポートします。
![スクリーンショット 2023-12-12 182650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/97671f1a-4fd7-2c7e-f597-c283e8835412.png)
***
### Config
ProjectビューのAssetsの中のMetaMaskを選択した状態で、
**[Tools]** > **[MetaMask]** > **[Setup Window]** を選択します。
![スクリーンショット 2023-12-12 205929.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/edaf1611-31f7-12e2-1415-bef75c6793db.png)


するとMetaMaskのDocumentやconfig設定を行える画面が出ます。
**[Documentation]** をクリックすると公式ドキュメントへ飛べます。
![スクリーンショット 2023-12-12 210717.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/f00d0740-9042-2947-e800-9edd342aba55.png)

**[Credentials]** からデフォルト設定のまま **[Apply]** します。
![スクリーンショット 2023-12-12 211044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/d919cd72-64ee-9524-fed5-7770d2b01d87.png)
***
### Play Demo
Unityのシーン(Scene)とは、Unity上の場面や画面を表します。
各シーン内にはオブジェクトを配置でき、他のシーンのオブジェクトと隔離することができます。デザイン系ソフトのレイヤーの概念に近いと思います。

Demoを実行し、挙動を確認していきます。
**[Project ビュー]** > **[Assets]** > **[MetaMask]** > **[Samples]**  > **[Main]**  > **[Scenes]** を選択します。
**MetaMask Main(Sample)** のシーンをダブルクリックするとシーンが切り替わり、左上のHierarchyビューに構成要素が階層で表示されます。

画面上部にあるPlayアイコンを押しましょう :play_pause: 
![スクリーンショット 2023-12-12 220255.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/310e0c41-6cf7-7109-28e2-cc8898ec5da3.png)

驚くほど簡単にMetamaskのwallet connect画面が動きました。
![スクリーンショット 2023-12-12 220824.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/68980344-85ae-5b18-ffac-fc6430fe43fc.png)

**[connect]** ボタンをクリックするとQRコードが表示されます。
QRコードを読み取る際には、MetamaskのiOS/Androidアプリが必要になります。
![スクリーンショット 2023-12-12 220844.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/13fbe855-b2de-6c83-48ef-6706cccd3082.png)

iOS Appで読み取ると承認画面が表示されるので承認します。
（スクショ取り忘れて再度試したので再開表記になってます）
![A381BEF9-8467-42F3-8CDD-23D02CDBC37F.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/b98c99d4-3601-05fa-3484-fb639561e1f5.png)
どうでもいいですが、ハンドルネームの **OTO-SUN** はお父さんからの由来ですが、**SUN** が太陽なのが**ポイント** です 。んー、度し難い、我ながら。


するとDemo側では無事認証が完了し、メニュー画面に切り替わります。
![スクリーンショット 2023-12-12 221058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/7b1c4d24-9841-5d7d-b756-b1c3724c1fb2.png)

試しにTransactionボタンをクリックして、Transactionを送信します。

iOS App側では、Transactionを受信し、承認画面がでてきます。
送信元も **https://example1.com** になっており、最初のconfigで設定したドメインになってますね。
![98E05FB8-117C-43DC-989E-14EBDF067DAE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/7ee7e1a8-4d81-d1ec-b56f-68f6d83b917b.png)


ここで**確定**を押すと
**「空のTransactionを自分から自分に送るのにガス代だけかかるなんてアホくさー」** :rolling_eyes: 
と頭で思いながらなぜか **[確定]** を押してました。 は？
![B72ED476-54D8-4D7A-8569-A7FB889A7BA3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952595/1d2e90a0-6eb7-0797-fe43-9330cb05dba7.png)
そうか、マジか。。

**誠に不本意ながら、自分から自分へ空のTransactionをガス代かけて送る、という状態をイーサリアムに永遠に刻んでやりました!!**

この失態はEtherscanでPublicに公開されているので**いつでも検証可能**です！
**Public Blockchain最高かよ！！**

## まとめ
今回はUnityのMetamask SDKのDemoの挙動を確認しました。
すんなり、動かせましたしDemoのクオリティも高い感じがしたので、このDemoアプリのソースやUIを参考にBlockchainゲームや3DCGを使ったデモンストレーション等にwalletの概念をサクッと持ってこられそうなのは良いなと思いました :smiley: 

直接業務に関係のあるような内容では無いのですが、
気になっていたUnityのSDKを触れて楽しかったです！

また機会があれば『[web3auth](https://web3auth.io/)のUnreal SDKでwallet接続してみる』
というのも試してみたいですね。

明日は @tanabe_shogo さんの記事です :star2: 

https://qiita.com/advent-calendar/2023/rai-adventurers

引き続きRetail AIのアドカレをお楽しみに～ :christmas_tree: :santa: :christmas_tree:  

## 参考

https://docs.metamask.io/wallet/how-to/use-sdk/unity/