NFTの作り方 プロダクト紹介

【変化するNFT】絵柄の変化するNFTの作り方(HTML編)

はじめに

いつものようにNFTを発行していたときのこと。

「時刻や日付に応じて見た目が変化したり、開くたびにランダムにテキストや見た目が変化するNFTを作ってみたい!」と思いました。

と言っても、Solidity を扱えるわけではないので…。非コントラクトで、そうした変化を実現するしか手立てはありません。a

ここでは、Solidity は扱えないけれども、HTML CSS Javascript なら何とかなりそう。そんな方に向けた作り方の解説です。

実際に私が制作した、「レシートのNFT」をベースに説明を進めます。


「レシートのNFT」とは…?

私が制作したキャラクター「ドーナツ部長」の購入者に配布される、レシートのようなもの。取引証明書ですが、ロールの付与や投票権として機能するなど、使い道は色々です。

Proof of DONUTSはコチラ

クリックすると、部長に関する豆知識が次々と表示される仕組みです。

では、早速作り方へと進んでいきましょう!

➀必要な3点セットを下記リポジトリからダウンロードしてください。

※manifoldで発行する場合には、下記の3セットのみでOKです。

・index.html
・scripts.js
・styles.css

➁この3つのファイルを同じディレクトリに並べます。
スクリーンショット 2023-02-16 9.46.06.png
➂3つのファイルが用意できたら…

下記ページに従って、manifold上での作業を進めます。
 
【manifoldでHTMLをMINTする方法】
https://docs.manifold.xyz/v/manifold-studio/tutorials/minting-html-pages

・index.html
・scripts.js
・styles.css

この3点セットを格納したフォルダを、pinataなどのIPFSへアップロードしておく(フォルダごとアップロードします)。

スクリーンショット 2023-02-16 9.57.46.png

pinataにアップロードが完了すると、「CID」が発行されます。このCIDをコピーして、下記のようにURLを作成します。

[https://gateway.pinata.cloud/ipfs/***[CID]***/]

★コチラの画像の場合では…
スクリーンショット 2023-02-16 10.02.50.png

QmfEMBeAiKYNjVdQb6r9CT8eHwmszTNpzWL4pkF1SdFsk1をコピー

[https://gateway.pinata.cloud/ipfs/***[CID]***/] 形式にしたいので、[CID] の部分に、先ほどのコピーしたCIDを貼り付ける

→今回の場合では、

https://gateway.pinata.cloud/ipfs/QmfEMBeAiKYNjVdQb6r9CT8eHwmszTNpzWL4pkF1SdFsk1/

このURLを次の工程で使用します。

➃Hiddenプロパティの設定

manifoldで設定できる「プロパティ」で、Hiddenプロパティ を設定します。

作成するプロパティは2つです。

animation_url という属性名
設定する値は、ポイント①で作成した[https://gateway.pinata.cloud/ipfs/***[CID]***/] 形式のURL

animation_details という属性名
設定する値は、{ "format": "HTML" } 

これで、HTMLページをNFTとして表示可能となります。

スクリーンショット 2023-02-16 10.06.13.png
コインチェック
ぬるぺでぃあ

A. Miura

通称「みうらドーナツ」。本業はRPA/DX系のSEであり、ねじねじドーナツ部長の作者でもある。大好きなドーナツにハマってしまい、ドーナツとの共同生活を送っている「部長」さんの日常をNFT化する日々を送る。

「ぬるぺでぃあ」の更新通知を受け取ろう!

下記「購読」ボタンより、このブログの更新情報を受け取ることができます。(※「購読」と書かれていますが、無料で利用可能です。また購読には、メールアドレスの入力が必要ですが、入力いただいたメールアドレスは、更新情報の通知の目的以外には使用しません)

-NFTの作り方, プロダクト紹介