YouTubeに360°カメラで撮影したVR動画を公開中!!

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

MetaMask

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

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

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

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

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コマンドで移動すると、好きな場所にアプリケーションを作成できます。

WordpressブログとMetaMaskを繋げてみる

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

WordpressブログとMetaMaskを繋げてみる

ファイル

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

デフォルトのファイル

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

「metamask1」と「metamask2」は気にしなくても大丈夫です。

WordpressブログとMetaMaskを繋げてみる

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

WordpressブログとMetaMaskを繋げてみる

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

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

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

WordpressブログとMetaMaskを繋げてみる

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と接続するソースコードの紹介

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

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

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

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

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

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

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

ビルド

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

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

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

Wordpressブログと同じURLに公開する方法

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

Wordpressブログと同じURLに公開する方法

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

サーバーにアップロード

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

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

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

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

Wordpressブログと同じURLに公開する方法

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

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

僕の場合はフォルダーを追加したので、「https://gotoyusuke.com/react/metamask1/index.html」にアクセスすると表示されます。

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

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

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

٩( ᐛ )وシェアしてくれたら(☝︎ ՞ਊ ՞)☝︎ブログもっと頑張れます(´༎ຶོρ༎ຶོ`)
Yusuke Goto
2017年に暗号資産を始め、様々なコインを買って利益を出すも最終的にはほぼ0円。その後勉強し、ビットコインを購入することにして2019年から長期保有し、利益が5倍以上に。
現在写真家を目指し、YouTubeに360°動画を投稿してます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA