MetaMask(メタマスク)のAPI連携を使った自作サービス開発入門

本稿では、分散型アプリケーション（DApp）の開発に不可欠なツールである「MetaMask」のAPI連携を活用した自作サービスの構築プロセスについて、実践的な視点から詳細に解説します。スマートコントラクトやブロックチェーン技術を活用する現代のデジタルサービス開発において、ユーザーインターフェースとウォレットの統合は重要な要素です。特に、ユーザーが簡単に資産管理や取引を行うことができる仕組みは、サービスの採用率や利用継続性に直結します。

1. MetaMaskとは？

MetaMaskは、ウェブブラウザ上で動作する仮想通貨ウォレットであり、イーサリアム（Ethereum）ネットワークをはじめとする多数のブロックチェーンプラットフォームに対応しています。ユーザーはこの拡張機能をインストールすることで、個人の秘密鍵をローカルに保管しつつ、スマートコントラクトとのインタラクションを安全に行うことが可能になります。その利便性と高いユーザビリティにより、全世界で広く利用されており、多くのDApp開発者にとって必須のツールとなっています。

MetaMaskの主な特徴には以下のようなものがあります：

• ブラウザ拡張としてのインストール：Chrome、Firefox、Edgeなど主流のブラウザに対応。
• プライベートキーのローカル管理：ユーザーの秘密鍵はサーバー上に保存されず、端末内にのみ保持されるため、セキュリティ面での安心感が高い。
• 複数アカウント対応：1つのMetaMaskアカウント内で複数のウォレットアドレスを管理可能。
• マルチチェーン対応：イーサリアムだけでなく、Polygon、Binance Smart Chain、Avalancheなど、主要なブロックチェーンネットワークにも接続可能。

2. MetaMaskのAPIとは？

MetaMaskは、独自のethereumオブジェクトをブラウザのグローバルコンテキストに追加することで、ウェブアプリケーションがブロックチェーンと通信できるようにしています。このethereumオブジェクトは、Web3 APIの標準仕様に基づいており、多くの開発者が既存のライブラリやフレームワークと連携して利用可能です。

主なメソッドとプロパティは以下の通りです：

• ethereum.isMetaMask：MetaMaskがインストールされているかを確認する。
• ethereum.request()：ユーザーの承認を経て、ブロックチェーンへのアクセスを要求する。
• ethereum.on()：イベントリスナーを登録し、ウォレットの状態変化（例：アカウント切替、ネットワーク変更）を監視する。
• ethereum.selectedAddress：現在選択されているウォレットアドレスを取得する。
• ethereum.chainId：現在接続しているネットワークのチェーンIDを取得する。

これらのメソッドは、JavaScriptベースのアプリケーションで直接呼び出すことができ、ユーザーの操作に応じたリアルタイムな反応を実現します。例えば、ユーザーが「送金ボタン」をクリックした際に、MetaMaskのポップアップが表示され、送信先アドレスと金額の確認を促すといったフローが自然に実装できます。

3. サービス開発におけるMetaMaskの連携手順

3.1 開発環境の準備

まず、開発環境として以下のツールを用意します：

• Node.js（v14以上）
• npm や yarn
• コードエディタ（Visual Studio Code推奨）
• MetaMask拡張機能（Chromeストアより入手可）
• テストネット（例：Goerli、Sepolia）を使用するためのイーサリアムウォレット

開発用プロジェクトを作成する際は、以下のコマンドで初期設定を行います：

mkdir my-dapp
cd my-dapp
npm init -y
npm install web3 @ethersproject/providers

ここで使用しているweb3および@ethersproject/providersは、ブロックチェーンとの通信を簡略化するための主要なライブラリです。特にethers.jsは、MetaMaskとの連携において非常に柔軟性があり、公式ドキュメントも充実しています。

3.2 MetaMaskの検出とユーザー接続

最初に行うべきは、ユーザーがMetaMaskをインストールしているかどうかの判定です。以下は典型的なチェックコードです：

if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMaskが検出されました');
} else {
  alert('MetaMaskがインストールされていません。');
}

この条件分岐によって、ユーザーがウォレットを持っていない場合でも、適切なメッセージを表示し、導線を提示できます。次に、ユーザーがウォレットに接続するための処理を実装します。

接続処理のサンプルコード：

async function connectWallet() {
  if (typeof window.ethereum === 'undefined') {
    alert('MetaMaskがインストールされていません。');
    return;
  }

  try {
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts'
    });
    console.log('接続済みアドレス:', accounts[0]);
    return accounts[0];
  } catch (error) {
    console.error('接続エラー:', error);
    alert('ウォレット接続に失敗しました。');
  }
}

このコードは、ユーザーの同意を得るためにeth_requestAccountsメソッドを呼び出し、アカウントのリストを取得します。ユーザーが「許可」を選択すると、返り値としてアドレスが配列形式で戻されます。これにより、後続の取引処理やデータの識別に利用できます。

3.3 ネットワークの切り替え

異なるブロックチェーンネットワーク（例：メインネット、テストネット）間で動作させる必要がある場合、ユーザーが正しいネットワークに接続しているかを確認することが重要です。MetaMaskは、ユーザーが任意のネットワークに切り替えることを可能にしていますが、アプリ側でもその状態を把握しておく必要があります。

