Web3というキーワードが徐々に浸透していますが、新たにサービスを開発したいと考えている方もいると思います。
そこで今回はWordPressサイトにMetaMaskを接続してみました。
- MetaMaskを繋げられるプログラム
- 開発環境
- WordPressサイトに対応させる方法
」や「ロリポップ！
」、「お名前.com
」などのサーバーでも動作します。
MetaMaskを用意してない方はインストールしておきましょう。
WordPressサイトとMetaMaskを繋げてみる
MetaMaskをサイトに接続するにはある程度のプログラミングスキルが必要になります。
- node module(Node.js)をインストールし、npmコマンドが利用できるパソコン
- コマンドプロンプトを立ち上げて「npx create-react-app 任意の名前」を実行
- 「cd」コマンドで作成したパスに移動
- 「npm start」でファイルが生成される
- 作成したフォルダーに「src」があるので、その中のApp.jsで開発
- 「npm install web3」と「npm install ethers」でモジュールをインストール
- プログラム実装
- 途中経過は「npm run start」を打ち込みローカル環境で確認
- 「npm run build」でビルド
- ビルドしたフォルダーをサーバーにアップ
今回は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接続はできる！！
今回は接続のみ紹介しましたが、今後さらに機能を追加していこうと思います。
最初は難しいと思いますが、環境が整えばあとはプログラムを実装するだけです！
コメント