
【完全保存版】MetaplexのCore NFTを作ってみよう!
0 はじめに
1 テストトークンの取得
今回の内容につきまして、テストで行う場合は、実際の資産が入っていないテストアカウントで行うことを強くお勧めします。
また、事前にテストトークンの取得が必要です。
やり方が不明な場合は、こちらもご参照ください。
2 参考にしたGithub
また、こちらは、「KUMEKATHON!」というハッカソンで作ったプロジェクトを元に作っています。
そのため「Solana Tips」という文言や、直接使わないコードなども残っていると思いますのでご認識ください。
また、今回、256haxさんのGithubを参考にさせていただきました。
ありがとうございました!
3 公式ページについて
その他、公式ページもぜひご確認ください。
1 やってみよう
まずは、動かしてできることを確認してみましょう。
1 Git clone を行う
まずは、下のように、git clone を行います。
git clone https://github.com/ytakahashi2020/core_nft.git

2 依存関係のインストール
私は、yarnを使って行いました。(npm、pnpmでも大丈夫だと思います。)
cd core_nft
yarn install
なお、私は下のように、バージョンで怒られたので、「v20.12.1」で実行しています。

3 AkordのAPIキーの取得
NFTのJSONデータを保存する先として、Arweaveを用います。
(私は最初、Firebaseに保存したデータを使おうとしましたが、うまくいきませんでした。)
Arweaveに保存するため、今回は、「Akord」を用います。

100MBまで無料なので、ここで登録の上、APIキーを作成します。

⭐️注意⭐️
この先、ArweaveにJSONデータを保存していきます。
一生消えませんので、秘密情報や著作権が関係するものは絶対に保存しないように十分ご注意ください。
4 .env.localの作成
下のように、「.env.local.sample」を元にして、「.env.local」を作ります。
その上で、先ほどのAPIキーを設定します。

5 yarn dev
では、実行してみましょう。
yarn dev
私の場合は、localhost:3000が使われていたようなので、3001になりました。

6 NFTを発行しよう
では、発行してみましょう。
まずはウォレット接続を行います。

その上で、任意の情報を入力して、「Issue NFT」を押します。
今回、画像は事前に適当なものを設定していますが、余力があれば、ここで設定できるようになどもしてみてください。

ポップアップが立ち上がるので、進んでいきます。

完了したようなので、見に行きます。
なお、ここに書いている通り、Arweaveへの登録までに時間がかかるため、最初は画像などが表示されません。

こんな感じになりました。
なお、すぐにはまだ情報が表示されません。

5〜10分ほど待つと、このように情報が表示されるようになりました。

2 コードを見てみよう
こちらの「page.tsx」から見ていきます。

1 設定用データの取得
まずは、こちらでデータを設定しています。
必要に応じて、imageも変えたり、直接設定してください。

2 データのArweaveへの保存
次に、先ほど作ったデータを「createNFTUsingAkord」関数に渡しています。

先ほどのデータをまずは「saveDataToAkord」関数に渡しています。

まずは、APIキーを取得します。
ない場合はエラーとしています。

そして、「JSON.stringify」で、データをJSON形式の文字列にした上で先ほどのAPIキーと共に送付しています。

この辺りは、Akordのドキュメントを参考にしました。

そして、OKの場合は、txIdを返します。

公式で言うところの、こちらを取得しています。

3 NFTの作成
そして、取得した、txIdを「createNFT」関数に渡しています。

では、createNFTを見てみましょう。
3ー1 umiインスタンスの作成
まずはでdevnetについて「createUmi」を行っています。
Solanaブロックチェーンとのやりとりを行うインスタンスを作っています。
どのチェーン(mainnet-betaかdevnetかなど)かを指定しました。

次に、umiのインスタンスに、現在接続しているウォレットをセットします。

公式のこの辺りが参考になります。

3ー2 Assetアカウントの作成
次に、こちらのAssetとなるアカウントを作成します。

作り方は、このように、「generateSigner」で署名者を作り、それをセットしているだけです。

3ー3 NFTの作成(createV1)
それを元に、このようにNFTを作成しています。

そして、このようにウォレットアドレスを返しています。

あとは、返ってきたものを元に、metaplexのエクスプローラで表示しています。

これがNFT作成までの流れでした。
ぜひ皆さんもやってみてください。
いいなと思ったら応援しよう!
