ERC-721 トークンを発行する DApp を作ってみました（その１）

アボカドです。名前も変わって、すごく久しぶりの投稿です。
ここ一年くらいブロックチェーンに興味があり勉強しています。

今回、勉強のために DApp (Decentralized Application) を作ってみました。
この記事ではまず、どんなものを作ったかを紹介します。

使った技術

• Solidity：Ethereum 上で動くプログラム（スマートコントラクト）を書く言語
• OpenZeppelin：Solidity 言語による模範的な実装ライブラリ
• ERC-721：固有のプロパティを持つ代替不可能なトークンの規格
• Truffle：Solidity で開発するときにデプロイなど簡単にできる開発ツール
• Remix：ブラウザでスマートコントラクトの動作確認を行えるツール
• Ganache：テスト用に簡単に Ethereum プライベートネットを作れるツール
• React：Web フロントエンドの JavaScript ライブラリ
• Web3.js：JavaScript からスマートコントラクトを操作できるライブラリ
• IPFS (js-ipfs-api)：分散ストレージとその JavaScript ライブラリ
• Firebase：静的 Web のホスティングをしてくれるサービス

作ったもの概要

• 自分が捨てたものを、ブロックチェーンに記録できるサービス
• 捨てたものの写真データとメタデータの実体は分散ストレージ (IPFS) に格納し、それらのハッシュ値をブロックチェーン (Ethereum) に記録する
• 捨てたものの情報は、固有のプロパティを持つ ERC-721 トークンとして発行される
• UI はごく単純

こんなものができた

トップ画面はこんな感じ。Ropsten テストネットで動いています。表示するには MetaMask が必要です。

トークンの発行画面。捨てるもの（捨てたもの）の写真、タイトル、いつ、どこで、誰から、なぜゲットしたか、そして、なぜ捨てるのかを入力します。

[Add] ボタンをクリックすると、MetaMask のトランザクション送信画面が開きます。承認してトランザクションを送信すると、ERC-721 トークンが発行されます。

[MyDiscardedRelics] ボタンをクリックすると、自分（ログインしているアドレス）が持っているトークンが表示されます。

[photo] [metaData] は、それぞれ IPFS データへのリンクとなっています。メタデータは、このように JSON で保存されています。

ちなみに、モバイルのウォレット対応ブラウザ（Trust や Chiper）からも利用できます。こんな感じ。

今回は、とりあえず動くものをつくることを目標にしたので、細かい部分は全然できていませんし、例外処理もままならず酷いもんですが・・・だいぶ勉強にはなりました。
やっぱり手を動かしてみるのは大事ですね。

実際の作り方や、ハマった部分などは次の記事で書きたいと思います。

🥑