web3.jsでブラウザからコントラクトにアクセスする[Ganache]

2018年5月28日

web3.jsはイーサリアムのノードと通信することのできるJavaScript APIで、ブラウザからコントラクトにアクセスすることが可能となります。

 

開発環境

macOS High Sierra

Ganache バージョン1.1.0 

 

今回はプライベートネットでブロックチェーンを立ち上げることのできるGanacheを利用します。Ganacheで生成したブロックチェーンに対してRemixからコントラクトをデプロイし、そのコントラクトのアドレスとABI情報を取得します。そしてweb3.jsによってブラウザからコントラクトと通信します。

 

まずGanacheをインストールしておきます。

http://truffleframework.com/ganache/

 

次にRemix上で下記コントラクトを記述します。

 

Ganacheを起動したら、Remixにおいて「Environment」項目の「Web3 Provider」を選択し、Ganacheのデフォルトであるポート番号「7545」に合わせます。

 

 

接続に成功すると、Ganacheであらかじめ生成されているアカウントが表示されます。

 

 

 

プライベートネットとして、GanacheではなくGethを利用した場合については下記の関連ページをご覧下さい。

 

Ethereumプライベートネット(Geth)とRemix (Browser-Solidity)をつなぐ

 

 

デプロイしたコントラクトを利用するには、そのコントラクトのアドレスとコントラクトの関数定義を列挙したABI(Application Binary Interface)と呼ばれるオブジェクトが必要となります。今回はRemixにおいてそれら情報を取得します。

 

コントラクトをデプロイしたら、Remixの下記の場所からアドレスとABIをを取得しておきます。

 

コントラクトのアドレスをコピー

 

ABIはCompile>Detailsボタンで表示される画面内で取得

 

 

 

プライベートネットのブロックチェーンにコントラクトをデプロイすることができたので、そのコントラクトに対してブラウザからweb3.jsを利用してアクセスしてみます。

 

web3.jsは下記からダウンロードすることが可能です。今回はCDN(Content Delivery Network)を利用します。

 

https://github.com/ethereum/web3.js

 

63行目
コントラクトのインスタンスの生成には、上述で述べたようにコントラクトのアドレスとABI情報が必要となります。

 

66行目
sendeTransactionの第1引数には、set関数の引数である”hanako”を指定しています。gas:にはGas Limitを設定します。

 

 

LINEで送る
Pocket

Copyright © 2018 思考の葉 All Rights Reserved.  プライバシーポリシー