OpenSeaのNFT用のWebComponentを使ってみる

# はじめに

OpenSeaのブログによると、

https://opensea.io/blog/announcements/announcing-embeddable-nfts/

`<nft />`的なタグを挿入すると、OpenSeaのNFTの情報が表示できるらしい。

GitHub

https://github.com/ProjectOpenSea/embeddable-nfts

# NFTを表示してみる

自分が持っているくりぷ豚を表示する。

とりあえずブートストラップのスターターテンプレートを使う。

https://getbootstrap.com/docs/4.4/getting-started/introduction/#starter-template

```html
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Hello, world!</h1>

        <nft-card
            tokenAddress="0x1a94fce7ef36bc90959e206ba569a12afbc91ca1"
            tokenId="57600"
            network="main"
        ></nft-card>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

        <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
    </body>
</html>
```

書いたのはこれだけ

```html
        <nft-card
            tokenAddress="0x1a94fce7ef36bc90959e206ba569a12afbc91ca1"
            tokenId="57600"
            network="main"
        ></nft-card>

        <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
```

`tokenAddress`には、NFTコントラクトのアドレスを入れる。`tokenId`はNFTのIDを入れる。`network`はメインネットを使っていれば`main`と入力する。

GitHubリポジトリの`README.md`には`mainnet`って書いてあるけど、`example/index.html`には`main`って書いてある。執筆時点では、`main`のみ動作した。

[serve](https://www.npmjs.com/package/serve)を使って、ローカルWebサーバーを立ち上げる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/8a4fdafd-e1b4-dbef-3269-64d946123da5.png)

キレイに表示された。

# OpenSeaAPIと組み合わせてリストを表示する

このあたりのAPIを使えば、指定したアカウントのNFTリストを取得することができる。

https://docs.opensea.io/reference#getting-assets

これを使って、自分が持っているくりぷ豚のリストを表示してみる。

```html
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body>
        <h1>Your Crypton</h1>

        <div id="container"></div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

        <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

        <script>
            const url = "https://api.opensea.io/api/v1/assets?owner=0x772193b106f6d285dffba83b3962b98ff13cb461&asset_contract_address=0x1a94fce7ef36bc90959e206ba569a12afbc91ca1";
            $.getJSON(url, (data) => {
                console.log(data);
                data.assets.map((asset) => {
                    $("<nft-card>").attr({
                        tokenAddress: "0x1a94fce7ef36bc90959e206ba569a12afbc91ca1",
                        tokenId: asset.token_id,
                        network: "main"
                    }).appendTo('#container');
                });
            });
        </script>
    </body>
</html>
```

OpenSeaAPIで、`https://api.opensea.io/api/v1/assets?owner=<owner>&asset_contract_address=<contract>`のようなURLからは、以下のような情報が取れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/632c0dc7-3a37-8f04-93c8-e647ca3d485c.png)

メタデータとかいろいろあるんだけど、今回使うのは`token_id`のみ。

これを、jQueryのAjaxを使って取得して、jQueryでHTMLElementを作って挿入する。

```javascript
            $.getJSON(url, (data) => {
                console.log(data);
                data.assets.map((asset) => {
                    $("<nft-card>").attr({
                        tokenAddress: "0x1a94fce7ef36bc90959e206ba569a12afbc91ca1",
                        tokenId: asset.token_id,
                        network: "main"
                    }).appendTo('#container');
                });
            });
```

`$.getJSON`はブートストラップのスターターテンプレートにある`jquery-3.4.1.slim.min.js`では使えないので、`slim`がついてないやつをGoogleのHosted Libraryからインポートする。

表示してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/c5973267-e48d-d1f4-99b6-8f74b206adab.png)

# おわりに

使用するのはとっても簡単でした。