メインコンテンツまでスキップ

lesson-1_NFTをmintしてみよう！

シンプルなNFTのmintコードを実行し、mintまでの流れを理解しましょう！

XRP LedgerのクライアントライブラリはJavaScriptやPythonなどに対応したクライアントライブラリが存在します。 今回はJavaScriptを使っていきます。

✅ Node.jsをインストールする​

こちらのページを参考にNode.jsをインストールしてください。

インストール済みの方はスキップしてください。

🔧 コードを作成する​

お好きな場所にプロジェクト用のディレクトリを作成します。

  1. npm initでpackage.jsonファイルを作成します。
  2. npm install xumm xrplを実行しxummとxrplの2つのパッケージをインストールします。

xummはその名の通りXummアプリと接続するために必要となるパッケージです。 https://www.npmjs.com/package/xumm

xrplはXRP Ledgerと接続が可能なパッケージです。今回はXRP Ledgerとの接続部分はxummを使用し、xrplではユーティリティメソッドのみ使用します。 https://www.npmjs.com/package/xrpl

  1. index.jsファイルを作成し、以下のコードを入力します。 api-keyとapi-secretはlesson-2でXumm Developer Consoleから取得したものに置き換えてください。 URIにはIPFSのURIを指定します。メタデータのJSONファイルであることが望ましいですが、ここでは画像のURIで構いません。

    IPFSについてはIPFSってなんだろう、IPFSに画像をアップロードする方法についてはIPFSを使ってみよう！をご覧ください！

const { Xumm } = require('xumm');
const { convertStringToHex, NFTokenMintFlags } = require('xrpl');

const xumm = new Xumm('api-key', 'api-secret');
const transaction = {
  TransactionType: 'NFTokenMint',
  NFTokenTaxon: 0,
  Flags: NFTokenMintFlags.tfTransferable,
  TransferFee: 10 * 1000, // 10%
  URI: convertStringToHex('ipfs://***'),
};
xumm.payload?.create(transaction).then(payload=>{
  console.log(payload);
});
  • コードの説明
  1. Xummへアクセスするためのインスタンスを作成します。
const xumm = new Xumm('api-key', 'api-secret');
  1. NFTをミントするためのNFTokenMintトランザクションの指定とNFTの情報を指定します。
const transaction = {
  TransactionType: 'NFTokenMint',
  NFTokenTaxon: 0,
  Flags: NFTokenMintFlags.tfTransferable,
  TransferFee: 10 * 1000, // 10%
  URI: convertStringToHex('ipfs://***'),
};
  • TransactionType: トランザクションの種類を指定します。今回はNFTをミントするためにNFTokenMintを指定します。
  • NFTokenTaxon: NFTのコレクションの識別IDを指定します。今回は0を指定します。
  • Flags: NFTの特性を指定します。今回はtfTransferableを指定します。tfTransferableを指定することでNFTを他のアドレスに送信することが可能になります。他にも発行者によるバーンを許可するtfBurnableやNFTの売買をXRPのみに制限するtfOnlyXRPが存在し、複数のフラグを指定することも可能です。
  • TransferFee: NFTのロイヤリティを指定します。今回は10％を指定しています。FlagsにtfTransferableを指定している場合のみ有効です。
  • URI: NFTのメタデータを指定します。今回はIPFSのURIを指定しています。URIフィールドにはHEX値を指定する必要があるため、URIの文字列をxrplが提供するconvertStringToHexメソッドで16進数値へ変換します。

NFTokenMintトランザクションの詳細はドキュメントをご覧ください！

  1. トランザクション情報からXummで利用可能なペイロードを取得します。
xumm.payload?.create(transaction).then(payload=>{
  console.log(payload);
});

トランザクション情報が間違っている場合はpayloadはnullになります。

🏃 コードを実行する​

node index.jsでコードの実行を行います。 コードが正しければ以下のような情報が出力されます。

{
  uuid: '85a6b00d-066a-43d5-9ef4-f52a0f85aed2',
  next: {
    always: 'https://xumm.app/sign/85a6b00d-066a-43d5-9ef4-f52a0f85aed2'
  },
  refs: {
    qr_png: 'https://xumm.app/sign/85a6b00d-066a-43d5-9ef4-f52a0f85aed2_q.png',
    qr_matrix: 'https://xumm.app/sign/85a6b00d-066a-43d5-9ef4-f52a0f85aed2_q.json',
    qr_uri_quality_opts: [ 'm', 'q', 'h' ],
    websocket_status: 'wss://xumm.app/sign/85a6b00d-066a-43d5-9ef4-f52a0f85aed2'
  },
  pushed: false
}

alwaysフィールドのurl(上記の例ではhttps://xumm.app/sign/85a6b00d-066a-43d5-9ef4-f52a0f85aed2)にアクセスすることで表示されるQRコードをXummアプリから読み取ることでトランザクションに署名することができます✨

🔎 NFTを確認する​

次のTestnet NFT Explorerページからアカウントのアドレスを入力し検索することで発行したNFTを確認することができます！

https://test.bithomp.com/nft-explorer

フラグやURIなどを変更して複数のNFTを発行してみましょう！

🙋‍♂️ 質問する​

ここまでの作業で何かわからないことがある場合は、Discordの#xrplで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット

完了したら次のセクションへ進みましょう 🎉