<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="1" class="code-line">本記事は<a href="https://qiita.com/advent-calendar/2022/ethereum" target="_blank" rel="nofollow noopener noreferrer">Ethereum Advent Calendar 2022</a>の19日目の記事です。</p>
</div></aside>
<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="4" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="5" class="code-line">本記事では、GitHubのコントリビューションに応じて見た目が変化するNFTについて技術的な背景も含めて紹介します。</p>
<p data-line="7" class="code-line">いわゆるDynamic NFTですが、既存サービスとNFTの接続点として非常に可能性を感じています。Dynamic NFTでは、ブロックチェーンの外にあるオフチェーンデータをイベントにしてオンチェーンのパラメータを変更することができます。</p>
<p data-line="9" class="code-line">ゲーム内での活動によってレベルアップし、見た目が変化するような演出は既存サービスでは当たり前に行われていますが、同じような仕様をオンチェーンのNFTでも実現できるようになります。</p>
<p data-line="11" class="code-line">詳細な仕組みや具体的な応用事例の紹介は以下の記事が詳しいです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e6eb3dfcd002d" src="https://embed.zenn.studio/card#zenn-embedded__e6eb3dfcd002d" data-content="https%3A%2F%2Fblog.chain.link%2Fwhat-is-a-dynamic-nft%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.chain.link/what-is-a-dynamic-nft/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.chain.link/what-is-a-dynamic-nft/</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__890f26ab235f1" src="https://embed.zenn.studio/tweet#zenn-embedded__890f26ab235f1" data-content="https%3A%2F%2Ftwitter.com%2Fkeccak255%2Fstatus%2F1588378297658118144" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://twitter.com/keccak255/status/1588378297658118144" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://twitter.com/keccak255/status/1588378297658118144</a></p>
<p data-line="15" class="code-line">今回はエンジニアとは切っても切れないGitHubへのコントリビューション（=オフチェーンデータ）によって動的に変化するNFTを作ってみました。</p>
<h1 id="github%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3nft%E3%81%AE%E9%96%8B%E7%99%BA" data-line="17" class="code-line">
<a class="header-anchor-link" href="#github%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3nft%E3%81%AE%E9%96%8B%E7%99%BA" aria-hidden="true"></a> GitHubコントリビューションNFTの開発</h1>
<h2 id="%E4%BB%95%E6%A7%98" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E4%BB%95%E6%A7%98" aria-hidden="true"></a> 仕様</h2>
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">対象のNFTは誰でもフリーミント可能</li>
<li data-line="21" class="code-line">NFTのメタデータには、GitHubへのコントリビューションを表す草画像を使用</li>
<li data-line="22" class="code-line">GitHubへのコミットのイベントを検知して、草画像のカラーテーマがランダムで更新される</li>
</ul>
<p data-line="24" class="code-line">簡単な概念モデルを作成しました。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--fAkW-CTe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7e55df3f18b049f95d4df41f.png%3Fsha%3D27bc5581426f8aebab1170404a92e0662ba5d228" alt="概念モデル" loading="lazy" class="md-img"></p>
<h2 id="%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" aria-hidden="true"></a> スタック</h2>
<ul data-line="28" class="code-line">
<li data-line="28" class="code-line">OpenZeppelin, Foundry, Hardhat</li>
<li data-line="29" class="code-line">Next.js, wagmi, Tailwind CSS</li>
</ul>
<h2 id="%E9%96%8B%E7%99%BA%E3%82%B9%E3%83%86%E3%83%83%E3%83%97" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%82%B9%E3%83%86%E3%83%83%E3%83%97" aria-hidden="true"></a> 開発ステップ</h2>
<h3 id="nft%E3%82%92%E4%BD%9C%E6%88%90" data-line="32" class="code-line">
<a class="header-anchor-link" href="#nft%E3%82%92%E4%BD%9C%E6%88%90" aria-hidden="true"></a> NFTを作成</h3>
<p data-line="33" class="code-line">ERC721トークンで実装しました。</p>
<p data-line="35" class="code-line">メタデータとしてGitHubの草画像をSVG形式で作成しています。<br>
GitHub API v4で取得したコントリビューションの情報をもとに、スマートコントラクト上でSVGを構築し、そのままオンチェーン上に保存しています。</p>
<p data-line="38" class="code-line">このあたりのSVG構築のソースは、Nounsを参考にさせてもらいました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__c0ff875e3757b" src="https://embed.zenn.studio/github#zenn-embedded__c0ff875e3757b" data-content="https%3A%2F%2Fgithub.com%2Fnszknao%2Fdapps%2Fblob%2Fmain%2Fpackages%2Fcontract%2Fcontracts%2Flibs%2FMultiPartRLEToSVG.sol" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/nszknao/dapps/blob/main/packages/contract/contracts/libs/MultiPartRLEToSVG.sol" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/nszknao/dapps/blob/main/packages/contract/contracts/libs/MultiPartRLEToSVG.sol</a></p>
<p data-line="41" class="code-line">GraphQLで提供されているGitHub API v4では、userに紐づくcontributionCalendarが生えているので、GitHubのページをクロールしてsvgを持ってくる必要は無くてひと安心でした。</p>
<p data-line="43" class="code-line">GitHub APIを呼んでいるサーバーは、Next.jsのAPI Routesに実装してあります。<br>
草情報は週ごとのコミット数によって0-4のレベルが割り振られたデータがカレンダー形式で返却されますが、SVG構築がしやすいよう連長圧縮をかけています。<br>
（Nounsのソースでも使われていてそのまま流用したほうが実装コストが低いと判断しました。必ずしも圧縮後のサイズが小さくなるわけでは無いです）<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__25313ed98377c" src="https://embed.zenn.studio/card#zenn-embedded__25313ed98377c" data-content="https%3A%2F%2Fja.wikipedia.org%2Fwiki%2F%25E9%2580%25A3%25E9%2595%25B7%25E5%259C%25A7%25E7%25B8%25AE" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ja.wikipedia.org/wiki/%E9%80%A3%E9%95%B7%E5%9C%A7%E7%B8%AE" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ja.wikipedia.org/wiki/連長圧縮</a></p>
<p data-line="48" class="code-line">テーマカラーもこの部分でランダムに決定していて、オリジナルのグリーンだけではない草画像がコミットのたびに作成されます。<br>
テーマカラーに含まれる具体的なカラーコードはこちらを参考にしました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__919ea6e8a0db" src="https://embed.zenn.studio/github#zenn-embedded__919ea6e8a0db" data-content="https%3A%2F%2Fgithub.com%2Fwilliambelle%2Fgithub-contribution-color-graph%2Fblob%2Fmaster%2Fsrc%2Fjs%2Fcontentscript.js%23L3-L37" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/williambelle/github-contribution-color-graph/blob/master/src/js/contentscript.js#L3-L37" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/williambelle/github-contribution-color-graph/blob/master/src/js/contentscript.js#L3-L37</a></p>
<p data-line="52" class="code-line">草画像の完成イメージはこんな感じです。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--ajfjgsW0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/20194b18f7105cccbafffd49.png%3Fsha%3D8283bd1c2663a4ecc8a6199b7943ae80934ff45e" alt="GitHub草画像" loading="lazy" class="md-img"></p>
<p data-line="55" class="code-line">ただコミットのイベント検知を再現する部分はGitHubとの連携が必要になり、この記事のトピックからずれてくるため、疑似的にイベントを検知できるようコントラクト上で発火させたい関数をpublicにしています。</p>
<p data-line="57" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__9d3850532f242" src="https://embed.zenn.studio/github#zenn-embedded__9d3850532f242" data-content="https%3A%2F%2Fgithub.com%2Fnszknao%2Fdapps%2Fblob%2Fmain%2Fpackages%2Fcontract%2Fcontracts%2FGitHubContributionNFT.sol%23L63" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/nszknao/dapps/blob/main/packages/contract/contracts/GitHubContributionNFT.sol#L63" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/nszknao/dapps/blob/main/packages/contract/contracts/GitHubContributionNFT.sol#L63</a></p>
<h3 id="%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E6%A4%9C%E7%9F%A5%E3%81%97%E3%81%A6%E3%82%AA%E3%83%B3%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E6%9B%B4%E6%96%B0" data-line="59" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AA%E3%83%93%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E6%A4%9C%E7%9F%A5%E3%81%97%E3%81%A6%E3%82%AA%E3%83%B3%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E6%9B%B4%E6%96%B0" aria-hidden="true"></a> コントリビューションを検知してオンチェーンパラメータを更新</h3>
<p data-line="60" class="code-line">肝心のメタデータ更新はChainlinkのオラクルを使って再現しています。</p>
<p data-line="62" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__5122f6bb080ce" src="https://embed.zenn.studio/github#zenn-embedded__5122f6bb080ce" data-content="https%3A%2F%2Fgithub.com%2Fnszknao%2Fdapps%2Fblob%2Fmain%2Fpackages%2Fcontract%2Fcontracts%2FGitHubContributionNFT.sol%23L63-L94" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/nszknao/dapps/blob/main/packages/contract/contracts/GitHubContributionNFT.sol#L63-L94" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/nszknao/dapps/blob/main/packages/contract/contracts/GitHubContributionNFT.sol#L63-L94</a></p>
<p data-line="64" class="code-line">コミットイベントをあったときに<code>commitGitHub</code>が呼ばれ、オラクルがAPIレスポンスを持って<code>fulfill</code>をコールバックします。</p>
<p data-line="66" class="code-line">余談ですが、独自のノードを立てているわけでは無いので流れはシンプルですが、外部との接続が絡むとローカルテストが複雑になるのはあるあるかと思います。<br>
その際、ローカルから他ネットワークにフォークしてコントラクト関数を実行できるFork Testingが便利でした。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cc4df600ae6de" src="https://embed.zenn.studio/card#zenn-embedded__cc4df600ae6de" data-content="https%3A%2F%2Fbook.getfoundry.sh%2Fforge%2Ffork-testing" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://book.getfoundry.sh/forge/fork-testing" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://book.getfoundry.sh/forge/fork-testing</a></p>
<p data-line="70" class="code-line">今回はGoeliテストネットにデプロイしたのですが、テストネットで使えるオラクルをいくつか公式から提供してくれていたので、こちらを利用しました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4224cfbe9703" src="https://embed.zenn.studio/card#zenn-embedded__4224cfbe9703" data-content="https%3A%2F%2Fdocs.chain.link%2Fany-api%2Ftestnet-oracles%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.chain.link/any-api/testnet-oracles/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.chain.link/any-api/testnet-oracles/</a></p>
<p data-line="73" class="code-line">ドキュメントを見た感じ、これらのオラクルでは対応しているレスポンスが、</p>
<ul data-line="74" class="code-line">
<li data-line="74" class="code-line">単一の値（型はuint256, int256, bool, string, bytesそれぞれあります）</li>
<li data-line="75" class="code-line">uint256の複数の値<br>
となっているので、これ以外のレスポンスをとるAPIと接続する際は独自ノードを作成する必要があります。</li>
</ul>
<p data-line="78" class="code-line">今回はオラクルを体験してみるという目的でシンプルな構成にしたかったので、用意されているノードをありがたく使わせてもらいました。</p>
<p data-line="80" class="code-line">tokenIdが絡むためどうしてもステートフルになり、コールバック関数の中で草画像データとtokenIdの２種類のデータが必要で、危うく独自ノードの道に進みかけましたが、Chainlinkにリクエストを送る際に作成される<code>requestId</code>に紐づける形でtokenIdを保存する案が浮上して事なきを得ました。</p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="82" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="83" class="code-line">GitHubの草画像を使ったDynamic NFTを作成しました。<br>
コントラクトとAPIの実装は何とか完了したのですが、フロントエンドの実装も絶賛進めているので完成したタイミングでまた更新します！</p>
<h1 id="%E5%8F%82%E8%80%83" data-line="86" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<p data-line="87" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c177f69e3d1" src="https://embed.zenn.studio/card#zenn-embedded__c177f69e3d1" data-content="https%3A%2F%2Fzenn.dev%2Fyuichkun%2Farticles%2Fb207651f5654b0" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/yuichkun/articles/b207651f5654b0" style="display:none" target="_blank">https://zenn.dev/yuichkun/articles/b207651f5654b0</a></p>


GitHubのコントリビューションによって動的に変わるNFTを作ってみた

コントリビューションを検知してオンチェーンパラメータを更新

Discussion