個人ブログにMetaMaskを接続するプログラムを作ってみた

           
更新日時 2024年05月19日 04:39:42
ハッシュレート 355.47 EH/s
半減期まで 1,430.4 日
ブロック数 844,025
供給量 19,699,965 BTC
マイニング報酬 3.125 BTC
過去24時間の取引件数 249,448
過去24時間の取引枚数 483,387 BTC

PR

Web3というキーワードが徐々に浸透していますが、新たにサービスを開発したいと考えている方もいると思います。

そこで今回はWordPressサイトにMetaMaskを接続してみました。

この記事で分かる事
  • MetaMaskを繋げられるプログラム
  • 開発環境
  • WordPressサイトに対応させる方法
エックスサーバー」や「ロリポップ!」、「お名前.com」などのサーバーでも動作します。

MetaMaskを用意してない方はインストールしておきましょう。

WordPressサイトとMetaMaskを繋げてみる

MetaMaskをサイトに接続するにはある程度のプログラミングスキルが必要になります。

開発工程
  1. node module(Node.js)をインストールし、npmコマンドが利用できるパソコン
  2. コマンドプロンプトを立ち上げて「npx create-react-app 任意の名前」を実行
  3. 「cd」コマンドで作成したパスに移動
  4. 「npm start」でファイルが生成される
  5. 作成したフォルダーに「src」があるので、その中のApp.jsで開発
  6. 「npm install web3」と「npm install ethers」でモジュールをインストール
  7. プログラム実装
  8. 途中経過は「npm run start」を打ち込みローカル環境で確認
  9. 「npm run build」でビルド
  10. ビルドしたフォルダーをサーバーにアップ

今回は7番のプログラム実装から細かく紹介していきます。

コマンドプロンプト

「npx create-react-app 任意の名前」をやる前にcdコマンドで移動すると、好きな場所にアプリケーションを作成できます。

アプリケーションを作成後、cdコマンドでアプリケーションの中に移動し、「npm start」を実行してください。

ファイル

「npm start」が完了するとアプリケーションの中にフォルダーが自動生成されます。

デフォルトのファイル

  • node_modules
  • public
  • src
  • .gitignore
  • pakage.json
  • package-lock.json
  • README.md

srcの中にApp.jsがあるので、それに書いていきます。

package.json(まずは飛ばしてもOK)

プログラムが完成してビルドをしても、真っ白の可能性もあります。

そのような場合は「package.json」に「  “homepage”: “./”,」を追加する必要があります。

MetaMaskと接続するソースコードの紹介

では早速ソースコードを紹介していきます。

完成したページはこちら

プログラムした物をわざわざサーバーにアップロードするのも時間が掛かってしまうので「npm run start」で確認しましょう。

ローカル環境で動作確認できたら次はサーバーにアップロードしてみましょう。

MetaMaskに接続

まず初めにMetaMaskを接続するプログラムです。

import './App.css';
import { useState } from 'react';
//import { ethers } from 'ethers';

function App() {

  const [walletAddress, setWalletAddress] = useState("");
  const [chainId, setChainId] = useState("");
  const [chainName, setChainName] = useState("");

  const Chains = {
    1: "Mainnet(メインネット)",
    3: "Ropsten(ロップステン)",
    4: "Rinkeby(リンケビュー)",
    5: "Goerli()",
    42: "Kovan()",
    56: "Binance Smart Chain(バイナンススマートチェーン)",
    61: "Ethereum Classic Mainnet()",
    62: "Morden()",
    137: "Polygon(ポリゴン)",
    1337: "Geth private chain(default )",
    43114: "Avalanche(アバランチ)",
}

  async function requestAccount() {

    if(window.ethereum) {
      console.log('detected');

      try {
        const accounts = await window.ethereum.request({method: "eth_requestAccounts",});
        setWalletAddress(accounts[0]);

        const hexChainId = await window.ethereum.request({ method: 'eth_chainId' });
        const chainId = parseInt(hexChainId);
        setChainName(Chains[chainId]);
        setChainId(chainId);
      } catch (error) {
        console.log('接続最中にエラーが発生しました');
      }

    } else {
      alert('MetaMaskがありません');
    }
  }

  return (
    <div>
      <table border="1">
        <tr>
          <th>アドレス</th>
          <td>{walletAddress}</td>
        </tr>
        <tr>
          <th>チェーンID</th>
          <td>{chainId}</td>
        </tr>
        <tr>
          <th>チェーン名</th>
          <td>{chainName}</td>
        </tr>
      </table>
      <button onClick={requestAccount}>ウォレットに接続</button>
    </div>
  );
}

export default App;

MetaMaskの公式ドキュメントによると、ボタンをクリックした時にウォレットの接続を求めるような仕組みを推奨しています。

ethereum.request({ method: 'eth_requestAccounts' });

上記のソースが実行されるとMetaMaskが起動します。

上記ソースの確認はこちら

MetaMaskのテストネットワークを表示させておこう

MetaMaskの設定がデフォルトだと認識しない可能性もあるので、開発環境でも認識できるよう設定しましょう。

MetaMaskを起動し、右上の丸いアイコンをクリックし、下の設定を選択してください。

画面が変わるので「高度な設定」を選択してください。

下にスクロールすると「テストネットワークを表示」を選択してください。

これでローカル環境でもMetaMaskを接続できるようになりました。

WordPressサイトと同じURLに公開する方法

ローカル環境で動作確認ができたら、あとはサーバーにアップロードするだけです。

ビルド

完成したプログラムはどこでも動作するように、ビルドをしていきます。

コマンドプロンプトでアプリケーションのフォルダに移動します。

そこで「npm run build」を実行します。

アプリケーションのフォルダを見ると「build」ファイルが完成しています。

「build」ファイルは名前を変えても問題ないので、「metamask」に名前を変更しました。

サーバーにアップロード

最後にサーバーにアップすれば誰でもウォレットを接続できるようになります。

利用しているサーバーは「エックスサーバー」や「ロリポップ!」だと思いますが、JavaScriptという言語なので、すべてのサーバーで利用できます。

サーバーが異なっていてもWordpress内のフォルダーは一緒です。

WordPressサイトを作成した時自分で好きなフォルダー名を設定したと思いますが、そのフォルダーの中であればどこに置いても構いません。

「index.php」「single.php」「wp-content」などがあるフォルダーにbuildファイルを入れておけば、アクセスしやすいパスになります。

上記画像の場合は「https://example.com/buildしたファイルをここにアップしてください/index.html」にアクセスすれば表示されます。

フォルダーを追加したので、「https://bitcoin-uruna.com/react/metamask/index.html」にアクセスすると表示されます。

WordPressサイトにMetaMask接続はできる!!

ビットコイン購入はどこがいいか取引所を比較してみた
初心者におすすめの暗号資産取引所を紹介します。各取引所の特徴や手数料を比較してみました。セキュリティの観点から、暗号資産取引所は複数開設することをお勧めします。取引所は無料で開設できます。

今回は接続のみ紹介しましたが、今後さらに機能を追加していこうと思います。

最初は難しいと思いますが、環境が整えばあとはプログラムを実装するだけです!

PR

コメント

タイトルとURLをコピーしました