ALIS BOOT CAMPを受けてみた⑤NFTを作ってみる/NFTの情報を取得する

zap
2019/12/30 02:59

基礎は大事で、大事なんだけども何かができるわけではないので面白くないし、なおかつ一人で始めようとしてもトラブルが連発してなかなか進まないんですよね。

前回に引き続きNFT関連です。もう少し進めれば一人で開発できるようになるかもしれません。

ちなみにメンタリングの間は別のカードゲームを作っていたりするわけですが。

余談はさておき、メンタリングの内容です。

/////////////////////////////////////////////////////////////////////////////

ホーさん金曜日 20:31

はい、それでは今日もよろしくお願いします。

先日の続きです

VSCodeで、WSLへの接続をお願いします

あと、Terminalを開いて、opensea-creaturesにディレクトリ移動してください

ＺＡＰ金曜日 20:33

WS000205.JPG

76.21 KB

ホーさん金曜日 20:33

OKです！

次に、Infuraのkeyが必要になります。

事前準備として、 infura.io に登録していただいたと思います。

ＺＡＰ金曜日 20:33

はい。

ホーさん金曜日 20:33

https://infura.io/

Ethereum API | IPFS API & Gateway | ETH Nodes as a Service | Infura

Infura's development suite provides instant, scalable API access to the Ethereum and IPFS networks. Connect your app to Ethereum and IPFS now, for free!

Infuraを使うと、サーバレスで（自分でサーバーを立てることなく）Ethereum networkにアクセスすることができるようになります。また、テストネットがあり、ファセットでETHを入手して使うことができるのでリアルマネーを消費しないでお試しすることができます。(編集済)

ログインして、適当な名前でProjectを作りましょう。

unknown.png

7.35 KB

ＺＡＰ金曜日 20:36

WS000207.JPG

119.72 KB

ホーさん金曜日 20:36

OKです

VIEW PROJECTを押していただいて KEYSのところ、ENDPOINTってありますかね。 /v3/以降がkeyです。

プロジェクトの、ってとこです

ＺＡＰ金曜日 20:36

OKです。

ホーさん金曜日 20:37

それでは、VSCodeのターミナルで、

export INFURA_KEY="<your_infura_key>" の、<your_infura_key>のところをinfura keyに入れ替えて、エンターです。

環境変数というのを設定します

ＺＡＰ金曜日 20:38

いれました。

ホーさん金曜日 20:38

これは、今開いてるターミナルでのみ有効な変数です

echo $INFURA_KEY とすることで確認できます

次に、 export MNEMONIC=“<metamask>” ですが、これはmetamaskの秘密鍵です。この秘密鍵に紐付いたアドレスで、スマコンの登録が行われます。なので、スマコンに関するgasの支払いはこのアカウントから行われます。

ＺＡＰ金曜日 20:39

OKです。

ホーさん金曜日 20:39

<metamask>のところでに、METAMASKのアカウントの秘密鍵を入れます（取扱注意）

やり方は

unknown.png

674 bytes

ここ押して

unknown.png

3.37 KB

次にここ押して

秘密鍵のエクスポート→パスワード入力で表示されます。事前準備で捨てアドレスをご準備いただいたのは万が一のためです。秘密鍵使うので。。

ＺＡＰ金曜日 20:41

いれました。

ホーさん金曜日 20:41

はい、では次に

export NETWORK="rinkeby"

これはこのまま入力してエンターです

ＺＡＰ金曜日 20:42

はい。

ホーさん金曜日 20:42

rinkebyというのはテストネットの名前です

次に、Truffleを使ってrinkebyネットワークにデプロイします。 Truffleはご存知かもしれませんがSolidityの開発フレームワークで、先日のnpm installで一緒にインストールされてます。(編集済)

truffle deploy --network rinkeby

これでスマコンをデプロイします。

ネットワーク回線が遅いとエラーが出ます。。

ＺＡＰ金曜日 20:43

truffle: command not found

入ってないってことですかね？

ホーさん金曜日 20:44

おっと

ちなみに、 npm --version は何を返します？

ＺＡＰ金曜日 20:45

5.6.0

ホーさん金曜日 20:45

OKですね、では npm install -g truffle

で入れてしまいましょう

-gというのはグローバル環境に入れるという意味です

ＺＡＰ金曜日 20:46

truffle deploy --network rinkebyが通るようになりました。

ホーさん金曜日 20:46

OKです

ＺＡＰ金曜日 20:46

実行中・・・

ホーさん金曜日 20:47

ちょっと時間かかりますw

あと結構ミスります

何度かやると通ったり。。

ＺＡＰ金曜日 20:48

