はじめに

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

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

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

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

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

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

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

Proof of DONUTSはコチラ

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

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

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

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

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

➁この3つのファイルを同じディレクトリに並べます。

➂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へアップロードしておく（フォルダごとアップロードします）。

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

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

★コチラの画像の場合では…

QmfEMBeAiKYNjVdQb6r9CT8eHwmszTNpzWL4pkF1SdFsk1をコピー

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

→今回の場合では、

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

➃Hiddenプロパティの設定

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

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

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

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

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