Zenn
Tailor WorksテックブログPublicationへの投稿
⛓️

テイラーワークス社内実験「Play! Web3」について#1：〜トークンの発行〜

Osamu SAWADA
2023/07/14に公開
Solidity
token
Web3
erc20
tech

こんにちは。テイラーワークスの澤田です。
プロダクトチームでWeb3エンジニアをやっています。

Web3を中心に、気になるテーマについてブログにまとめていけたらと思います。

テイラーワークスでは、Web3技術を活用したサービス拡張を予定しています。

Web3の領域って一体どんなものか？という疑問もあるかと思います。わたしが所属するテイラーワークスでも取り組みの始まった当時は同様の疑問がありましたので、まずは自分たちからWeb3を体験してみようという事になりました。

このブログではテイラーワークスで行っている「Play! Web3」というWeb3を実際に体験する社内実験をもとに、Web3の技術について、説明をしていきたいと思います。

この社内実験は2022年10月〜12月にかけて行った内容ですので、多少内容が古くなっているものもあるかもしれませんが、そのあたりについては都度補足を交えて行きたいと思います。

また、一度に紹介しきれないということもありまして、それぞれのテーマごとに分けて進めていきたいと思いますので、よろしくお願いします。

※ブログ内で引用しているコードは、社内で実験したものを紹介しています。安全性や脆弱性の検査は行っていません。参考にされる場合は、ご自身の責任の元、ご対応ください

連載一覧

Web3を楽しく体験する「Play! Web3」

Web3とは何? Web3技術を導入してみたいけど、どうやったらよいかわからない? ・・・といった課題がテイラーワークスにもありましたが、実際にWeb3を体験してみましょうということになりました。

Web3の機能を作ったり、それをサービス展開するためには、まずは自分たちが知っておきましょうということです。

↓楽しく体験するというコンセプト。社内のNotionのページも、こんな感じになっています。

楽しく体験するというコンセプト。社内のNotionのページも、こんな感じになっています

スマートフォンを使ったことがない人が、はたしてスマートフォンのメリットやスマートフォンを活用するサービスの良さを他人に説明できるでしょうか？（ちょっと無理がありますよね？）
これと同じように、Web3を体験したことがないなら、Web3のことを考えたり提案するのは、同じように無理があると考えました。
テイラーワークスがWeb3の領域を目指すためには、まずは楽しく、面白くWeb3を体験することによって、新しいサービスやアイデアを生み出すことを期待し、Play! Web3を開催します。

(実際に社内でWeb3の社内実験を行うためにNotionに記載した文章です）

イベント形式で開催

楽しく体験するために、下記のような形式で一つずつWeb3を体験していくというスタイルを採用しました。

週一で新しいイベントをオープン、というふうにやりたかったのですが、実際はなかなか進まず大変でしたが、全８回やり切ることができました。（スケジュール通りに進めるのは難しい・・・）

  • 第1回 仮想通貨ウォレットMetaMaskを使用したテイラーワークストークンの送金体験
  • 第2回 ウェブサイトとウォレットをリンク（ウォレットをもっと便利に）
  • 第3回 イチオシ写真をNFTにしよう
  • 第4回 社内のすごい人に「表彰状」や「バッヂ」を贈ろう
  • 第5回 ブロックチェーンでネット投票を実現
  • 第6回 【Play! Web3 参加者にプレゼント】プレゼント抽選スマートコントラクト
  • 第7回 迷ったときのいろいろ抽選スマートコントラクト
  • 第8回 プロフィールをブロックチェーンで管理！あなたはいったいどんな人？

ウォレットの管理について

Play! Web3では MetaMask (イーサリアムアドレスのウォレット・Google Chome の機能拡張)を使用してブロックチェーンに接続する方法をとっています。

サイト側でウォレットを管理する方法も検討したのですが、手っ取り早く実装して社内で展開したいということもあり、参加者には MetaMask をインストールしてもらってからWeb3を体験するという方法を取りました。

最初のスマートコントラクト・Tailor Works Token（ERC223)

最初のスマートコントラクトとして、ERC223 の仕様をベースにしたトークン（Tailor Works Token） を 発行し、メンバーにトークンを付与したところからスタートです。

ブロックチェーンはGnosis Chainのテストネット（Gnosis Chain Chiado）を使用しています。

https://docs.gnosischain.com/about/networks/chiado/

