More than 5 years have passed since last update.

RemixとMetaMaskを使って、Smart Contractの開発環境を整えてみた

Last updated at 2018-04-05Posted at 2017-12-27

EthereumのSmart Contractを開発するのに使える開発環境って、色々と用意されてますよね。
truffleとか、Remixなどなど...

Solidityの学習を始めたての頃は、atomにプラグイン入れて、ローカル環境でプライベートネット立ち上げて、デプロイして...って流れで十分でした。（←今までRemixはJavaScript VMしか使ったことがない）

しかし、Solidityにも慣れたし、そろそろtest netにデプロイして、コントラクトを動かしてみたい！となったときに思いました。

「コンソールでコントラクトの実行って面倒だな〜何とかできないかな〜
...あれ？そもそもtest netへのデプロイってどうやるんだっけ？」

ってことで、今回はRemixとMetaMaskを使って、test net(Ropsten)へコントラクトをデプロイして、実際に動かしてみるところまでやってみました。

##1.MetaMaskのインストールする

Chromeブラウザのプラグインとして動くEthereumのウォレットであるMetaMaskをインストールします。
色々なサイトでインストールの方法は解説されていますので、そちらをご覧ください（↓例えば以下のページ）
https://business-infinity.jp/metamask-how-to-use/

※途中で出てくるSEED情報を晒しているページもありますが、晒さない方がよいかと思います...

##2.MetaMaskにetherを入金する

以下のサイトで「request 1 ether from faucet」をクリックすると、簡単にMetaMaskに入金できます。
https://faucet.metamask.io/

これで、MetaMask側の準備は完了です。

##3. Remixをインストールする
クラウド環境でも使えますが、今回はローカルにクローンして、使います。
https://github.com/ethereum/browser-solidity

1.　Set up

git clone https://github.com/ethereum/browser-solidity
cd browser-solidity
npm install

ちなみに...自分が試したときは、npm installのさいに、以下のようなエラーが出ました。

Error: Cannot find module './helpers/traceHelper' from '/Users/user1/Desktop/workspace/browser-solidity/node_modules/remix-core/node_modules/remix-lib'

Issuesの922を参考に、一度node_modulesを削除し、npm install makeを行い、もう一度npm installを実行すると、うまくいきました。

2.　Remixを起動する

npm start

localhost:8080にアクセスすると、Remixが表示されます。

右側のRunのタブでEnvironmentが「injected Web3」になっていることを確認する。

##3.コントラクトをデプロイする

今回は以下のようなコントラクトをRopstenにデプロイして動かしてみました。

pragma solidity ^0.4.15;

contract HelloWorld {
    string public greeting;
    
    function HelloWorld(string _greeting) {
        greeting = _greeting;
    }
    
    function setGreeting(string _greeting) {
        greeting = _greeting;
    }
    
    function say() constant returns (string) {
        return greeting;
    }
}

1.　デプロイ
右側のテキストボックスに"Hello, World"と入力して「create」ボタンを押します。