web3アプリ開発（thirdweb+Bubble簡易導入ハンズオン）

Stable Diffisionは自身のPCに導入も可能ですが、今回は簡単に作成できる範囲として、オンラインのプレイグラウンドを活用します。

真ん中らへんにある[Enter your prompt]に好きな単語を入れて、[Generate image]を選択してください。

数秒たつと単語に基づいて画像を自動生成してくれます。

生成された画像を右クリックでファイル名をつけてローカルで保存してください。ハンズオンのNFTとして利用します。

Stable Diffusionやってみるとキーワードが呪文のようで、高レベルな呪文詠唱を使いたいけれども、なかなか使えないというお悩みの召喚士の方々がいます。高レベルの呪文詠唱者をまとめたサイトがあるので、ぜひこちらも参照してみてください。

画狂老人AIさん　の呪文詠唱
beautiful concept art illustration of a one beautiful kawaii girl in fluttery white dress with wavy hair,symmetrical perfect face fine detail delicate features quiet gaze,a beautiful full body illustration,beautiful europian building background,High-angle shot by void/Re:era and wlop and makotoshinkai and greg rutkowski and krenz cushart and KanLiu and rossdraws and void/Re:era and @ribao_bbb and modare,atmospheric lighting,volumetric lighting,sdorica,reduce saturation,pretty-small-face,fine detailed face,Twice,volumetric top lighting,big kawii eye,bold line painting,soft shadow,kawaii girl,4k,8k,trending artstation,pixiv ranking 1st

Muaccaさん　の呪文詠唱(改)
extremely detailed CG unity 8k wallpaper of a girl with pink long wavy hairstyle and white marble glowing skin and perfect symmetrical pretty face with blush cheeks, huge_breasts from azur_lane, wearing fantasic dress with many frills, standing in the baroque architecture, art by krenz cushart and violet_evergarden, golden hour lighting, strong rim light, intense shadows, taken by Canon EOS, SIGMA Art Lens 35mm F1.4, ISO 200 Shutter Speed 2000

アニメ風の女の子 呪文詠唱
beautiful concept art,Highly rated, highly detailed ,trending on artstation,high resolution,8K,sharp focus, very detailed, volumetric light, fine art, epic fantasy art, very colorful, Hyper realistic, high contrast,japanese anime maid girl,long skirt,black and long hair,face,glossy eyes,silk costume,cosplay,full body portrait,pixiv fanbox,anime,perfect lighting,fantasy,beautiful,Unreal Engine,by kyoto animation,miyazaki hayao,intricate, elegant, highly detailed, digital painting, artstation, concept art, smooth

水着の女性イラスト 呪文詠唱
Anime key visual of a beautiful young female in a swimsuit, stunning, highly detailed, digital painting, artstation, smooth, hard focus, illustration, art by artgerm and greg rutkowski and alphonse mucha

サイバーパンクな風景 呪文詠唱
Cyberpunk world war 3, cinematic composition, a fantasy digital painting by greg rutkowski and james gurney, trending on artstation, highly detailed, hyperrealistic, realistic, photorealistic, dynamic lighting, highly detailed, cinematic landscape, studio landscape, studio lighting

妖精の村 呪文詠唱
Silver fairies home madeup of flowers, magical world, by greg rutkowski, sung choi, photo realistic, 8 k, cinematic lighting, hd, atmospheric, hyperdetailed, trending on artstation, devainart, digital painting, glow effect

今回はMubai Faucetを利用して、MATIC Tokenを取得します。以下のリンクに移動します。

TokenのTransferの確認画面が出ますので、Confirmを押します。

無事リクエストが承認されました。

TIPS（MetaMaskへのネットワーク追加）

MetaMaskにネットワークを追加するには、Chainlistにアクセスするのが最も簡単な方法の一つです。

ネットワークを追加したいアカウントでMetaMaskを接続します。
テストネットを利用する場合は、[include Testnets]にチェックを入れます。
ネットワークが多数でてくるので、必要なキーワードで検索してみます。（例. polygon）
[Add to Metamask]を選択すればネットワークが追加されます。