ネットワークのチェーンIDを取得する方法：

async function getNetwork() {
  try {
    const chainId = await window.ethereum.request({ method: 'net_version' });
    console.log('現在のネットワークチェーンID:', chainId);
    return chainId;
  } catch (error) {
    console.error('ネットワーク情報取得エラー:', error);
  }
}

さらに、ユーザーが特定のネットワークにいることを確認するために、以下のコードでチェーンの切り替えを促すことも可能です：

async function switchNetwork(chainId) {
  try {
    await window.ethereum.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: chainId }]
    });
    console.log('ネットワーク切り替え完了');
  } catch (error) {
    if (error.code === 4902) {
      // ネットワークが追加されていない場合
      try {
        await window.ethereum.request({
          method: 'wallet_addEthereumChain',
          params: [
            {
              chainId: chainId,
              chainName: 'Goerli Testnet',
              nativeCurrency: {
                name: 'Goerli Ether',
                symbol: 'ETH',
                decimals: 18
              },
              rpcUrls: ['https://goerli.infura.io/v3/YOUR_INFURA_PROJECT_ID']
            }
          ]
        });
        console.log('ネットワーク追加成功');
      } catch (addError) {
        console.error('ネットワーク追加エラー:', addError);
      }
    } else {
      console.error('ネットワーク切り替えエラー:', error);
    }
  }
}

このように、ユーザーが期待するネットワークにいない場合に、自動的に追加・切り替えを試みることで、開発者はユーザー体験の悪化を防ぐことができます。

3.4 ウォレットからのトランザクション送信

ユーザーがウォレットに接続した後、次のステップはスマートコントラクトとのやり取りです。ここでは、簡単な「トークン送信」を例に挙げます。

送信処理のコード例：

async function sendToken(toAddress, amount) {
  const contractABI = [...]; // 事前に定義されたABI
  const contractAddress = '0x...'; // トークンのアドレス

  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = await provider.getSigner();

  const tokenContract = new ethers.Contract(contractAddress, contractABI, signer);

  try {
    const tx = await tokenContract.transfer(toAddress, ethers.utils.parseUnits(amount, 18));
    console.log('トランザクション送信中...', tx.hash);
    await tx.wait();
    console.log('トランザクション完了');
  } catch (error) {
    console.error('送信エラー:', error);
    alert('送信に失敗しました。');
  }
}

このコードでは、ethers.jsを使ってスマートコントラクトのメソッドを呼び出しており、ユーザーの署名付きトランザクションが生成されます。MetaMaskが自動的にポップアップを表示し、金額やガス料金の確認を促します。これにより、ユーザーの意思決定を尊重しつつ、安全な取引が実現されています。

4. セキュリティとベストプラクティス

MetaMaskとの連携は便利ですが、同時にセキュリティリスクも伴います。以下は、開発者が守るべき基本的なガイドラインです：

• ユーザーの秘密鍵を一切取得しない：MetaMaskの内部処理は非公開であり、privateKeyやseed phraseを取得することはできません。開発者がこれらを要求するのは重大な違反です。
• サードパーティのホスティングを避ける：ユーザーのウォレット情報を扱う処理は、サーバーではなくクライアントサイドで完結させるべきです。
• エラー処理を徹底する：ユーザーが拒否した場合やネットワークが不安定な場合のエラーを想定し、適切なメッセージを表示する。
• ユーザーの操作を明確に通知する：「この操作でいくらのガス代がかかります」といった情報を事前に提示することで、誤った取引を防止できます。

5. 実装例：シンプルなトークン送信フォーム

ここでは、実際に動くミニアプリケーションの構成を紹介します。以下のHTMLとJavaScriptコードを組み合わせることで、ユーザーが送信先と金額を入力し、MetaMask経由で送金できるフォームが完成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>トークン送信フォーム</title>
  <script src="https://cdn.ethers.io/lib/ethers-5.7.2.min.js"></script>
</head>
<body>
  <h2>トークン送信フォーム</h2>
  <form id="sendForm">
    <label>送信先アドレス:</label>
    <input type="text" id="toAddress" required><br>
    <label>送信数量:</label>
    <input type="number" id="amount" step="0.001" required><br>
    <button type="button" onclick="connectAndSend()">送信する</button>
  </form>

  <script>
    async function connectAndSend() {
      if (!window.ethereum) {
        alert('MetaMaskがインストールされていません。');
        return;
      }

      try {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const fromAddress = accounts[0];
        const toAddress = document.getElementById('toAddress').value;
        const amount = document.getElementById('amount').value;

        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const signer = await provider.getSigner();

        const contractAddress = '0x...'; // あなたのトークンアドレス
        const contractABI = [...]; // ABI

        const tokenContract = new ethers.Contract(contractAddress, contractABI, signer);

        const tx = await tokenContract.transfer(toAddress, ethers.utils.parseUnits(amount, 18));
        alert('送信が開始されました。トランザクションハッシュ: ' + tx.hash);
      } catch (error) {
        console.error(error);
        alert('送信に失敗しました。' + error.message);
      }
    }
  </script>
</body>
</html>

このコードは、シンプルながらも実用的な機能を持ち、学習目的やプロトタイプ開発に最適です。

6. 終わりに：まとめ