クリエイターがHashlipsを使ってmintジェネレイティブNFTを作る

ninja Valentine (higekuma.com)

完成物はこれ↑

あのPixel Heroes X (pixelheroes-x.jp) にも使用されている。

【使うもの】

HashLips (HashLips) · GitHub ←今回一番重要なやつ このフォルダたちを使う。

Remix – Ethereum IDE  ←Solidityの統合ソフト。3Dでいうbrenderみたいな。なんでも屋さん。

Visual Studio Code – Code Editing. Redefined ←codeのなんでも屋さん。どんな言語もいける。

Node.js (nodejs.org) ←③VSに欠かせないやつ。npm とかに関係ある(多分)

OpenSea, the largest NFT marketplace ←NFT取引所。NFTクリエイターおなじみ。

Pinata | Your Home for NFT Media ←IPFS。1Gまで無料。サーバーとして使える。

MetaMask – Chrome ウェブストア (google.com) ←WEB3お財布。

Hashlips とは?

art_engine⇒contract⇒minting_dappの順で使う。

1.hashlips_art_engine  ジェネレ―ティブNFTを生成できる

2.hashlips_nft_contract  solidityファイルが入っててremixにコピペするとコントラクトできる

3.hashlips_nft_minting_dapp コントラクトとAPIを貼ると完成物サイトができる。すごい

How to create an NFT collection – Ultimate guide

↑やり方はこの動画に全部書いてある。

「英語無理!?」 歯車から字幕⇒自動翻訳⇒日本語でOK。

【割時間↓】

最初 art engineジェネレ―ティブのジェネレ―ティブ部分を作る。

1時間5分あたりから remixで コントラクト方法

2時間6分あたりから mintting dapps HPに繋げる方法

Art engine&contractの使い方はこれを見よ!

(保存版)10,000種類のジェネレイティブNFTの作り方|ユウキ|note

ユウキ(yuki)さん (@stand_english) / Twitter

動画見るよりわかりやすい。

一部非表示の作り方とか端折ってる。 ⇒54分~56分あたりの動画を見る。

画像

↑超簡単な素体を作るだけという意味ではすぐ実装できた。 art_engineのところはさほど詰まりにくい。

ちゃんとつくって寺子屋学生証ジェネレイティブやりたい。

Art_Engineで詰まったところ

主に、VScoredやnodeの使い方である。

nodeのダウンロード方法端折られているから書くが

Node.js (nodejs.org) から 左側のバージョンを選んで落とす。

VScordで art_engineを開いた状態で ターミナル(ctr+@)を開き

nmp install    と打ち込むと出来る。

新しいバージョンを入れたらエラー出て大変だった。

画像

nodeよくおかしくなるのでしょっちゅうアンインストールして入れなおしている。

きっともっと上達すればアンインストールしなくてもすむのかもしれない。

pinataにimageをアップして、json書き替えて、jsonもpinataにアップし終わったら。

contract しよう Remix

まだまだyuukiさんの記事をみれば進められるので簡単に。

hashlips_nft_contract の simple NFT_flat というのをコピペする。

1235行から書き替えよう!とあるのでそうする。

contract 名 is の 名の部分を替える。

何故!?と思う人は↓solidityの公式ドキュメントを読む。

Introduction to Smart Contracts — Solidity 0.5.4 ドキュメント (solidity-jp.readthedocs.io)

【要注意】 1244行目の revealed がtrueになっていないと画像が表示できない。

画像

paused をtrueにすると、販売が出来なくなる機能だったと思う。

なので、うっかりしていた。

revealedは非表示画像を設定できるやつ。 

動画の55分あたりのやつ……。orz

いやいや、なんで、これデフォルトでfalseになってんの!?

Trueにしたらさ、非表示になるとさ!思うじゃんね?

yuukiさんの記事を参考にしていたら多分これ躓かないので大丈夫です。

syouさんにコード見てもらわなければ一生分かりませんでした……。感謝。

あとは、デプロイするときの_INITBASEURI:

ここは普通にjsonファイルを置いたhttps://サーバーでも大丈夫。

ブロガーさんは、自前サーバーでもおk。

ここまでできていればこんな感じで反映される。

サイトにコントラクトを反映させる

ここから先はググってもでてこなかった。

nft_mintting_dappの使い方だ。

VScordで開き、 public⇒config⇒config.jsonを開く。

ここにコントラクトアドレスと scanlinkとあるので remixのdeplyedから コントラクトアドレスを

コピーして張り替える。

config.json の 5行目 polygon ・eatherが選べる それに伴いSymbol、ID(1)も変更。

NFT_NAME:コレクションの名前

SYMBOL:省略名

WEI COST:ミントにかかる価格

DISPLAY_COST:サイト上に表示されている価格 

WEI=DISPLAYが異なると大変なことになる。

こんな風に😢 
そしてコントラクトに送られてしまう設定になってて、ウォレットに売り上げが入らないんだけどどこへ?という疑問……未解決。

*Displayだけ3に変更 WEIは初期値。

Opensealinkにはコレクションのopneseaを貼り

Showbackgroundはこの透けてる背景を表示するかどうかである。

それからconfigのabi.json この中身は全部消して

remixのcopileのところのした ABIを押してコピーしたものを貼る。

それとindex.htmlの25行目<titile>ここの部分</titile> 26行の content=”ここの部分 “

を入れ替える。

サイトの見た目部を変更するのはこの辺。

bg⇒背景の透過画像

gif⇒サンプルのgif 左右になってるけど一つ作れば勝手に反転されるのでNFTを使って作る

logo⇒上に表示されるlogo

favicon以外は普通にminttingフォルダを開いて⇒imageを開いて

お絵かきソフトで該当するpngを開いて上書きしてしまうのが早い。

gifも作ったら入れて元のやつを消しておけばおk。

favicon.icoの厄介な点は「.ico」って何? ⇒アイコン

これは.bmpファイルで64×64 で保存したのち、拡張子だけ.icoにすればおk。

manifest.jsonにて”short_name” と”name”の中身 ”NCC” ”Coder Clone NFT”の部分を書き替える。

jsonが

”A”:”B”  AはB という書き方をする。ので””は消さないよう注意。

特定商取引法対策: App.jsを変更 消します 協力:NFTお寿司職人さん

特定商取引法についての記載をいれます。

bg.png ⇒バックグラウンドファイルにこのように表示を記載します

↓NFTお寿司職人さんのジェネレイティブ

真ん中の文字がどうしても被るのでApp.jsで変更します(サーバーアップ後(build後)では変更できないので注意!

実装!

まずはターミナルで npm installする。

うんおk

次に npm run start

ローカルページに繋いでくれる。

ここでメタマスクをコネクトしてミント出来るかどうかを試すのだが。

失敗すると

画像

ABIの張り替えをやってないとこんな感じで失敗するのでやる。

最後にターミナルで npm run build

をするとbuildファイルが出来るので。

そのbuildファイルごとpinataにぶち込むもしくはサーバーにアップロードすると。

ninja Valentine (higekuma.com)

こんなかんじでページが完成するのである。

ちなみに 1 ETH = 1000000000000000000 Wei.

1000京(兆の上の単位)かな……。

これ標準だと5%↓hashlipsに送るになってるの売り上げをなのかな!

コントラクトのwithdraw が引き上げるという意味だったので多分ここから売り上げ回収できそうです!よかった!

コメント

タイトルとURLをコピーしました