thirdweb概要

thirdwebは、ローコードでブロックチェーンのコントラクトをデプロイできるサービスです。
作成したコントラクトは独自コントラクトとなり、発酵した自分自身がownerとなります。
thirdwebでは、NFTに必要なmetadataのIPFSへのアップロード機能も提供されています。

thirdwebメニュー概要

thirdwebにアクセスします。

[Start Building]を選択します。※2月28日時点で変更されていたので最新版の画面に差し替えました。

[Next]を選択します。

[Connect Wallet]で[MetaMask]を選択します。

Dashboard画面に遷移します。
[View contracts]では、既存のコントラクトのメニューに遷移します。

[Contracts]は既存のコントラクト状況が表示されます。（上記 [View contracts]と同じ遷移先）

[Programs]では、Solanaのウォレットを接続して、開発プログラムを管理するために利用します。

ストレージ保管先として、thirdwebが管理しているIPFSにファイルを保管することも可能です。

RPC（Remote Procedure Call）は、関数呼び出しをローカルではなく、別の環境に接続して変わりに実行しようというものになります。各チェーンの関数呼び出しを行う際の接続先のRPC URLが以下に指定されています。

thirdwebを利用してブロックチェーンにデプロイします。「NFTDrop」のコントラクトを利用してデプロイします。NFTDropはERC721のコントラクトです。

[Home]から[Browse contracts]を選択します。

[Explore]から[NFT Drop]を選択します。

[Deploy now]を選択します。[Functions][Event][Code][Sources]にて実際に定義されているコードを確認することができます。

NFT Drop コントラクトは、 ERC721A Standardを使用して独自の NFT のコレクションをリリースする場合に最適です。

ユーザーがドロップから NFT を請求できるタイミングと方法を定義する一連の請求フェーズと呼ばれる一連の条件を定義できます。許可リスト、リリース日、請求制限、公開の遅れなど。

ドロップ コントラクトに NFT を追加しても、この時点では作成されません。他のウォレットがそれらを作成できるように、それらを遅延作成してユーザーのためにすべてを準備します

OpenSea クリエイターの収益をサポート

OpenSea でのクリエイターの収益の仕組みは次のとおりです。このコントラクトは、デフォルトで OpenSea クリエイターの収益をサポートします。このサポートは、デプロイ後にコントラクト エクスプローラーを使用して呼び出すことにより、コントラクト管理者がオンとオフを切り替えることができますsetOperatorRestriction。

ユースケースと例

NFT Drop コントラクトを使用して、次のことができます。

• 各 NFT が異なる特性の組み合わせを持つ PFP コレクションをリリースする
• アートワークの NFT をリリースし、コミュニティに有料で鋳造してもらいます
• 指定されたリストのウォレットのみが NFT を請求できる、アクセス制限付きの NFT ドロップを作成します。

NFTDropの場合、ユーザーがMINTできるのは番号順となり、任意のNFTを選んでMINTすることができません。ユーザーが欲しいものを購入する場合は、MarketPlaceコントラクトを活用する必要があります。

以下の項目を設定して、[Deply Now]を選択します。

• Image：必要に応じてアイコンを設定します。（サンプルファイル）
• Name：コントラクト名（例. MyNFTApp）
• Symbol：ショートネーム名（例. MNA）
• Description：コントラクトの概要（例. NFT drop application）
• Payout Settings：このコントラクトによって発生した資金がどこに流れるか
  • Primary Sales：資産の初期販売による収益を受け取るアドレス
    • Recipient Address：受け取りアドレス
    • Percentage：比率
  • Royalties：資産の二次販売によって得られたロイヤリティの収入を受け取るべきアドレス
    • Recipient Address：受け取りアドレス
    • Percentage：比率
• Platform fees：このコントラクトで発生したすべてのプライマリセールスに対して追加料金を取得（このコントラクトをサードパーティに展開し、サービスに対する手数料を取りたい場合に便利）
  • Recipient Address：受け取りアドレス
  • Percentage：比率
