47
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

RetailAI AdventurersAdvent Calendar 2023

Day 13

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

Last updated at Posted at 2023-12-12

はじめに

これはRetailAI AdventurersAdvent Calendar 2023の13日目の記事です。

昨日は@daisuke-yamamotoさんの『Rust vs. Go: Effective Unit Testing』でした :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をダウンロードし、Package ManagerからMetamask SDKをインポートします。
スクリーンショット 2023-12-12 182650.png


Config

ProjectビューのAssetsの中のMetaMaskを選択した状態で、
[Tools] > [MetaMask] > [Setup Window] を選択します。
スクリーンショット 2023-12-12 205929.png

するとMetaMaskのDocumentやconfig設定を行える画面が出ます。
[Documentation] をクリックすると公式ドキュメントへ飛べます。
スクリーンショット 2023-12-12 210717.png

[Credentials] からデフォルト設定のまま [Apply] します。
スクリーンショット 2023-12-12 211044.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

驚くほど簡単にMetamaskのwallet connect画面が動きました。
スクリーンショット 2023-12-12 220824.png

[connect] ボタンをクリックするとQRコードが表示されます。
QRコードを読み取る際には、MetamaskのiOS/Androidアプリが必要になります。
スクリーンショット 2023-12-12 220844.png

iOS Appで読み取ると承認画面が表示されるので承認します。
(スクショ取り忘れて再度試したので再開表記になってます)
A381BEF9-8467-42F3-8CDD-23D02CDBC37F.png
どうでもいいですが、ハンドルネームの OTO-SUN はお父さんからの由来ですが、SUN が太陽なのがポイント です 。んー、度し難い、我ながら。

するとDemo側では無事認証が完了し、メニュー画面に切り替わります。
スクリーンショット 2023-12-12 221058.png

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

iOS App側では、Transactionを受信し、承認画面がでてきます。
送信元も https://example1.com になっており、最初のconfigで設定したドメインになってますね。
98E05FB8-117C-43DC-989E-14EBDF067DAE.png

ここで確定を押すと
「空のTransactionを自分から自分に送るのにガス代だけかかるなんてアホくさー」 :rolling_eyes:
と頭で思いながらなぜか [確定] を押してました。 は?
B72ED476-54D8-4D7A-8569-A7FB889A7BA3.png
そうか、マジか。。

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

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

まとめ

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

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

また機会があれば『web3authのUnreal SDKでwallet接続してみる』
というのも試してみたいですね。

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

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

参考

47
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
47
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?