はじめに

OpenSeaのブログによると、

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

GitHub

NFTを表示してみる

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

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

<!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>

書いたのはこれだけ

        <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を使って、ローカルWebサーバーを立ち上げる。

キレイに表示された。

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

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

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

<!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からは、以下のような情報が取れる。

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

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

            $.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からインポートする。

表示してみる。

おわりに

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

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

はじめに

NFTを表示してみる

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

おわりに