• Network / Chain：展開するネットワークを選択します（例. Mumbai (MATIC)）
• [Add to dashboard so I can find it in the list of my contracts at /dashboard]デフォルトでチェックがついており、dashboardに表示されるようになります

コントラクトを発行するためのGas代が課金されますので、[確認]を選択します。

Dashboardに追加するため[署名]を選択します。Gas代はThirdweb側で支払っているようです。

以下の通り、コントラクトが生成されました。

コントラクトの流れ（詳細版）

ブロックチェーンの世界で何が行われたのかを紐解いて見てみます。

1. Deploy contract

Deploy ContraceでMetaMaskから呼び出されているコントラクトは、以下です。
Contract：0x5DBC7B840baa9daBcBe9D2492E45D7244B54A2A0

From：0xc46Ab5BbEE8Daf21118fc7ACA524829c9F637c57からが今回のトランザクションです。

私の個人アドレスからContract：0x5DBC7B840baa9daBcBe9D2492E45D7244B54A2A0が呼び出されているのがわかります。

Contract：0x5DBC7B840baa9daBcBe9D2492E45D7244B54A2A0におけるDeploy Proxy By Implementationにて、今回のMyNFTAppのコントラクト：0xdB24AAbC124550cD0454D1B9B9710bD471386A9fが作成されている流れがわかります。

thirdwebのdrop NFTのMyNFTAppコントラクト作成するにあたり、実行した機能やデータ群の流れを追うことができます。

今回作成されたMyNFTAppのContract：0xdB24AAbC124550cD0454D1B9B9710bD471386A9fを見てみましょう。まだ一度もコントラクトを呼び出されていないので何もエントリーがありません。

本コントラクトを生成した際のInternalのトランザクションが表示されています。

ERC-20 Token関連のトランザクションの場合は、こちらに表示されます。NFTはERC721なので特に何も表示されていません。

コントラクトに含まれているソースコードを確認することができます。

先ほどと同様に生成時のログが表示されています。

コントラクトの管理画面について説明します。今回は事前に作成したNFT dropのコントラクトをベースに紹介していきます。4つのNFTを事前にMintしています。

thirdwebのDashboardでは、NFTの状況、イベント、パーミションが表示されています。

[Explorer]からは直接コントラクトの機能を実行できます。

[Explorer]→[Read]からは基本的に現状の状況が確認できます。

本コントラクトで実行されたイベントが表示されます。

1. Initialized・・・本コントラクトの作成処理
2. TokensLazyMinted（単数）・・・NFT1件Mint
3. TokensLazyMinted（複数）・・・NFT3件まとめてMint
4. ClaimConditionsUpdated・・・NFTの販売設定
5. TokensClaimed / Transfer・・・NFTのオーナー付与（1件処理）
6. TokensClaimed / Transfer・・・NFTのオーナー付与（2件同じブロックで処理）

[NFTs]→[Claim]にてNFTのClaim処理（オーナー付与）ができます。
[Single Upload]にて新規NFTを1つMintできます。
[Batch Upload]にて複数NFTをまとめてMintできます。

[Claim Conditions]では、NFTの販売設定をします。後続で設定するので、ここでは説明を割愛します。

[Permissions]では、本コントラクトの管理者（Admin）、NFTのMinter/Creatorを設定できます。
[Transfer]では、本コントラクトで発行したNFTを移譲可能か不可か設定できます。

[Embed]では、本コントラクトを組み込むためのiframeコードを出力できます。

[Code]では、実際に各プログラミング言語から本コントラクトと機能を呼び出すためのコード例が紹介されています。

[Settings]では、初期設定時に設定したメタデータや受け取りアドレスを変更できます。

[Sources]では、本コントラクトのソースコードを確認できます。

NFTはどのように格納されているか

[Events]→[TokensLazyMinted]のトランザクションをみてみるとどのようにファイルが生成されているかを確認することができます。

単数のNFTをMintしたときのipfs先のファイルを見てみます。
Thirdwebでは、IPFSに対応していないWebブラウザでもipfsファイルを確認できるようにGatewayが用意されています。
Gateway URL: https://gateway.ipfscdn.io/ipfs/[cid]

