第２回日本円ハッカソンで発表した「みんなのNFTアート」アプリの技術解説

先日、JPYC社主催の第２回日本円ハッカソンに出場し、グラントレベル２を獲得しました！この記事はその時に発表したデモアプリの技術的な概要です。

どんなアプリ？

「みんなのNFTアート」というタイトルで、誰でも簡単にオリジナルのアート作品を制作するところから、IPFSへのアップロード、NFTのミントまでができるWebアプリです。

• 当日の発表資料
• 共同開発者による発表の様子

なぜ作ろうと思った？

下記の記事を参考に自分でインタラクティブNFTを作った時に、手順が多く面倒だなと感じたので作ってみました。 記事自体はとてもわかりやすくて勉強になります！
【Solidity】インタラクティブなNFTの作り方【Remix】

技術の概要

全体の構成図

以下、図中の1〜3について流れを追っていきます。

1. Scratchのプロジェクト ( sb3 ) をHTMLにコンバート
   1. Scratchのプロジェクトにてアートを制作する ( イラスト、アニメーション、ジェネラティブ、ゲームなど )
   2. Scratchプロジェクトのsb3ファイルを内部で生成
   3. Turbowarp Packagerを利用して、sb3ファイルをHTMLファイルにコンバート。
      コンバート時にAWS API GatewayとLambdaを利用。
      • AWS Lambda側の実装

      index.js

      const parser = require('lambda-multipart-parser');
      const Packager = require('@turbowarp/packager');
      
      exports.handler = async (event, context) => {
          console.log(event);
          console.log(context);
      
          const res = {
              statusCode: 500,
              headers : {
                  "Access-Control-Allow-Headers" : "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
                  "Access-Control-Allow-Origin": "*",
                  "Access-Control-Allow-Methods": "OPTIONS,POST"
              }
          }
      
          try {
              console.log(`Function ${context.functionName} started.`);
      
              const req = await parser.parse(event);
              const file = req.files[0];
              const projectData = Buffer.from(file.content);
              const progressCallback = (type, a, b) => {};
              const loadedProject = await Packager.loadProject(projectData, progressCallback);
              const packager = new Packager.Packager();
              packager.project = loadedProject;
              packager.options.autoplay = true;
              const result = await packager.package();
              const data = result.data;
      
              console.log(`Function ${context.functionName} end.`);
      
              res.statusCode = 200;
              res.body = data;
      
              return res;
      
          } catch(err) {
              console.error(err, `Function ${context.functionName} abend.`);
      
              res.body = JSON.stringify({ message: err.message });
              return res;
          }
      };
      

2. Pinata ( ipfs ) にメタデータ ( json ) をアップロード
   1. HTMLファイルをPinataにアップロードし、URLを取得する
   2. サムネイルをPinataにアップロードし、URLを取得する
   3. メタデータ ( json ) を作成し、アップロードし、URLを取得する
      • メタデータ ( json ) は、HTML ( NFT化したいアート本体 ) のURLと、png ( サムネイル ) のURLを記載

      metadata.json

      {
        "name": "InteractiveNFT", 
        "description": "hello world",
        "image": "https://gateway.pinata.cloud/ipfs/サムネイルの画像URL",
        "animation_url": "https://gateway.pinata.cloud/ipfs/アート本体のURL"
      }
      

3. メタデータのURLをtokenURIとしてNFT化
   1. MetaMaskログイン ( ethers.jsにて実装 ) し、ウォレットアドレスを取得する
   2. 前もってRemixを利用してmint関数をdeployしておく
      参考：【Solidity】インタラクティブなNFTの作り方【Remix】
   3. ウォレットアドレスにmint関数に、メタデータをtokenURIとしてわたしてmintする

おわりに

ざっくりと流れだけではありますが、内部では上記のような操作を行っています。
デモアプリとGitHubへのリンクを置いておくのでもし実際の動作や内部の作りにさらに興味があればご覧ください。

• デモアプリ
• GitHubリポジトリ