これ、イーサのネットワークからダウンロードしてるんです？

gasがどうのとかよく出てくるので。

ホーさん金曜日 20:48

イーサのネットワークは、infura経由で接続してますので、ローカルにはダウンロードしていないです

gasはスマコン登録に対して払ってます

ＺＡＰ金曜日 20:49

終わったみたいです。

ホーさん金曜日 20:49

そうしましたら、今登録したスマコンをEtherscanでみてみましょう。

RinkebyネットワークのEtherscanというのがあります。

https://rinkeby.etherscan.io/

こちらで、アカウントのアドレスを調べてみましょう。

ＺＡＰ金曜日 20:50

WS000208.JPG

123.83 KB

ホーさん金曜日 20:51

contract creationできてますね

ＺＡＰ金曜日 20:51

Contract Creationってやつですか？

ホーさん金曜日 20:51

はい

0x27..のところクリックしてみてください

Contract 0x27....　みたいなタイトルのページひらけますでしょうか

ＺＡＰ金曜日 20:52

WS000209.JPG

122.45 KB

ホーさん金曜日 20:52

OKです〜

それが、NFTコントラクトのアドレスです。

今作ったのは、”このNFTはどんなものなのか”を定義するスマコンです

この状態では実際のNFTは一つも生成されていません。

NFTを生成するときは、このスマコンのアドレスを指定することで、このスマコンで定義されてるNFTを作ることができます。

ＺＡＰ金曜日 20:53

なるほど。

ホーさん金曜日 20:53

ちなみに、MyCryptoHerosのヒーローのNFTのコントラクトアドレスはこれです https://etherscan.io/address/0x273f7f8e6489682df756151f5525576e322d51a3

同じく、Contract 0x27..となってるのがお分かりいただけるかと思います

次に、今作ったコントラクトを使ってNFTを生成してみましょう。

ＺＡＰ金曜日 20:54

これ、このスマコン自体は誰でも使えるんですか？

ホーさん金曜日 20:55

いや、登録したアドレスが必要です

ＺＡＰ金曜日 20:55

なるほど。

ホーさん金曜日 20:55

スマコン動かすのにgas払う必要あるので

他の人が使えてしまうと、他人にお金使われてしまいます

次に、VSCodeのターミナルで、以下のコマンドを打ちます。

export OWNER_ADDRESS="<my_address>" <my_address>を自分のイーサアドレスと入れ替えます

この時のアドレスは、「NFT」が付与されるアドレスです。さっきスマコン登録したアドレスでも良いですし、他のアドレスでも構いません。

もしWEBアプリ等でユーザーにNFTを付与したかったら、web3の機能でログインしているユーザーのMETAMASKのアドレスを取得できるので、その値を使って実行するとその人にNFTをあげることができます。この辺りはLiberate liteでは使わない機能ですがご参考まで。

ＺＡＰ金曜日 20:58

これは捨て垢じゃなくても、支払先だから問題ないって認識なんですかね？

ホーさん金曜日 20:58

そうですね、問題ないです。ですがまあ先ほどの捨て垢で良いと思います

ＺＡＰ金曜日 20:58

そうしておきます。

ホーさん金曜日 20:59

次に、 export NFT_CONTRACT_ADDRESS="<deployed_contract_address>" で、<deployed_contract_address> を先ほど調べたNFTコントラクトのアドレス(0x27..)と入れ替えます

ＺＡＰ金曜日 21:00

OKです

ホーさん金曜日 21:01

それではNFTを生成しましょう。 node scripts/mint.js

こちらも少々時間がかかります

上は、scriptsというディレクトリの中にmint.jsというスクリプトが入っていまして、これを実行するためのコマンドです。

ＺＡＰ金曜日 21:01

これ打つと実際につくられるんですか？

ホーさん金曜日 21:01

作られます！

ＺＡＰ金曜日 21:02

つまり、１つのNFTを作るのに１つのスマコンが必要ってことなんですかね？

ホーさん金曜日 21:03

ええと、先ほどのスマコンは型みたいなもので、同じスマコンから異なるパラメータを持つNFTをたくさん生成できます。

MCHのHerosも色々なキャラクターがあると思いますが、全て先ほどのスマコンが作ってます

ＺＡＰ金曜日 21:04

つまり、ヒーローとエクステとランドの型があればイケるみたいな感じですかね？

ホーさん金曜日 21:05

そうです。ヒーローとエクステとランドはそれぞれ違うスマコンがあります

ＺＡＰ金曜日 21:06

怪しい感じ・・・

WS000210.JPG

162.23 KB

ホーさん金曜日 21:06

あ、ガス不足ですかね？