IPFSのファイルが以下のように管理されています。

前回紹介したとおり、メタデータが保管されています。

[image]先を確認すると生成したNFTのイメージを確認できます。

続いて、3つのNFTを同時にMintした際のipfs先のファイルを確認してみます。

以下のように、同一のリンク先に3つのファイルが登録されていることがわかります。

それぞれメタデータで保管されていることが確認できます。

NFT画像・メタデータ登録

NFTが参照するURLにメタデータと画像をアップロードします。販売期間を設定することで、自分以外のユーザーがMINTできるようにコントラクトのデータをセットアップします。

[NFTs]→[Single Upload]を選択します。

以下、NFTの項目を設定して、[Lazy Mint NFT]を選択します。

• Name: NFTの名前（例. MyNFT_001）
• Media：NFTの実態ファイル
• Description：NFTの概要説明
• Properties：プロパティを定義する場合は追記
• Background Color：OPENSEAの背景色を定義する場合は入力
• External URL：NFTに外部URLへのリンクを埋め込む場合は入力

Walletが起動して、MintのGas代が発生するので、[確認]を選択してトランザクションを発行します。

NFTがアップロードされました。

この段階では、Owner：ゼロアドレスとなっており、誰かにNFTが付与されるまでは、TransferもBurnも実行できません。

続けて複数のNFTをアップロードする手順です。[Batch Upload]を選択します。
以下の画面の通り、csvファイルで定義したリストファイルと実物をフォルダ構造にしてアップロードしましょうと出てきます。

以下のように、適当なフォルダを作成してみました。

CSVファイルは以下のように定義しています。（例. 今回はname, description, imageのみの最小限）

上記フォルダをアップロードすると問題なければ以下のようにUploadしたいNFTが表示されます。

[Reveal upon mint]は、すぐにMintします。

Walletが起動して、MintのGas代が発生するので、[確認]を選択してトランザクションを発行します。

正常にアップロードされていることを確認します。

ここでは、[Batch Upload]で[Delayed Upload]を選択した場合の動きについても説明します。
新規に、4ファイルをアップロードしています。

[Delayed Reveal]を選択します。これはあるタイミングでNFTを一斉表示させる機能です。
事前に多数のユーザーに配布しており、リリースのタイミングで一斉表示させることが可能となります。
以下を入力して、[Upload xx NFTs]を選択します。

• Password：表示させる際に入力するパスワード
• Placeholder Image：表示させるまでの仮の画像
• Placeholder Name：表示させるまでの仮の名前
• Placeholder Description：表示させるまでの仮の概要説明

Walletが起動して、MintのGas代が発生するので、[確認]を選択してトランザクションを発行します。

仮の画像や名前、概要が表示されています。

[Reveal NFTs]からPasswordを入力して、[Reveal NFTs]を選択します。

Walletが起動して、RevealのGas代が発生するので、[確認]を選択してトランザクションを発行します。

仮の情報がすべて表示されるようになりました。

NFTの販売設定

次に販売条件（Claim Conditions）を設定していきます。これを設定しないと、ユーザーがMINTすることができません。

[Claim Conditions]→[Add Initial Claim Phase]を選択します。

以下、条件を設定していきます。今回はデフォルトの設定で[Save Claim Phases]を選択します。

• Name：Phase名
• When will this phase start?：いつからスタートするか
• How many NFTs will you drop in this phase?：何枚NFTを販売するか
• How much do you want to charge to claim each NFT?：いくらでNFTをはんんバイするか
• What currency do you want to use?：どの通貨（トークン）で販売するか
• Who can claim NFTs during this phase?：だれ（ウォレット）が購入することができるか（※特定のウォレット指定可能）
• How many NFTs can be claimed per wallet?：1つのウォレットに対して、何個のNFTを請求できるか

Walletが起動して、Claim Condition設定のGas代が発生するので、[確認]を選択してトランザクションを発行します。