まずはメンバー間でトークンを送り合うということをやりました。

でも、これだけだと何も面白くないですよね？そこで、ウェブページを作り、MetaMaskと連動するようにしました。ウェブサイトは Vue.js を使用しています。

ウェブサイトはVue.jsを使用しています

この段階では、フロントのウェブページのみつくり、ブロックチェーンとの情報のやり取りは、MetaMaskをJavaScriptからコントロールして行いました。

UIの改善

上記のウェブページで目的は達成するのですが、送金する相手のイーサリアムアドレスを覚えておかなければならず、コピーペーストしたとしてもちょっと使い勝手が悪いですよね。

そこで、トークンを送る相手をあらかじめ登録しておいて、プルダウンから選択するという方法に変えています。

ウェブフロントには Nuxt.JS（Nuxt2） 、APIは Node.js＋ Express 、スマートコントラクトの開発には HardHatを使用しました。

最初のトークンの送金体験

これが最初のトークンの送金体験です。

テストネットで発行しているので、実際の価値はないのですが、社内で感謝の印としてトークンを贈るといったやり取りが社内のSlackで行われたり、面白い方向に向かっているようです。

Tailor Works Token について

概要

ERC20 を拡張した ERC223 というトークンの仕様をベースに実装しています。

https://eips.ethereum.org/EIPS/eip-223

独自に追加した仕様

メンバー管理機能をもたせました

  • トークンをもらうことや、送る相手をメンバーに限定することができます
  • メンバー登録などの管理操作はスマートコントラクトのオーナー権限で実行する仕様
  • メンバーから外すと、メンバーが持っていたトークンは自動的に全部回収する仕様

メンバーリストを持つことによって、「トークンのメンバーであるか？」といったチェックが出来るようになりました。他のスマートコントラクトから、特定のイーサリアムアドレスがトークンのメンバーであるか判断できるように実装しています。(例：トークンをMintする際に、実行者がメンバーであるかチェックする、など)

支払い機能をもたせました

通常は送金したい人(from)が、送る先(to)を指定して送金を実行します。（基本的な動作）

    function transferToAddress(
        address _to,
        uint256 _value,
        bytes memory _data
    ) private returns (bool success) {
        require(_value <= balances[msg.sender], 'Insufficient funds');

        balances[msg.sender] = balances[msg.sender].sub(_value);
        balances[_to] = balances[_to].add(_value);

        emit Transfer(msg.sender, _to, _value);
        emit Transfer(msg.sender, _to, _value, _data);
        return true;
    }
  • トークンの機能を拡張し、送金を外部のスマートコントラクトから安全に行えるように実装
  • 送金をリクエストするスマートコントラクトのアドレスを、あらかじめ送金を行うことができるスマートコントラクトとして事前に登録
    function pay(
        address _from,
        address _to,
        uint256 _amount
    ) external returns (bool success) {
        // 許可されているスマートコントラクトからの実行であるか
        require(hasRole(TOKEN_PAYMENT_ROLE, msg.sender), 'Not a permitted smart contract.');

        // Must be a member
        require(hasRole(TOKEN_USER_ROLE, _to) || owner() == _to, 'The destination of the transfer is not a member.');

        return _transferTokenForcibly(_from, _to, _amount);
    }

これによって、ブロックチェーンで買い物をする際にトークンで支払うことができるというアイデアです。

あとから気がついたことなのですが、トークンの送金に関しての Transfer イベントに data という項目があります。

この data に 何に対しての送金か という情報を付与しておけばもっとわかりやすくなるかもしれないと思います。（あとから気が付きました。）

event Transfer(address indexed from, address indexed to, uint value, bytes indexed data);

おわりに

今回は、テイラーワークスが社内のWeb3体験を行うための、Play! Web3というイベントの概要と、発行した社内向けトークン Tailor Works Token について紹介しました。

次回は NFT について書きたいと思います。

テイラーワークスは、エンジニア採用強化中

テイラーワークスは、エンジニア採用強化中です！
▼少しでも興味をお持ちいただけましたら、採用ページもチェックしてみてください
https://tailorworks.co.jp/careers

Tailor Worksテックブログ
Tailor WorksテックブログPublication

コミュニティプラットフォーム「Tailor Works」のテックブログです。テイラーワークスは、エンジニアを積極採用中！ ぜひカジュアルにお話ししましょう。tailorworks.com/

Discussion