web3.jsはイーサリアムのノードと通信することのできるJavaScript APIで、ブラウザからコントラクトにアクセスすることが可能となります。
開発環境
macOS High Sierra
Ganache バージョン1.1.0
今回はプライベートネットでブロックチェーンを立ち上げることのできるGanacheを利用します。Ganacheで生成したブロックチェーンに対してRemixからコントラクトをデプロイし、そのコントラクトのアドレスとABI情報を取得します。そしてweb3.jsによってブラウザからコントラクトと通信します。
まずGanacheをインストールしておきます。
http://truffleframework.com/ganache/
次にRemix上で下記コントラクトを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
pragma solidity ^0.4.23; contract sample { string public name = "taro"; function set(string _name) public { name = _name; } function get() constant public returns (string) { return name; } } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script> <script type="text/javascript"> //Ganacheのデフォルトのポート番号は7545 const web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545")); //コントラクトを呼び出すアカウントのアドレス let coinbase = web3.eth.accounts[0]; //コントラクトのアドレス const address = "0x7d9c03a7fddd501f6869b8a853f4e47440953312"; //ABI情報 const abi =[ { "constant": false, "inputs": [ { "name": "_name", "type": "string" } ], "name": "set", "outputs": [], "payable": false, "stateMutability": "nonpayable", "type": "function" }, { "constant": true, "inputs": [], "name": "get", "outputs": [ { "name": "", "type": "string" } ], "payable": false, "stateMutability": "view", "type": "function" }, { "constant": true, "inputs": [], "name": "name", "outputs": [ { "name": "", "type": "string" } ], "payable": false, "stateMutability": "view", "type": "function" } ]; //コントラクトのインスタンスを生成 const contract = web3.eth.contract(abi).at(address); //トランザクションの実行（コントラクトのset関数を実行） let response = contract.set.sendTransaction("hanako",{from:coinbase,gas:3000000}); console.log("response:",response); //responseにはトランザクションのハッシュ値が返ってくる //コントラクトのget関数を実行 let name = contract.get.call(); console.log("name:",name); //hanako </script> </head> <body> </body> </html> |
63行目
コントラクトのインスタンスの生成には、上述で述べたようにコントラクトのアドレスとABI情報が必要となります。
66行目
sendeTransactionの第1引数には、set関数の引数である”hanako”を指定しています。gas:にはGas Limitを設定します。