実際のNFTプロジェクトでは、ホワイトリストやプレミンとといった段階的なNFTリリースを実施しています。ClaimPhase機能を利用するとPREMINTといった他のサイトを利用することがなく、thirdweb発行のコントラクトで、段階的な販売条件をくむことができます。

[Claim Eligiblity]では、設定したClaim Phaseの設定が永続的にリセットすることができます。
例えば、購入数量の制限をかけていたものを解除するときに使います。

PREMINTは、NFTアクセスリスト作成支援ツールで、リストに参加させるユーザーの要件を設定できます。
Botを排除して、実際のコレクターでリストを埋めることができます。

• ウォレット内のETHの最小金額
• Twitter認証
• 特定のNFTの所有
• パスワード
• Discordへの参加、特定のロールの所持 など

ユーザーがMINTできるUIを作ります。ブロックチェーンと接続します。Bubbleを用いてできる限りローコードでフロントエンドを開発します。thirdwebのSDKを用いることで、ブロックチェーンとの接続のコストを下げた実装を実現します。

Bubble概要

Bubble（バブル）とは、ドラッグ&ドロップで高度なWebアプリを開発できるツールで、世界的に最も人気のあるノーコード開発ツールの1つです。

• 高度なWebアプリを開発可能
• 開発費用を安く抑えられる
• 開発速度も短縮できる

ノーコードツールBubbleのメリットは主に以下の4つです。

• コードを書かずに開発可能
• 環境構築が不要
• デザインの自由度が高い
• プラグインによる高度な機能も実装可能

ノーコードツールBubbleのデメリットは主に以下の4つです。

• 操作画面やサポートがすべて英語
• 日本語の情報が少ない
• 初心者には難易度が高い
• アプリの読み込み速度が少し遅い

Free版ではテスト開発しかできない、API連携の確認ができない、ストレージ容量が小さい等の制約があります。

Bubbleアカウント作成

Bubbleのホームページに遷移します。[Get started for free]を選択します。

Googleアカウントで連携するか、メールアドレスとパスワードを入力して新規アカウントを作成します。

[BUILD]を選択します。

最初のみアンケートを求められるので、適当に選択します。
あなたの経験として当てはまるものを選択

あなたの経歴としてあてはまるものを選択

Bubbleについてどこで知ったのか

[Begin demo]を押すと簡単な使い方の説明が始まります。今回は割愛して、早速アプリを開発していきます。

Bubbleアプリ開発

[Create a new app]に今回作成するアプリケーションのプログラム名を入力します。（参照. MyNFTApp）

アプリケーション・アシスタントに沿って入力していきます。[Next Step]を選択します。

日本語フォントに対応した[Noto Sans JP]をここでは選択します。

好みに応じてデフォルトのカラーを設定します。今回はそのままにしています。

必要に応じてプラグインを追加インストールします。今回は特に何も追加せず、[Get started building]を選択します。

Webアプリケーションのindexページの開発画面が立ち上がります。

最初の画面サイズを設定します。今回はデフォルト設定とします。

ノーコードで開発を効率的に進めることができるようにComponent Libraryから必要なコンポーネントをドラッグ＆ドロップで配置していくことが可能です。

thirdwebのアプリを組み込んでいきます。[Design]→[HTML]をドラッグ&ドロップで右側に1つ作成します。

thirdwebに戻って[Embed]→[Embed Code]から[Copy to clipboard]を選択します。

bubbleの[Appearance]にコピーしたコードをペーストします。

[Layout]にてコンポーネントのサイズを設定します。今回は600px x 600pxで設定しています。
Width（幅）600px
Height（高さ）600px
X：横軸ポジション 0
Y：縦軸ポジション 0

右上の[Preview]を選択すると、thirdwebのアプリが組み込まれたことを確認できます。

[Connect Wallet]で購入したいウォレットと接続します。

Mint（Free）を選択すると、ClaimのGas代の画面が立ち上がりますので、[確認]を選択します。

[Successfully minted.]が表示されると無事Mintされます。

thirdweb上でOWNERのアドレスが更新されていることが確認できます。

