TruffleのVue-boxを試してみる。
Ethereumのフレームワーク（開発ツール?）「Truffle」ですが、様々なサンプルがboxという形でパッケージされており、利用可能になっています。 そのなかでDRIZZLE-VUE-BOXについて試してみました。ネット上にあまり解説等がないため、まとめておきます。
最終的にはこんな画面が動かせるようになります。
公式は下記のサイトですが、本記事ではGanache CLIを使用しているため、手順を少々追加、変更しています。 www.trufflesuite.com
環境
- Truffle v5.1.25
- Ganache CLI v6.9.1 (ganache-core: 2.10.2)
- Node v12.16.3
- npm v6.14.4
- Utuntu 18.04 LTS
- Firefox + MetaMask(Extension)
ブラウザ（Firefox + MetaMask）以外はVirtualBox仮想マシンのubuntu上で動作させています。仮想マシンのCPUは2個、メモリ4GBの構成にしています。
ツール類のインストール
当たり前ですが、node/npmををインストールしてからTruffle、Ganache CLIをインストールします。 node/npmはnvmからインストールしました。
#npm/nodeインストール（nodeバージョン指定） $ nvm install v12.16.3 #Truffleインストール $ npm install -g truffle #Ganache CLIインストール $ sudo npm install -g ganache-cli
ganache-cliについて、sudoを付けずに実施するとビルドエラーっぽいのがでて気持ち悪かったので、念のためsudoを付けています。 sudo付けても微妙にエラーが出ていますが、なんとか動いています。細かく調べていませんが、nodeのバージョンがよくないのかもしれません。
仮想通貨ウォレットのMetaMaskも必要です。ChromeとFirefoxにエクステンションがありますので、そちらをインストールしておきます。 本記事ではFirefox版を使用しました。 手順はいろんなサイトで紹介されているので省略します。
boxの開梱～コントラクトのデプロイまで
vue-boxのunbox
unboxは公式の通りです。適当に作成したディレクトリ（フォルダ）内でコマンドを実行。通信状況のせいなのかよく失敗しますが、2回ぐらい実行するとだいたい成功します。
$ truffle unbox vue-box
truffle-config.jsの編集
ここからは公式と異なり、本記事ではtruffle developは使いません。
Ganacheに向けてコントラクトをデプロイするため、truffle-config.jsに追記を施します。ファイルはunboxしたディレクトリ直下に展開されています。
追記箇所は、module.exportsの内側、contracts_build_directory:の下です。
const path = require('path') module.exports = { // See <http://truffleframework.com/docs/advanced/configuration> // to customize your Truffle configuration! contracts_build_directory: path.join(__dirname, "vapp/src/contracts"), //ここから追記 networks: { development: { host: "127.0.0.1", port: 8545, network_id: "*", }, }, };
truffle developの場合は port: 7545ですが、Ganacheの場合は8545です。
コンパイル
unbox直後の状態でコンパイルせずとも動くと思います。私はComplexStorage.solに気に入らない箇所があった（笑）ので修正してコンパイルしました。（後述）
$ truffle compile
コンパイルすると、vapp/src/contracts配下にいくつかのjsonファイルが生成、または更新されます。
Ganache CLIの起動
さて、マイグレーションする前に、別のターミナルを開いて Ganache CLIを起動しておきます。私の環境ではブラウザとGanacheが動いているマシンが異なるため、-hオプション(ホストの指定)を付けて接続元の縛りをなくしています。環境によってはオプション付けなくても動くと思います。規定値はlocalhostです。
$ ganache-cli -h 0.0.0.0
Ganacheを起動すると100ETHを保持したアカウント10個と、それに対応するPrivate Keys10個が表示されます。Private Keysは後ほどMetaMaskの設定に使用するのでメモしておきます。起動する度に変わるので注意です。
ちなみに、Ganache CLIのオプションの種類はこちら。 github.com
マイグレーション
普通にコマンド実行です。Ganacheの方（別で開いたターミナル）にもデプロイ関連のトランザクションのログが流れるはずです。
$ truffle migrate
MetaMaskの設定
Ganacheへの接続設定と、アカウントのインポートを行います。
- Ganacheへの接続設定
MetaMaskのネットワーク選択リストから"カスタムRPC"を選択すると、「設定」->「ネットワーク」の画面になります。
"Network Name"に分かりやすい名前を適当に入力し、"New RPC URL"には自分の環境に合わせてhttp://x.x.x.x:8545を記載。x.x.x.xはIPアドレスなので適宜読み替えてください。8545は前述の通りGanacheのポートです。
設定を保存すると、うまくいっていれば接続されるはずです。
- アカウントのインポート
MetaMaskがGanacheに接続された状態で、MetaMaskのアカウントインポート機能でインポートを行っておきます。Ganacheを起動したときに表示されたPrivate Keysから０番目のアカウントの秘密鍵の入力欄にコピペし、「追加」ボタンをクリックするとインポートされます。
マイグレーション後にこの手順を実施すると、元々保持していた100ETHから少し減っている（99.9418ETHぐらい）と思います。 これはマイグレーションの際のコントラクト配置のトランザクション手数料分のはずです。
動作確認
開発サーバの起動
vappディレクトリ配下で以下のコマンドを実行すると開発用サーバが起動します。これはvueで普通に開発する場合と同じです。
$ npm run serve
画面の表示
ブラウザから以下のアドレスにアクセスすると、冒頭で紹介した画面が表示されるはずです。x.x.x.xはIPアドレスなので適宜読み替えてください。 一番最初の表示の際にMetaMaskの小さな画面が開くと思います。画面下部に"connect"ボタンがありますので、それを押しましょう。
http://x.x.x.x:8080/
画面上には大きく４つの内容が表示されています。
Show the Accounts
Ganacheが生成した0番目のアカウントのアドレスと、保持しているETHが表示されています。
Tutorial Token
vue-boxには「Tutorial Token」という名前のERC20ベースのトークンが実装されています。 シンボルは"TT"です（通貨記号、単位みたいなもの）。 初期供給値が12,000（120TT）になっており、0番目のアカウントが保持しています。
Address欄にGanacheが生成したアカウント（0番目以外）を記載し、Amount欄に12,000以下の数値を入力してSubmitボタンを押すと、MetaMaskの小さな画面が開きます。確認ボタンと押すと、TTが移動（送金）され、0番目アカウントが保持しているTTが12,000から減額されます。GAS FEEはトランザクション手数料です。
Simple Storage
Simple Storageは、ステート（状態）として１つの数値を保持するようなコントラクトとして実装されています。
Value入力欄に適当に数値を入力してSubmitボタンを押すと、やはりMetaMaskの小さな画面が開きます。確認ボタンと押すと、その数値がSimple Storageコントラクトのステートに保存され、Value表示欄に表示されるようになっています。
Complex Storage
Complex Storageは様々な数値、文字列、配列等をステートとして保持するコントラクトとして実装されています。保持する値はコントラクトに直書きされており、変更する機能は実装されていません。 画面上には保持している内容のうち4種類の情報（string1、string2、singleDD、uintarray）が表示されています。
（string2の初期値が「你好」になっていたので「こんにちは」に書き換えてコンパイルしなおしました）
VUE-BOXの構造
contracts配下
主に3つのコントラクトが実装されています。
- TutorialToken.sol
- SimpleStorage.sol
- ComplexStorage.sol
これらはそれぞれ前述の画面の表示に対応しています。 TutorialToken.solにはOpenZeppelinが利用されているようです。（詳細要調査）
OpenZeppelinのライブラリはnode_modules/openzeppelin-solidityに格納されています。
migrations配下
unboxした時点で既に以下の2ファイルが格納されています。Truffleのマイグレーション/デプロイ用のファイルですね。 そのまま動かすだけなら修正する必要はありません。
- 1_initial_migration.js
- 2_deploy_contracts.js
vapp/src/contracts配下
コントラクト（Solidityファイル）をコンパイルした結果のjsonファイルが格納されます。
vapp/src配下
Vue関連でお馴染みのファイルが格納されています。
- main.js
- App.vue
main.jsにVuexとDrizzleの利用が定義されています。ストア関連ですね。
App.vueには以下の3つのVueコンポーネントが配置されています。
- TutorialToken.vue
- SimpleStorage.vue
- ComplexStorage.vue
あとは、Drizzle関連ファイル。各Vueコンポーネント内でdrizzleが利用されていますが、まだ動きを理解していないのでこれから勉強します。 なんとなく、各contractsとvueコンポーネントをマッピングしているだけのように見えます。
- drizzleOptions.js
VUE-BOXにたどり着くまでにやってきたこと
つい数週間前まではブロックチェーンの知識0でしたが、以下を実施することにより概要は分かったような気でいます。
書籍２冊を読了
「Ethereum入門」の実施
book.ethereum-jp.net いろんなところで紹介されているEthereum入門のサイトです。 「スマートコントラクトを作成し実行する」までの流れと、Appendix「Ethereum ウォレットの使い方（Metamask）」を実施しました。 2018年時点の記載であること、Metamaskは画面ショットが現在のものと微妙に異なりますが、だいたい分かります。 Ethereumネットワークに種類があること（プライベート、テスト、本番）は頭に入れておきましょう。
gethを使った複数ノードの連動実験
VirtualBoxで2つのノードを立ち上げ、ブロック等が同期されることを確認しました。 上記2つ目の書籍「ブロックチェーンシステム設計」巻末付録と、こちらのサイトを参考にさせていただきました。 blockchain-jp.com
TruffleのHelloWorld
こちらのサイトを参考にさせていただきました。 noumenon-th.net
Truffleのその他のbox
vueの前にmetacoin、drizzle、react、pet-shopを試しました。 metacoinはちゃんと動きましたが、reactは何か変なエラーが出て動いていません。どうも自分にはReactと縁がないようです。 drizzleはloading...のまま動かず、pet-shopはチュートリアルが面倒くさい割に最後のコントラクト実行のところがうまくいかず辟易しています。。。
本日はここまで。
