Zenn
👽

日本円ハッカソンで入賞したので solidity 学習方法・アプリ構成をまとめてみる

2022/05/11に公開
Solidity
Web3
tech

はじめに

どうも、 Yuuuu_です。日本円ハッカソンをきっかけにはじめて Solidity にふれて、JPYC を使ったライブ配信連動型投げ銭サービス「推しサポ」を @Anman くんと開発しました。幸運にも賞を頂いたので、開発についてまとめていきたいと思います。

ソースコードはこちら

使ったツール

  • 使用言語：Solidity, Javascript, HTML, CSS
  • フレームワーク：Vue.js (後述の配信者アプリにのみ使用)
  • ライブラリ：Ether.js (JavaScript から Blockchain にアクセスするためのライブラリ)
  • IDE, エディタ：Remix, Visual Studio Code
  • その他：OBS Studio (ライブ配信者が使う映像ミキシングツール)

Solidity 学習方法

読者としては 「Solidity 触り始めたけど具体的にどうコントラクトをかけば良いのかイメージが湧かない人」 を想定しています。Solidity がわからない人は、なんでもトークンさんの入門講座がわかりやすいのでおすすめです。また、Solidity by Example には、シナリオ別にサンプルコードが用意されているので、僕みたいな初学者はとりあえずこれを Remix にコピペしてコントラクトを色々と動かしてみましょう。あとは公式ドキュメントを参照しながら頑張りましょう。

作ったサービス

推しを「直接」応援できるライブ配信連動投げ銭サービス「推しサポ」です。日本円と連動するステーブルコイン JPYC で動画配信者にチップを送ることができます。高額なプラットフォーム利用料を支払わずに、投げ銭できることが特徴です。また、配信者画面では、OBS Studioを通じて投げ銭してくれたファンのコメントなどを表示することができます。


こんなイメージ　視聴者側画面


こんなイメージ　配信者側画面

実際にハッカソンで発表したデモはYouTube の 1:45:20 あたりから視聴できるので、こちらをご覧ください。

アーキテクチャ

視聴者アプリ(Chrome Extention)、配信者アプリ(Webアプリ)、そして両者をつなげるバックエンドを Solidity で書いています。

書いたスマートコントラクトは3つ

  • ThrowmoneyPool：送金・出金機能の実装　＋（応援メッセージやニックネームなどの）データをイベントとして保存
  • Throwmoneyfactory：視聴者、配信者毎のJPYC受け取り専用POOLを作成
  • WithdrawConfirmation：出金時の承認プロセスを規定

次回からは、各コントラクトの書き方を解説していきます。
⇒こちら

Discussion