トランザクションを確認すると[TokensClaimed][Transfer]の処理が実行されたことが確認できます。

OpenSeaのテストネットにアクセスして、所有されているか確認します。

https://testnets.opensea.io/ja

[アカウント]マークを選択します。

MINTしたウォレットに接続します。

以下の通り、NFTが保有された状態となっていることが確認できます。

thirdwebによって作成したコントラクトを用いてMintされたことが確認できます。

Node.jsを導入します。Node.jsは、JavaScript実行環境になります。

JavaScriptはChromeやFirefoxといった「ブラウザ上」で動作するプログラミング言語です。
対してPythonやRubyのような一般的なプログラミング言語は通常「パソコン上」で動作します。

違いは、OSの機能に直接アクセスできるかどうかです。

ブラウザ上で動作するプログラムがOSの機能へアクセスできてしまうと、サイトにアクセスしただけで勝手にパソコン上のファイルを読み書きされたり、削除されたりして、ユーザーにとっては嬉しくないため、ブラウザが限定的にOSの機能へのアクセスを仲介する形となっています。（例. Web会議でカメラやマイクへのアクセスを仲介）

一方で、パソコン上で動作するアプリケーションはOSの機能にアクセスできます。ブラウザ上で動作していたときはできなかった自由なファイルの読み書きやネットワーク通信等の機能が使えるようになります。

Windows環境は以下を参考に設定してください。

Mac環境は以下を参考に設定してください。Homebrewによる導入が管理しやすくおすすめです。

続いて、サンプルを利用するソフトを管理するツールであるyarnを導入します。

yarnやnpmは、Node.jsで動作するパッケージマネージャです。例えば、1000個のプログラムでできているフレームワークをインストールするとして、必要なぷｒグラムを全て手作業でサーバの適切な場所にコピーして、バージョンを管理していくのは現実的ではないので、このようなパッケージ管理ツールを用いて効率的な開発を実現しています。

yarnは、2016年にFacebookが公開し、npmとも互換性のあるパッケージマネージャです。
yarnのメリットとして、以下が挙げられます。

• npmよりインストールが高速
• npmよりも厳密にモジュールのバージョンを固定できる
  • yarn.lockファイルで、各パッケージのインストールバージョンを固定できる
• npmと一緒に使える
  • npmと同じpackage.jsonが使えるため、同一プロジェクトでnpm or yarnで固定しなくてよい

yarnのインストール手順は、以下を参考に設定してください。

Reactとnext.jsを用いたアプリケーションを開発してみます。新規プロジェクトのテンプレートがthirdwebにて用意されているので、こちらを利用します。

Macの場合はterminal、Windowsの場合はコマンドプロンプトを立ち上げて、アプリケーションを開発するフォルダを作成して、遷移してください。（例. ここではnodejsフォルダを作成して、その配下にアプリケーションを開発します。）

フォルダ配下で、以下のコマンドを実行します。

npx thirdweb create app

コマンドが正常に実行されると以下のプロンプトが表示されます。

• What is your project named? … thirdweb-ipfs-app （プロジェクトネーム）
• Which blockchain do you want to use? › EVM（どのブロックチェーンを使う、EVM/Solana）
• What framework do you want to use? › Next.js（どのフレームワークを使う、Next.js/Creatte React App/Vite/React Native/Node.js/Express）
• What language do you want to use? › TypeScript（JavaScript/TypeScript）

    $$\     $$\       $$\                 $$\                         $$\
    $$ |    $$ |      \__|                $$ |                        $$ |
  $$$$$$\   $$$$$$$\  $$\  $$$$$$\   $$$$$$$ |$$\  $$\  $$\  $$$$$$\  $$$$$$$\
  \_$$  _|  $$  __$$\ $$ |$$  __$$\ $$  __$$ |$$ | $$ | $$ |$$  __$$\ $$  __$$\
    $$ |    $$ |  $$ |$$ |$$ |  \__|$$ /  $$ |$$ | $$ | $$ |$$$$$$$$ |$$ |  $$ |
    $$ |$$\ $$ |  $$ |$$ |$$ |      $$ |  $$ |$$ | $$ | $$ |$$   ____|$$ |  $$ |
    \$$$$  |$$ |  $$ |$$ |$$ |      \$$$$$$$ |\$$$$$\$$$$  |\$$$$$$$\ $$$$$$$  |
     \____/ \__|  \__|\__|\__|       \_______| \_____\____/  \_______|\_______/

 💎 thirdweb-cli v0.9.25 💎