ＺＡＰ金曜日 21:07

WS000211.JPG

21.54 KB

ホーさん金曜日 21:07

ありますねw

ＺＡＰ金曜日 21:08

でも止まっちゃいました。

ホーさん金曜日 21:09

少々お待ちを。。

VSCodeで、scriptsディレクトリの下にあるmint.js開けますか？

ＺＡＰ金曜日 21:10

一回止めていいんですか？

ホーさん金曜日 21:10

あ、はい一旦止めましょう

ＺＡＰ金曜日 21:11

message.txt

2.85 KB

ホーさん金曜日 21:14

あ、あとtruffle.jsも開けますでしょうか

ＺＡＰ金曜日 21:15

zap@DESKTOP-H0FTP1L:~/opensea/opensea-creatures$ cat truffle.js const HDWalletProvider = require("truffle-hdwallet-provider"); const MNEMONIC = process.env.MNEMONIC const INFURA_KEY = process.env.INFURA_KEY if (!MNEMONIC || !INFURA_KEY) { console.error("Please set a mnemonic and infura key.") return } module.exports = { networks: { development: { host: "localhost", port: 8545, gas: 4600000, network_id: "" // Match any network id }, rinkeby: { provider: function() { return new HDWalletProvider( MNEMONIC, "https://rinkeby.infura.io/v3/" + INFURA_KEY ); }, network_id: "", gas: 4000000 }, live: { network_id: 1, provider: function() { return new HDWalletProvider( MNEMONIC, "https://mainnet.infura.io/v3/" + INFURA_KEY ); }, gas: 4000000, gasPrice: 50000000000 }, mocha: { reporter: 'eth-gas-reporter', reporterOptions : { currency: 'USD', gasPrice: 2 } }, compilers: { solc: { version: "^0.5.0" } }, } };zap@DESKTOP-H0FTP1L:~/opensea/opensea-creatures$

ホーさん金曜日 21:16

うーん、同じ

もう一度走らせても同じですかね

ＺＡＰ金曜日 21:18

リトライ中・・

WS000212.JPG

184.98 KB

一瞬でさっきと同じエラーっぽいものが出ました。

ホーさん金曜日 21:20

status: falseですもんね

ＺＡＰ金曜日 21:22

上手くテストネットになってないとか？

ホーさん金曜日 21:22

export NETWORK="rinkeby" をしてるので大丈夫だと思います。。

あ、infuraか？

ＺＡＰ金曜日 21:24

？

ホーさん金曜日 21:24

少々お待ちを

あ、すいません関係なかったです

mainnetとrinkebyでkey違うかと思いましたが同じでした

node --version はどうでしょう

ＺＡＰ金曜日 21:26

v8.11.2

ホーさん金曜日 21:26

そちらも問題ないですね。。

https://seita.tokyo/2019/07/23/parity%E3%81%AEpoa%E3%83%97%E3%83%A9%E3%82%A4%E3%83%99%E3%83%BC%E3%83%88%E3%83%8D%E3%83%83%E3%83%88%E5%BB%BA%E3%81%A6%E3%81%A6truffle%E3%82%92%E4%BD%BF%E3%81%86%E6%99%82%E3%81%AFbyzantium%E5%AF%BE%E5%BF%9C%E3%82%92%E3%81%8A%E5%BF%98%E3%82%8C%E3%81%AA%E3%81%8F/

ParityのPOAプライベートネット建ててtruffleを使う...

以下のtutorialに従ってparityのpoaプライベートネットを構築してから、 ...

この辺が関係しているか

ちょっとイーサのアドレスここに貼っていただけますか？

ＺＡＰ金曜日 21:30

0x05EcF5aB7a378A4eEED1ba1fC9A5d938F4fC4240

ホーさん金曜日 21:32

ちょっときになるのは

2019-12-27_21.32.11.png

23.49 KB

このタブが見当たらないんですよね

正しくERC721のスマコンとして認識されてないのかな、という危惧があります

ちょっと一旦飛ばしましょう

今日APIの使い方までやりたいので

ＺＡＰ金曜日 21:33

わかりました。

ホーさん金曜日 21:34

ちょっとこちらコピーしてどこかに保存していただけますでしょうか

ちょっとしたら消します

ＺＡＰ金曜日 21:34

コピーしました

ホーさん金曜日 21:35

はい、ではこちら使ってAPIの使い方見ていきましょう。

先ほどのコマンドが正しく実行できると、一度にNFTトークンが12こ生成されます

生成したNFTをまずはEtherscanでみてみましょう

https://rinkeby.etherscan.io/

先ほどお送りしたアドレスをこちらで調べて見てください

ERC721 Token Txnsのところが、mintした結果NFTがたくさん生成されている履歴になっています

ＺＡＰ金曜日 21:37

WS000213.JPG

140.89 KB

ホーさん金曜日 21:37

okです

では、次にOpenseaのAPIでNFTをみてみましょう。

ここが結構ポイントです。Liberate liteでは、ユーザーのNFTを取得する必要がありますので、この辺りのAPIを使っていく必要があります。

ＺＡＰ金曜日 21:37

はい。

ホーさん金曜日 21:38

APIですが

https://alis.to/api/articles/recent これはALISの新着記事のapiです。

みていただくと、文字の羅列になっていますが、新着記事の情報がJSONという形式で出力されています。

JSONというのは { “key”: “value” } のように、”key”（キー）に対して”value”（値）が何か、という情報を構造的に表す形式です。

これをプログラミングで取得して、必要な情報だけ取り出して加工するイメージです。

OpenSeaのAPIのドキュメントを見てみましょう

https://docs.opensea.io/reference#account-object

OpenSea

この中に、「Retrieving a single asset」という項目があります。

unknown.png

233.15 KB

https://api.opensea.io/api/v1/asset/asset_contract_address/token_id/

PATH PARAMSというのが、 asset_contract_addressとtoken_idのことです。さっきNFTのスマコン作るのに作っ

たNFT_CONTRACT_ADDRESSが、 asset_contract_addressです。

token_idというのは何番目のNFTかという意味で、例えばNFTを12個作っていれば0から11までの数を指定できます。

https://rinkeby-api.opensea.io/asset/0x1146c33d6b898ca432bf802fedc0da3cbbee62f8/2

こんな感じで入れ替えて使います

なお、 https://api.opensea.io/api/v1/asset は、メインネットのみに有効です

さっき作ったNFTはRinkebyネットなので、

unknown.png

149.29 KB

ここに書いてある通り、api.opensea.ioの前に、rinkeby-をつける必要があります。

https://rinkeby-api.opensea.io/api/v1/asset/。。。と変える必要があります

https://rinkeby-api.opensea.io/asset/0x1146c33d6b898ca432bf802fedc0da3cbbee62f8/2

ここ開けましたかね

ＺＡＰ金曜日 21:44

開けました。

ホーさん金曜日 21:44

0x1146c33d6b898ca432bf802fedc0da3cbbee62f8 というスマコンから生成された、 2 のtoken_idをもつNFTを見ています

Liberate liteを作ることをイメージすると、そもそもユーザーが何のNFTを持っているかを取得するのがまず先で、そのあと、もし必要があればそのNFTの詳細な情報を取得しにいく、という順番になります。

「あるユーザーが所持しているNFTを表示する」には、こちらのAPIを使う必要があります。

unknown.png

228.67 KB

先ほどはPATH PARAMETERでしたが、今度はQUERY＿PARAMSとなっています。

クエリパラメータは、クエスチョンマーク「?」を後ろにつけて、パラメータを設定していきます

ownerを設定したければ

https://rinkeby-api.opensea.io/api/v1/assets?owner=0x9ba9105d4a1c2346213fq67dea928b975d729

のように後ろにつけます。複数つけることもできます。

複数つけるときは&で区切ります。最初のパラメータの頭だけ”?”です

owner=の後ろを、先ほどお送りしたアドレスに入れ替えてアクセスして見てください

どうでしょう

ＺＡＰ金曜日 21:49

WS000214.JPG

115.14 KB

ホーさん金曜日 21:49

あ、すみません。

https://rinkeby-api.opensea.io/api/v1/assets?owner=0x9ba9105d4a1c2346213fq67dea928b975d729

こちらのowner=以降を変えてアクセスしてみてください

v1/assets というのが、所持しているアセット全てにアクセスできるAPIです(編集済)

先ほど間違って送ったcollectionsは、どのスマコンのNFTを持っているか、という情報が取れるAPIです

なお、先ほどalisのAPIにアクセスしたときはJSONだけでしたが、openseaのAPIは Django REST frameworkとなっていて、HTMLが返ってくるようになってます。

右上にGETってボタンがあると思うんですが、そこをクリックするとJSONという項目があるので、そこをクリックするとJSONになると思います。何が違うかというと、URLの後ろをよくみていただくと、クエリパラメータでformat=jsonというのが追加されているかと思います。このクエリパラメータがないときはデフォルトでHTMLを返すようになっており、format=jsonのパラメータが設定されたときはJSONで返す、といった実装になっています。 Liberate liteからアクセスするときは、このformat=jsonが必要になります。JSONの方がプログラミングで扱いやすいですので。(編集済)