• トップ
  • ブログ一覧
  • Truffle SuiteでDAppを制作してみた
  • Truffle SuiteでDAppを制作してみた

    広告メディア事業部広告メディア事業部
    2020.03.17

    IT技術

    Truffle SuiteでDAppを制作してみる

    DApp(Decentralized application)」とは、分散コンピューティングシステム上で実行されるコンピューターアプリケーションです。

    今、仮想通貨界で注目のワードです。

    今回は、そんな DApp を「Truffle Suite(トリュフ スイート)」で制作していこうと思います!

    Truffle Suiteとは?

    Truffle Suite とは、Ethereum 用 Blockchain の Smart Contract 開発用フレームワークです。

    開発方法には2種類あり、「ローカルで、自分のコンピューターで開発する方法」と、「Visual Studio Codeを使用し、AZURE のクラウド上で開発する方法」があります。

    今回は、ローカルでの環境設定も含めて説明したいと思います!

    環境構築の準備

    さっそくMacにて環境構築をしていきましょう!

    1. イーサリアムクライアント:「Go-Ethereum(Geth)」を使用
    2. テストネット:「Metamask」を使用

    Geth、Truffle、Metamaskのインストール準備

    まず、ターミナルを立ち上げます。

    再起動時は、常にルートディレクトリー上で npm のコードを打ち、作業フォルダー(TrufflePRJ)へ移動して下さい。

    1$cd TrufflePRJ
    2$TrufflePRJ *******(ルートディレクトリ名)npm

    Homebrewをインストール

    「Homebrew」は、macOSオペレーティングシステム上の、パッケージ管理の為のシステムです。

    Homebrew を、以下のURLからインストールします。

    【Homebrewインストールサイト】
    https://brew.sh/index_ja.html

    インストールコマンド

    1$brew update
    2$brew upgrade
    3$brew tap ethereum/ethereum
    4$brew install ethereum --devel
    5//*develop branchのインストールの時には、-devel
    6$brew install solidity
    7$brew linkapps solidity

    Solidityをインストール

    Solidity を動作させるためには、Node.js の環境が必要になります。

    まず、npm/Node.js を、以下のURLからインストールします。

    【Node.jsインストールサイト】
    https://nodejs.org/en/download/

    インストールコマンド

    1$brew install npm
    2$npm install solc

    Gethをインストール

    gmpとgoをインストールします。

    インストールコマンド

    1$git clone https://github.com/ethereum/go-ethereum
    2$brew install gmp go

    Geth コマンドラインクライアントをビルド。

    geth フォルダーを作ります。

    1$cd go-ethereum
    2$make geth
    3$build/bin/geth
    4//*Pathのチェックをして下さい。

    ※Geth の起動とアカウントのインデックスは、後の「Gethの起動」で説明します。

    Truffle Suiteのインストール

    Truffle Suite を、以下の URL からインストールします。

    【Truffle Suite公式サイト】
    https://www.trufflesuite.com/

    インストールコマンド

    1$npm install -g truffle
    2//*バージョンチェックして下さい。
    3$truffle version

    Metamaskのテスト環境設定

    Metamask のインストールは、Chrome のアプリ機能拡張ウェブストアで検索してインストールします。

    Metamaskネットワークの種類と準備

    イーサリアムは、ネットワークが複数あり、用途によってネットワークを使い分けます。

    Metamask には、「メインネット」「テストネット」「localhost」「カスタムRPC」が有ります。

    開発用に使用されるプライベートネットでは、カスタムRPCを使用します。

    今回は、テストネットを使用し、パブリックネットワークに接続します。

    以上で開発環境は、完了しました。

    次は、作業プロジェクトを作成します。

    Truffleでプロジェクトを作成する

    Truffle でプロジェクトを作成します。

    1//*TrufflePRJフォルダーをホームディレクトリ下に作成し、作成したフォルダー内にインストールします。
    2$npm
    3$mkdir TrufflePRJ
    4$cd TrufflePRJ
    5$truffle init
    6  
    7//*以下のようなファイル構成になっています。
    8||-TrufflePRJ
    9    |-contract
    10       |-Migrations.sol
    11    |-migrations
    12       |-1_initial_migration.js
    13    |-test
    14    |-truffle-config.js

    Ganacheに連携する為のTruffleの設定

    接続設定の為に、「truffle-config.js」を編集します。

    「truffle-config.js」を修正後、「truffle.js」にリネームする場合は、「truffle-config.js」を削除します。

    1module.exports = {
    2    networks: {
    3        development: {
    4            host:"http://127.0.0.1",
    5            port: 8545,
    6            network_id: "*"
    7        }
    8    }
    9}

    コンソール設定

    1$truffle console
    2//コンソール設定します。

    ERC20トークンを作成する

    Solidity で、「ERC20トークンを作成する時に使用するテキストエディタ」か、「IDE」を準備します。

    OpenZeppelinライブラリをインストール

    1$npm init -f
    2$npm install openzeppelin-solidity --save

    "TrufflePRJ.sol"というファイルを作成しcontactフォルダーに保存する

    (トークンコントラクト)《TrufflePRJ.sol:ERC20トークンをSolidityで作成する》

    1$truffle create contract TrufflePRJ

    以下のコードに 修正します。

    1pragma solidity ^0.5.0;
    2import "openzeppelin-solidity/contracts/token/ERC20/ERC20.sol";
    3 
    4contract TrufflePRJ is ERC20{
    5   string public name = "TrufflePRJ";
    6   string public symbol = "TRFPJ";
    7   uint256 public decimals = 18;
    8 
    9constructor(uint256 initialSupply) public {
    10   _mint(msg.sender, initialSupply);
    11   }
    12}

    Solidityコードをコンパイルする

    以下のコードで作成したトークンコントラクトを、コンパイルします。

    ※コントラクトと、"truffle-config.js" 修正時には必ずコンパイルし直します。

    1//TrufflePRJ上で作業
    2$cd TrufflePRJ
    3$truffle compile
    4//".exit"かCtrl+C(2度)でコンソールから抜けます。

    コンパイル後、build/contract フォルダーに、「TrufflePRJ.json」というファイルがコンパイルされました。

    (※以下、要確認)

    1{
    2"contractName": "TrufflePRJ",
    3"abi": [
    4{
    5"constant": true,
    6"inputs": [],
    7"name": "name",
    8"outputs": [
    9{
    10"name": "",
    11"type": "string"
    12}
    13],
    14"payable": false,
    15"stateMutability": "view",
    16"type": "function"
    17},
    18{
    19"constant": false,
    20"inputs": [
    21{

    マイグレーションファイルの作成

    migrationフォルダーの中に、「2_deploy_contracts.js」を作成します。

    initialSupply で、TrufflePRJ のコンストラクタ引数の値を定義します。

    「const」は、「var」や「let」と同じ様に定義付けに使われますが、今回は「const」で定義します。

    ※ファイル名は、「2_deploy_contracts.js」にします。

    1const TrufflePRJ = artifacts.require("./TrufflePRJ.sol")
    2module.exports = function (deployer) {
    3const initialSupply = 10000e18;
    4//initialSupplyは、migrate後に数値エラーが発生した場合、GanacheとMetaMaskで設定しますのでそのまま継続してください。
    5deployer.deploy(TrufflePRJ);
    6};

    コントラクトとマイグレーションファイルのデプロイ

    以下のコードでデプロイします。

    ネットワーク名 (develop) に接続します。

    1$truffle develop
    2//ローカルホストのポート情報、アカウント情報、プライベートキー情報、Mnemonicがターミナル上に表示されるのでメモします。
    3$truffle(develop) > migrate

    Gethの起動

    Ctrl + C を2度打つか、".exit" でプロジェクトから一度抜けて、Geth を起動します。

    ※Geth を以下のコードで起動し、Geth の起動時にパスワード設定してあるのでロック解除をします。

    1geth --rpc --networkid 10 --nodiscover --datadir ./eth_private_net console
    22>>./eth_personal.unlockAccount'('eth.accounts[0]')'
    3 
    4//"Welcome to the Geth JavaScript console!"が表示されて完了

    Ganacheで確認

    Truffle と Ganache を連携させます。

    Truffle のプロジェクトと Ganashe のワークスペースを連携します。

    truffle-config.js(又は、truffle.js)を Ganache に登録します。

    Metamaskのテストネット設定

    Truffle と Ganache を連携させます。

    Ganacheのアカウントのダッシュボード

    アカウント情報

    Metamaskにアカウントをインポート

    GanacheとMetaMaskを連携する

    http://127.0.0.1:8545 の起動時に表示させる、「index.html」と「index.js」を作成します。

    起動時に表示される画面が、Metamask で認証される画面です。

    index.html

    1<!DOCTYPE html>
    2<html lang="ja">
    3<head>
    4        <title>Greating Dapps - Good Day</title>
    5      
    6    <meta charset="UTF-8">
    7    <!-- ライブラリの導入 -->
    8    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
    9        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    10    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js"></script>
    11    <script src="https://cdn.rawgit.com/ethereum/web3.js/1.0/dist/web3.min.js"></script>
    12    <script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
    13    <script src="./index.js"></script>
    14</head>
    15<body>
    16    <!--
    17        function btn_onclick() {
    18            window.alert('Have a good day!');
    19        }
    20        //
    21    </script>
    22    <div id="contract_result">""</div>
    23    <input type="button" value="You,too!"  onclick="btn_onclick()"></input>
    24-->
    25  </body>
    26</html><br>

    index.js

    1window.addEventListener('load', async () => {
    2  if (window.ethereum) {
    3    window.web3 = new Web3(ethereum);
    4    try {
    5      await ethereum.enable();
    6      var accounts = await web3.eth.getAccounts();
    7      var option = {
    8        from: accounts[0]
    9      };
    10      var myContract = new web3.eth.Contract(abi, contractAddress);
    11      myContract.methods.RegisterInstructor('8', 'yz')
    12        .send(option, function (error, result) {
    13          if (!error)
    14            console.log(result);
    15          else
    16            console.log(error);
    17        });
    18    } catch (error) { }
    19  }
    20  else if (window.web3) {
    21    window.web3 = new Web3(web3.currentProvider);
    22    web3.eth.sendTransaction({
    23      /* ... */
    24    });
    25  }
    26  else {
    27    console.log('Non-Ethereum browser detected. You should consider trying MetaMask!Metamaskブラウザーアプリが使用できるブラウザーに変更して下さい!');
    28  }
    29});

    ※web3 のバージョンチェックで、Metamask から作成されるファイルのバージョンは、0.2.x.x以降です。

    1window.ethereum.enable();
    2//最新バージョンのChromeとMetamaskにした場合、このコードを最初に設定します。

    live-serverをnpmでインストール

    1$ npm install -g live-server
    2//live-serverの起動
    3$ TrufflePRJ ****** > live-server
    4//*****プロジェクトルート

    live-serverとMetamask連携

    http://127.0.0.1:8545 (コンパイル設定のポート)上で、必ず Metamask にログインして下さい。

    テストネットは、Ropsten にログインします。

    DApp画面

    ターミナルから、live server を Ctrl+C で停止できます。

    まとめ

    今回やったことを簡潔にまとめたいと思います!

    コンパイルやデプロイが上手くいかないこともありますが、変数の設定が違ったり、ローカルホストの設定が原因の場合も上手く動作しません。

    Geth の起動は、コンソールから抜けた後は再度します。

    また、Metamask でアプリの起動が上手くいかない場合は、ブラウザーのバージョンと Metamask のバージョンを確認するか、キャッシュを削除してみてください。

    ※今回テストネットは「Ropsten」、ブラウザーは「Chrome」と「Firefox」を使用しました。

    手順のまとめ

    1:Metamaskを開く

    2:Ganacheを開く

    3:テキストエディタ又は、IDEを開く

    4:Macターミナルを開く

    5:ターミナルでプロジェクトフォルダへ移動

    1$cd "プロジェクトフォルダー"

    6:Geth起動

    Geth を以下のコードで起動し、Geth の起動時にパスワード設定してあるのでロック解除をします。
    (いらないかもしれません…)

    1geth --rpc --networkid 10 --nodiscover --datadir ./eth_private_net console
    22>>./eth_personal.unlockAccount'('eth.accounts[0]')'
    3   //"exit"でコンソールから抜ける

    7:コントラクトをコンパイル

    1//TrufflePRJ上で作業
    2$ cd TrufflePRJ
    3$truffle compile

    8:マイグレーションファイルの作成

    以下のコードでデプロイします。
    ネットワーク名 (develop) に接続します。

    1$truffle develop
    2//ローカルホストのポート情報、アカウント情報、プライベートキー情報、Mnemonicがターミナル上に表示されるのでメモします。
    3$truffle(develop) > migrate

    9:プロジェクトフォルダーへ移動

    ".exit" でプロジェクトフォルダーに戻ります。

    10:プロジェクトフォルダー上で再度Gethの起動

    "exit" でコンソールを抜けます。

    11:Live Serverを起動

    1$live-server

    http://127.0.0.1:8545 が開き、Chrome のブラウザーアプリの Metamask からログインする。

    12:DAppが開く

    さいごに

    Mac での環境構築から、DApp の画面を開くところまで紹介しましたがいかがでしたでしょうか!

    DApp は、「CryptoKitties」といったゲームにも使われています。

    他にも取引所や、デジタルIDなど、様々な分野で活用されております。

    今回の内容を参考に、是非チャレンジしてみてください!

    こちらの記事もオススメ!

    featureImg2020.08.14ブロックチェーン特集知識編ブロックチェーンとコンセンサスアルゴリズム実装編【Blockchain Data Managerを使ってみたEt...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事