✔ What is your project named? … thirdweb-ipfs-app
✔ Which blockchain do you want to use? › EVM
✔ What framework do you want to use? › Next.js
✔ What language do you want to use? › TypeScript
Creating a new thirdweb app in /Users/mkono/nodejs/thirdweb-ipfs-app.

Success!のメッセージが出力されていれば正常にプロジェクトが作成されています。
Success! Created thirdweb-ipfs-app at /***/nodejs/thirdweb-ipfs-app

フォルダを確認すると以下のファイルが作成されています。

作成したフォルダに移動します。

*@* nodejs % ls
thirdweb-app		thirdweb-ipfs-app	web3
*@* nodejs % cd thirdweb-ipfs-app
*@* thirdweb-ipfs-app % ls
LICENSE.md		next.config.js		package.json		styles
README.md		node_modules		pages			tsconfig.json
next-env.d.ts		package-lock.json	public

以下のコマンドを実行して、実行ファイルを作成します。

*@* thirdweb-ipfs-app % npm run build

> thirdweb-ipfs-app@0.1.0 build
> next build

info  - Linting and checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ / (1150 ms)                            842 B           589 kB
├   └ css/90d9220fe6a45757.css             708 B
├   /_app                                  0 B             588 kB
└ ○ /404                                   183 B           589 kB
+ First Load JS shared by all              589 kB
  ├ chunks/framework-73b8966a3c579ab0.js   45.2 kB
  ├ chunks/main-e4be697f641c1f12.js        27.1 kB
  ├ chunks/pages/_app-48616bae0f4d9348.js  514 kB
  ├ chunks/webpack-f75413c810c93939.js     2.38 kB
  └ css/a34c5a2053739cb3.css               237 B

○  (Static)  automatically rendered as static HTML (uses no initial props)

次のコマンドを実行するとプログラムが実行されます。

*@* thirdweb-ipfs-app % npm start

> thirdweb-ipfs-app@0.1.0 start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

上記、urlにアクセスしてみましょう。

http://localhost:3000

テンプレートのWeb画面が表示されます。

上記プログラムに先ほどIPFS上にアップロードしたファイルが表示されるように修正してみましょう。
[thirdweb-ipfs-app]→[pages]→[index.tsx]にて画面表示のコードを修正できます。

直接ファイルを編集して構いません。一般的にはVSCodeが統合開発環境として利用されますが、今回はメモ帳でもOKです。IPFSファイルのレンダリングコードのサンプルは、thirdwebの以下にあります。

// Render files from IPFSのコードを使います。ipfsのリンク先は自身でアップロードしたコードに修正いただいてOKです。2行追加して上書きしましょう。

import { ConnectWallet } from "@thirdweb-dev/react";
import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import { MediaRenderer } from "@thirdweb-dev/react"; {/* 追記　MediaRenderer機能を使うために必要なモジュールを追加 */}

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="http://thirdweb.com/">thirdweb</a>!
        </h1>
        <MediaRenderer src="ipfs://QmTZwskVdmbzgoN17HHtKygR35miBGUgxfh1mfApvPStqk/cyberpunk002.jpeg" />　 {/* 追記 IPFSファイルを表示 */}

        <p className={styles.description}>

Macの場合はterminal、Windowsの場合はコマンドプロンプトに戻り、Ctrl+Cで強制終了させてください。
再度、Build→Startします。

*@* thirdweb-ipfs-app % npm run build
*@* thirdweb-ipfs-app % npm start

IPFSのファイルが表示されました。

このように利用したいコードを組み込んでプログラムを開発していきます。