1. HOME
  2. ブログ
  3. IT技術
  4. Truffle SuiteでDAppを制作してみた

Truffle SuiteでDAppを制作してみた

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)へ移動して下さい。

Homebrewをインストール

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

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

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

インストールコマンド

Solidityをインストール

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

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

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

インストールコマンド

Gethをインストール

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

インストールコマンド

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

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

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

Truffle Suiteのインストール

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

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

インストールコマンド

Metamaskのテスト環境設定

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

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

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

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

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

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

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

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

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

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

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

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

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

コンソール設定

ERC20トークンを作成する

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

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

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

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

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

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

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

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

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

(※以下、要確認)

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

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

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

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

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

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

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

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

Gethの起動

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

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

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

index.js

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

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

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:ターミナルでプロジェクトフォルダへ移動

6:Geth起動

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

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

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

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

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

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

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

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

11:Live Serverを起動

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

12:DAppが開く

さいごに

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

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

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

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

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

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア