MetaMaskと接続するWebページを作る -Vol.02 / 開発者向けブログ・イベント

はじめに

みなさん、こんにちは。GMOインターネット株式会社の斉藤です。

今回はMetamaskを使ったWebページ作成の第2回です。第1回も併せてご覧ください。
前回はWebページとMetamaskを接続するところまで実装を行いました。今回は暗号資産ウォレットらしく、残高照会や送金の実装を行っていきたいと思います。

引き続きMetamaskの開発者ガイドは必読です。
Getting Started | MetaMask Docs

MetaMaskと接続するWebページを作る -Vol.01

メインネットとテストネット

Metamaskは基本的にイーサリアムネットワーク用のウォレットです。暗号資産であるEther(ETH)を扱うネットワークですね。これはメインネットと呼ばれています。

一方で、イーサリアムプロトコルのテストなどを目的としたネットワークも存在しています。これらはテストネットと呼ばれています。今回のようにアプリのテストを行ったり、スマートコントラクトのテストなどに使います。

前回の記事でMetamaskの設定を変更してテストネットワークを有効にしたので、Metamask上でいくつかのテストネットを確認することができます。

どれを使っても良いですが、今回はRopsten Test Networkを利用していきます。

それぞれのテストネットには、そのテストネット上で使うEtherを取得するための方法が用意されています。これはFaucetと呼ばれています。日本語では蛇口という意味です。ひねると水が出てくるイメージですね。

RopstenのFaucetはこちらです。Metamaskから自分のRopstenネットワークのウォレットアドレスを確認して、それを入力しましょう。0.2ETHが付与されます。

ウォレットの残高を取得する

無事にRepstenネットワークのETHが取得できたら、さっそく残高を取得する実装をしていきましょう。

前回の記事で説明したwindow.ethereum オブジェクトを使います。requestメソッドでeth_getBalanceを呼び出します。またaccountはウォレットアドレスで、取得方法は前回の記事にあります。

const wei = 0.000000000000000001;

const amount = await window.ethereum.request({
    method: "eth_getBalance",
    params: [
        account,
        "latest",
    ],
});
// wei -> ether
const balance = parseInt(amount) * wei;
setBalance(balance)

返り値のamountが残高で、単位はWeiです。weiはイーサリアムの最小単位で、

1 Wei == 0.000000000000000001 ETH

です。

送金する

次に送金を実装してみましょう。ウォレットアプリっぽくなってきました。

まず一番最初に大事なことです。前回のネットワークを取得するを利用してメインネットに接続しているときは送金を実行しないようにしておきます。

一応ですが、実際に送金を実行してもMetamaskが確認を求めてきますので、そこで気づくこともできます。ただ今回作っているのはテストアプリですので、実装上メインネットでは送金不可にしておくのが良いでしょう。

// メインネットでは実行しない
const chainId = await getChainID();
if (chainId == 1 || chainId == 61) {
    console.warn("Do not send any transactions to the mainnet");
    return;
}

次に送金部分を実装していきます。Metamaskのドキュメントも併せて見ておきましょう。

const weiSendAmount = sendAmount * wei;
const hexSendAmount = "0x" + weiSendAmount.toString(16);
const transactionParameters = {
    nonce: '0x00', // ignored by MetaMask
    gasPrice: '', // customizable by user during MetaMask confirmation.
    gas: '', // customizable by user during MetaMask confirmation.
    to: sendTo, // Required except during contract publications.
    from: window.ethereum.selectedAddress, // must match user's active address.
    value: hexSendAmount, // Only required to send ether to the recipient from the initiating external account.
    data: '', // Optional, but used for defining smart contract creation and interaction.
    chainId: '', // Used to prevent transaction reuse across blockchains. Auto-filled by MetaMask.
};

sendAmountが送金する額(ETH)です。それをweiにして16進変換します。

transactionParametersのsendToが送信先ウォレットアドレス、valueが送信額です。その他の項目はMetamaskが自動で埋めてくれます。

// txHash is a hex string
// As with any RPC call, it may throw an error
const txHash = await window.ethereum.request({
    method: 'eth_sendTransaction',
    params: [transactionParameters],
});

送金は eth_sendTransaction を呼びます。返り値は送金トランザクションのハッシュ値です。

実際に送金を実行するとブロックチェーン上に反映されます。Etherscanで自分のトランザクションを確認してみましょう。

おわりに

完成したデモページはこちらです。実際に送金もできますので試してみてください。

2回にわたってMetamaskと連携したWebページを実装してきました。HTMLとJavaScriptの知識があれば実装できるので、非常に手軽です。これでWeb 3.0できますね！笑

それではまた次回お目にかかりましょう。

[PR]

私が働いているGMOインターネット株式会社ではエンジニアを含め採用を強化しています。

募集職種 | GMOインターネット株式会社採用

「いきなり応募するもなぁ」と言う方は、Twitter DMで私に直接ご相談いただいても構いません。社内の雰囲気、開発現場の雰囲気、人間関係、待遇など、社内の人物からリアルな情報を知りたいという方はお気軽にどうぞ。

ブログの著者欄

斉藤弘信

GMOインターネットグループ株式会社

2001年に同社に入社。ユーザーサポートやデータセンターでのオペレーション業務等を担当し，その後社長室などのゼネラル部門を経て，2014年9月よりクラウド/ホスティング事業のテクニカルエバンジェリストを担当。現在はWebプロモーション研究室のソフトウェアエンジニアとして勤務。得意分野はWebアプリケーションの設計/開発，Linuxサーバー構築/運用。