Web3に興味を持ったのでまずNFTのIDから画像を出すプログラムをC#で書いてみた

# Web3
現状Web3は若干胡散臭く聞こえるので避けているエンジニアも多いんじゃないかと思っています。ご多分に漏れず自分もつい最近までそう思っていました。ただ、[75億円](https://gigazine.net/news/20210312-beeple-nft-69-million-dollars/)というありえない金額でやりとりされていたり、エンジニアとして普通に生きていれば非常に良く耳にするキーワードであることもまた事実なので、Web3とはどういうものか？を学んでみたいと思い一冊本を読んでみることにしました。もちろん[これ](https://www.amazon.co.jp/s?k=%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84+web3&adgrpid=143690131651&gclid=Cj0KCQjw1bqZBhDXARIsANTjCPK1M0xyI6jiEiFmdZG7TP3B5Vx5HEeMiskeVoziKjAZjhtP-mP-Z-4aAn4qEALw_wcB&hvadid=618680390306&hvdev=c&hvlocphy=1009507&hvnetw=g&hvqmt=e&hvrand=5471979803849790011&hvtargid=kwd-1903341802712&hydadcr=27266_14598084&jp-ad-ap=0&tag=googhydr-22&ref=pd_sl_8c0nl1741j_e)（←これのせいで胡散臭さにより拍車をかけた側面もありますよねｗ）ではなく[テクノロジーが予測する未来](https://amzn.to/3R9JDOP)を読みました。

# Web3は最初にどの本から入るかで印象が変わる
本はわりとたまたま手に取って読んだだけなんですが、かなり良い本でした。Web3において最初に読む本は結構需要かもしれないなと思いました。Web3は儲かる！という前提で書かれた本で学ぶと、WEB3の本質を見誤るかもなと思いました。今日現在たまたまバブルのようなブームでお金の可能性が見えていますが、Web3の本質はそこではなくもっと面白い可能性がある技術だと思いました。特にNFTとイーサリアムがめちゃくちゃ面白そうで興味を持ちました。

# IDから画像を出すプログラムを書きたい
本ではWeb3という色んな話の一つとしてイーサリアムとNFTを取り上げているだけで、技術的な所はあまり深く出てきません。イーサリアムはプログラマブルであることが一つの特徴として挙げられていたので、まずはプログラムで何かイーサリアムに関わる事をやったみたいと思いました。そこでNFTはIDに対応する画像があるようなので、まずはIDを指定したら画像が表示されるプログラムを書いてみようと思いました。

# C#で書いてみたい
また自分はC#が好きなので、C#でNFTのIDから画像を表示することが出来ないか、出来ないならその部分を含めて自分で作ってやろうという気持ちでした。調べてみると[NFTをUnityで表示する](https://qiita.com/1221_japan/items/620f8b1aff5a26c94341)という記事を見つけました。読んでみるとC#でというよりはJavascriptを中心に扱っている内容でした。web3.jsを使ってWeb3のインスタンスを作っている感じだったので、これと同じことが出来ないか調べてみると[Nethereum](https://nethereum.com/)という.NETのethereumライブラリで同じことが出来そうでした。

# contractaddressとtokenID
記事の中でcontractaddressとtokenIDを指定してやれば画像が出させそうなのは分かりました。そこで実際にC#でコードを書いてWeb3のインスタンスを作ってみようとすると色々と疑問が出てきました。Web3のインスタンスを作るにはまず第一引数にurlを渡してやる必要があります。ただデフォルト引数が付いていてそれがlocalhostを指定しています。urlに何を渡したら良いんだろう？これが最初の疑問でした。
```csharp
public Web3(string url = @"http://localhost:8545/", ILog log = null, AuthenticationHeaderValue authenticationHeader = null)
```

# infura
URLに関しては記事の中で**infuraで作成したURL**と書いてありました。で、[infura](https://infura.io/)って何？ってことですが、ググるっとわりと最初に否定的な記事が出ました。[Infuraへの過度な依存で『イーサリアムのビジョンは失敗に終わる』](https://coinpost.jp/?p=53360)。たださらに調べているとNethereumに限らずJavaScriptでもWeb3のURLにinfuraを渡している例はちょこちょこ見つかりました。これがベストな方法か分からないですが、とりあえず一旦[infura](https://infura.io/)を使ってみることにしました。とはいえやることはアカウント作るぐらいですぐ使えました。

# Contract
infuraを渡してWeb3のインタンスを作ったら次にweb3.Eth.GetContractにcontractAddressを指定してContractのインスタンスを取得します。そこで**abi**という文字列を渡せとまた分からないキーワードが出てきました。調べてみると「ABI(Application Binary Interface)は、バイナリファイルへのアクセスに対して互換性を与えるために定義されるものです」とあり、静的に決まっているものを渡せばよさそうです。ググってみるとNethereumの[issues](https://github.com/Nethereum/Nethereum/issues/204)でもそのまま渡しているサンプルがあったので、これをそのままパクっってきました。
```csharp
//abiに渡す文字列（issuesまま←もう少しシンプルにできるかもしれないが未検証）
private static readonly string abi = @"[{""inputs"":[],""stateMutability"":""nonpayable"",""type"":""constructor""},{""anonymous"":false,""inputs"":[{""indexed"":true,""internalType"":""address"",""name"":""owner"",""type"":""address""},{""indexed"":true,""internalType"":""address"",""name"":""approved"",""type"":""address""},{""indexed"":true,""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""Approval"",""type"":""event""},{""anonymous"":false,""inputs"":[{""indexed"":true,""internalType"":""address"",""name"":""owner"",""type"":""address""},{""indexed"":true,""internalType"":""address"",""name"":""operator"",""type"":""address""},{""indexed"":false,""internalType"":""bool"",""name"":""approved"",""type"":""bool""}],""name"":""ApprovalForAll"",""type"":""event""},{""anonymous"":false,""inputs"":[{""indexed"":true,""internalType"":""address"",""name"":""from"",""type"":""address""},{""indexed"":true,""internalType"":""address"",""name"":""to"",""type"":""address""},{""indexed"":true,""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""Transfer"",""type"":""event""},{""inputs"":[{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""approve"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""owner"",""type"":""address""}],""name"":""balanceOf"",""outputs"":[{""internalType"":""uint256"",""name"":"""",""type"":""uint256""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""_newOwner"",""type"":""address""}],""name"":""changeOwner"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""_itemOwner"",""type"":""address""},{""internalType"":""uint256"",""name"":""_id"",""type"":""uint256""},{""internalType"":""string"",""name"":""_tokenURI"",""type"":""string""}],""name"":""forgeNewNFT"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""getApproved"",""outputs"":[{""internalType"":""address"",""name"":"""",""type"":""address""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""owner"",""type"":""address""},{""internalType"":""address"",""name"":""operator"",""type"":""address""}],""name"":""isApprovedForAll"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[],""name"":""name"",""outputs"":[{""internalType"":""string"",""name"":"""",""type"":""string""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""ownerOf"",""outputs"":[{""internalType"":""address"",""name"":"""",""type"":""address""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""from"",""type"":""address""},{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""safeTransferFrom"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""from"",""type"":""address""},{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""},{""internalType"":""bytes"",""name"":""_data"",""type"":""bytes""}],""name"":""safeTransferFrom"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""operator"",""type"":""address""},{""internalType"":""bool"",""name"":""approved"",""type"":""bool""}],""name"":""setApprovalForAll"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""bytes4"",""name"":""interfaceId"",""type"":""bytes4""}],""name"":""supportsInterface"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[],""name"":""symbol"",""outputs"":[{""internalType"":""string"",""name"":"""",""type"":""string""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""tokenURI"",""outputs"":[{""internalType"":""string"",""name"":"""",""type"":""string""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""from"",""type"":""address""},{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""transferFrom"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""}]";

var web3 = new Web3($"https://mainnet.infura.io/v3/{infuraApiKey}");
var contract = web3.Eth.GetContract(abi, contractaddress);
```

# TokenURI
さらにサンプルは以下のように続いていました。今回自分が取りたいのはトークンのURIであり、そこでtokenIDを渡してやればURIを取得することが出来そうでした。

```csharp
//issuesにあったコード
Function functionTransfer = contract.GetFunction("transfer");
var sss = functionTransfer.CallAsync<bool>(addressTo, token);

↓

//自分がとりたいtokenURIに変更
var tokenFunction = contract.GetFunction("tokenURI");
var tokenUri = await tokenFunction.CallAsync<string>(tokenId);
```
これで実際tokenURIが取れました。

```
ipfs://ipfs/QmPAg1mjxcEQPPtqsLoEcauVedaeMH81WXDPvPx3VC5zUz
```

# ipfs
ただこのtokenURIはhttpではなくipfsというプロコトルが返ってきました。ipfs？また分からない単語です。調べてみると[IPFS](https://ja.wikipedia.org/wiki/InterPlanetary_File_System)は分散ファイルシステムにデータを保存、共有するためのプロトコル、かつP2Pネットワークであると書いてありました。あ、仮想通貨はそもそもP2Pでやりとりしているなと言うことを思い出してなるほどと思いました。ipfsは以下のルールでhttpsに置換してやれば実際に有効なURLとして扱えるようでした。
```csharp
tokenUri.Replace("ipfs://ipfs", "https://ipfs.io/ipfs");
```
```
ipfs://ipfs/QmPAg1mjxcEQPPtqsLoEcauVedaeMH81WXDPvPx3VC5zUz
↓
https://ipfs.io/ipfs/QmPAg1mjxcEQPPtqsLoEcauVedaeMH81WXDPvPx3VC5zUz
```

# JSON取得
つまりcontractaddressとして[0x2a46f2ffd99e19a89476e2f62270e0a35bbf0756](https://onlineonly.christies.com/s/beeple-first-5000-days/beeple-b-1981-1/112924)を渡すと、tokenUriとして[ipfs://ipfs/QmPAg1mjxcEQPPtqsLoEcauVedaeMH81WXDPvPx3VC5zUz](ipfs://ipfs/QmPAg1mjxcEQPPtqsLoEcauVedaeMH81WXDPvPx3VC5zUz)が返ってきて、それをhttpsに変換してURLにするとhttps://ipfs.io/ipfs/QmPAg1mjxcEQPPtqsLoEcauVedaeMH81WXDPvPx3VC5zUz になり、このURLならブラウザでも開けました。実際にブラウザで開くと以下のJSONが返ってきました。

```json
{"title": "EVERYDAYS: THE FIRST 5000 DAYS", "name": "EVERYDAYS: THE FIRST 5000 DAYS", "type": "object", "imageUrl": "https://ipfsgateway.makersplace.com/ipfs/QmZ15eQX8FPjfrtdX3QYbrhZxJpbLpvDpsgb2p3VEH8Bqq", "description": "I made a picture from start to finish every single day from May 1st, 2007 - January 7th, 2021.  This is every motherfucking one of those pictures.", "attributes": [{"trait_type": "Creator", "value": "beeple"}], "properties": {"name": {"type": "string", "description": "EVERYDAYS: THE FIRST 5000 DAYS"}, "description": {"type": "string", "description": "I made a picture from start to finish every single day from May 1st, 2007 - January 7th, 2021.  This is every motherfucking one of those pictures."}, "preview_media_file": {"type": "string", "description": "https://ipfsgateway.makersplace.com/ipfs/QmZ15eQX8FPjfrtdX3QYbrhZxJpbLpvDpsgb2p3VEH8Bqq"}, "preview_media_file_type": {"type": "string", "description": "jpg"}, "created_at": {"type": "datetime", "description": "2021-02-16T00:07:31.674688+00:00"}, "total_supply": {"type": "int", "description": 1}, "digital_media_signature_type": {"type": "string", "description": "SHA-256"}, "digital_media_signature": {"type": "string", "description": "6314b55cc6ff34f67a18e1ccc977234b803f7a5497b94f1f994ac9d1b896a017"}, "raw_media_file": {"type": "string", "description": "https://ipfsgateway.makersplace.com/ipfs/QmXkxpwAHCtDXbbZHUwqtFucG1RMS6T87vi1CdvadfL7qA"}}}
```
このJSONのimageUrlこそがIDで指定した画像でした。

# CSでコード
ここまで分かればcontractaddressとtokenIdから画像のURLを取得するコードが書けました。
```csharp
private static readonly string Abi = @"[{""inputs"":[],""stateMutability"":""nonpayable"",""type"":""constructor""},{""anonymous"":false,""inputs"":[{""indexed"":true,""internalType"":""address"",""name"":""owner"",""type"":""address""},{""indexed"":true,""internalType"":""address"",""name"":""approved"",""type"":""address""},{""indexed"":true,""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""Approval"",""type"":""event""},{""anonymous"":false,""inputs"":[{""indexed"":true,""internalType"":""address"",""name"":""owner"",""type"":""address""},{""indexed"":true,""internalType"":""address"",""name"":""operator"",""type"":""address""},{""indexed"":false,""internalType"":""bool"",""name"":""approved"",""type"":""bool""}],""name"":""ApprovalForAll"",""type"":""event""},{""anonymous"":false,""inputs"":[{""indexed"":true,""internalType"":""address"",""name"":""from"",""type"":""address""},{""indexed"":true,""internalType"":""address"",""name"":""to"",""type"":""address""},{""indexed"":true,""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""Transfer"",""type"":""event""},{""inputs"":[{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""approve"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""owner"",""type"":""address""}],""name"":""balanceOf"",""outputs"":[{""internalType"":""uint256"",""name"":"""",""type"":""uint256""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""_newOwner"",""type"":""address""}],""name"":""changeOwner"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""_itemOwner"",""type"":""address""},{""internalType"":""uint256"",""name"":""_id"",""type"":""uint256""},{""internalType"":""string"",""name"":""_tokenURI"",""type"":""string""}],""name"":""forgeNewNFT"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""getApproved"",""outputs"":[{""internalType"":""address"",""name"":"""",""type"":""address""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""owner"",""type"":""address""},{""internalType"":""address"",""name"":""operator"",""type"":""address""}],""name"":""isApprovedForAll"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[],""name"":""name"",""outputs"":[{""internalType"":""string"",""name"":"""",""type"":""string""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""ownerOf"",""outputs"":[{""internalType"":""address"",""name"":"""",""type"":""address""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""from"",""type"":""address""},{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""safeTransferFrom"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""from"",""type"":""address""},{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""},{""internalType"":""bytes"",""name"":""_data"",""type"":""bytes""}],""name"":""safeTransferFrom"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""operator"",""type"":""address""},{""internalType"":""bool"",""name"":""approved"",""type"":""bool""}],""name"":""setApprovalForAll"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""},{""inputs"":[{""internalType"":""bytes4"",""name"":""interfaceId"",""type"":""bytes4""}],""name"":""supportsInterface"",""outputs"":[{""internalType"":""bool"",""name"":"""",""type"":""bool""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[],""name"":""symbol"",""outputs"":[{""internalType"":""string"",""name"":"""",""type"":""string""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""tokenURI"",""outputs"":[{""internalType"":""string"",""name"":"""",""type"":""string""}],""stateMutability"":""view"",""type"":""function""},{""inputs"":[{""internalType"":""address"",""name"":""from"",""type"":""address""},{""internalType"":""address"",""name"":""to"",""type"":""address""},{""internalType"":""uint256"",""name"":""tokenId"",""type"":""uint256""}],""name"":""transferFrom"",""outputs"":[],""stateMutability"":""nonpayable"",""type"":""function""}]";

public static async Task<string> ToImageUrlAsync(this string contractaddress, BigInteger tokenId, string infuraApiKey, HttpClient httpClient)
{
    var web3 = new Web3($"https://mainnet.infura.io/v3/{infuraApiKey}");
    var contract = web3.Eth.GetContract(Abi, contractaddress);
    var tokenFunction = contract.GetFunction("tokenURI");
    var tokenUri = await tokenFunction.CallAsync<string>(tokenId);
    var ipfsUrl = tokenUri.Replace("ipfs://ipfs", "https://ipfs.io/ipfs");
    var response = await httpClient.GetAsync(ipfsUrl);
    var json = await response.Content.ReadAsStringAsync();
    var result = JsonSerializer.Deserialize<IpfsJson>(json) ?? new IpfsJson();
    return result.imageUrl;
}
```
これで[画像のURL](https://ipfsgateway.makersplace.com/ipfs/QmZ15eQX8FPjfrtdX3QYbrhZxJpbLpvDpsgb2p3VEH8Bqq)が返ってきました。
```
https://ipfsgateway.makersplace.com/ipfs/QmZ15eQX8FPjfrtdX3QYbrhZxJpbLpvDpsgb2p3VEH8Bqq
```

# MAUIからBlazor
画像のURLが取れれば後は表示するだけです。最初は[MAUI](https://learn.microsoft.com/ja-jp/dotnet/maui/what-is-maui)でcontractaddressとtokenIdを入力したら画像を表示するアプリを書こうと思ってちょっと作りましたが、ダウンロードして実行しないと見えないのは手間かと思って、[Blazor](https://learn.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-6.0)で[サイト](https://binnmtiweb3study.azurewebsites.net)を作りました。左メニューのNFTをクリックして「検索」ボタンを押せば画像が表示します。contractaddressとtokenIdを変更するとまだ幾つかエラーが返ってくるケースもありますが、正しく出る画像もあるし、もう少し勉強しないとエラーは回避できなそうだったので一旦勉強用としてはこれで完成として公開しました。以下がサイトです。

https://binnmtiweb3study.azurewebsites.net


# 今後
最初の目標としてcontractaddressとtokenIdから画像を出すプログラムは書けたので次、何をするかまだ決めかねています。これ勉強したら？とかアドバイスがあればぜひコメントに書いてもらえると嬉しいです！