ほぼコピペでできる！MetaMask を使用した仮想通貨 Ethereum の投げ銭・寄付受け入れ機能の導入方法

piyolab

2018年4月27日 18:30

この記事の概要

1. ブログやウェブサイトに仮想通貨 Ethereum の投げ銭・寄付受け入れ機能を追加するコードスニペット（ブログパーツ）を紹介します。

2. 仮想通貨の投げ銭・寄付を受け入れる場合は、ウォレットのアドレスを表示しておくだけなのが一般的ですが、MetaMask を使うことでボタン1つで Ethereum を送付できる機能を実現します。

3. （ほぼ）コピペでできます。

こんな感じでうごきます

仮想通貨によるブログやウェブサイトのマネタイズ

近年、ブログやウェブサイトのマネタイズ方法として、記事やコンテンツを気に入ってくれた読者から仮想通貨（暗号通貨）を投げ銭的に受け入れる、という方法をとっているウェブサイトが増えてきているように思います (*1)。

多くの場合は、 Ethereum(*2) や Bitcoin などの仮想通貨のウォレットアドレスをウェブサイトに貼っておき、そのウォレットアドレスに対して仮想通貨を送ってもらうような形をとっています。たとえば、次のような Ethereum のウォレットアドレスを記事に貼っておき、読者のウォレットアドレスから Ethereum の寄付を受け付ける、といった方法がとられています。

0x96e530a7a5fdAf3b041BdB8c3ABF30EeD1621eA9

*1 実際に投げ銭を投げている人がどのくらいいるかはわからないです。仮想通貨を送付する手間が大きいので、支援をしたいけど仮想通貨送付の手間がハードルになっている人も少なくないだろうと考えています。この記事では、その手間を最小限にする方法の1つを提案します。

*2 Ethereum 上の通貨名は正しくは "Ether" という名称ですが、本記事ではわかりやすさを優先するために Ethereum としておきます。

ボタン1つで Ethereum による寄付・投げ銭を可能に

上述の方法でも仮想通貨の寄付や投げ銭を受け入れることはできるのですが、より簡単に・より早く Ethereum の寄付や投げ銭を受け入れる方法として、MetaMask を活用した方法があります。

MetaMask は Chrome ブラウザのプラグインとして使用できる Ethereum のウォレットですが、単純なウォレットとしての機能以外にも DApps やスマートコントラクトと呼ばれる分散型アプリケーションにアクセスするための機能も持っています。最近では、DEX（分散型取引所）を使用するために MetaMask を導入した方も多いかと思います。

この記事では、 MetaMask に対応したボタンをブログやウェブサイトに設置することで、MetaMask をすでにインストールしている読者がボタン1つで Ethereum を寄付・投げ銭することができるコードスニペット（ブログパーツ）を紹介します。

導入例

以下の画像は、実際にブログに掲載している Ethereum による寄付・投げ銭受け入れボタンのスクリーンショットです。

MetaMaskをインストール・ログインしている状態で、この「ETH を送ってこのサイトを応援する！」というボタンを押下すると、つぎのようにMetaMask の画面が開きます。読者が MetaMask の「SUBMIT」ボタンを押すだけで、投げ銭・寄付が完了します。

実際に、次のブログの画面右上に、「ETH を送ってこのサイトを応援する」というボタンを設置しています。MetaMask を使っている方は、このブログのボタンを押して動作するか確認してみてください。MetaMask に慣れている方であれば、数秒もかからずに投げ銭・寄付を実行することができるかと思います。

本記事のコードを使用する前の注意点

1. あらかじめ Ethereum の寄付・投げ銭を受け入れるためのウォレット（アドレス）を用意してください。

2. HTML/JavaScript/CSS の基礎的な知識があることが前提となっています。

3. バージョン変更等により、将来的にコードが動作しなくなる可能性があります。

4. この記事の情報やコードによって生じた損害等について執筆者は一切の責任を追うことができないことを了承したうえでご利用ください。

コードスニペット（ブログパーツ）を使用する前に 1

以下のコードスニペット（ブログパーツ）をウェブサイトに貼ると、「ETH を送ってこのサイトを応援！」というボタンが表示されます。MetaMask にログインしている状態でボタンをクリックすると MetaMask が開き、Ether 送付の確認画面が表示されます。

また、MetaMask をインストールしていない場合や、ログインをしていない場合は代替テキストが表示されます。

なお、ボタンに表示されるテキスト等変更したい場合は、"eth_tip_button" という ID が指定されている a 要素を適宜変更してください。

コードスニペット（ブログパーツ）を使用する前に 2

以下のコードスニペット（ブログパーツ）を使用する前に、次の項目の値を変更してください。

ETH_ADDRESS: Ethereum を受け入れるウォレットのアドレスをセットします。読者の投げ銭・寄付はここで設定されたウォレットのアドレスに送付されるため、必ず忘れずに正しいものに変更してください。

ETH_VALUE: 投げ銭・寄付として受け入れたい Ethereum の量をセットします。デフォルト値は 0.01 Ether となっています。

ETH_DEFAULT_GAS_PRICE: Ethereum 送信の手数料（Gas）の初期値です。Ethereum の送信時に読者が任意の値に変更可能です。デフォルト値は 21Gwei です。通常はデフォルト値のままで良いと思います。

ETH_SUCCESS_MESSAGE: MetaMask を使用して無事に Ethereum を送付するトランザクションが実行されたときに、読者に表示されるメッセージです。

ETH_ERROR_MESSAGE: なんらかの理由で MetaMask を使用したトランザクションに失敗したときに、読者に表示されるメッセージです。

ETH_WEB3_UNAVAILABLE_MESSAGE: MetaMask を使用できないときに、読者に表示されるメッセージです。

コードスニペット（ブログパーツ）のコード

このコードスニペット（ブログパーツ）を、Ethereum の投げ銭・寄付受け入れボタンを表示したい箇所に追加してください。なお、ETH_ADDRESS に設定されている値は必ず自分のウォレットのアドレスに変更してください。

<a href="#"  id="eth_tip_button" onclick="onEthTipButtonClick();">
ETH を送ってこのサイトを応援！
</a>

<script type="text/javascript">
// 必ず自分の Ethereum ウォレットのアドレスを指定してください。
var ETH_ADDRESS = '0x96e530a7a5fdAf3b041BdB8c3ABF30EeD1621eA9';	

// 投げ銭・寄付として受け入れたい Ether の量です。
var ETH_VALUE = '0.01';

// ETH 送信の手数料（Gas）の初期値です（ETH 送信時に変更可能, 単位 wei）				
var ETH_DEFAULT_GAS_PRICE = 21000000000;

// ETH のトランザクションが実行されたときに表示されるメッセージです。
var ETH_SUCCESS_MESSAGE = '応援ありがとうございます！';	

// なんらかの理由でトランザクション実行に失敗したときに表示されるメッセージです。	
var ETH_ERROR_MESSAGE = 'エラーが発生しました';					

// MetaMask が使用できないときに表示されます。
var ETH_WEB3_UNAVAILABLE_MESSAGE = ETH_ADDRESS 
+ ' に Ether を送付して応援いただけると励みになります！よろしくお願いします。';
</script>

<style>
#eth_tip_button {
	position: relative;
	display: inline-block;
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-weight: 500;
	text-decoration: none;
	color: #ffffff;
	background: #00a968;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@0.20.6/dist/web3.min.js"></script>
<script type="text/javascript">
function onEthTipButtonClick() {
	var isWeb3Available = false;
	if (typeof web3 !== 'undefined') {
		web3 = new Web3(web3.currentProvider);
		isWeb3Available = true;
	}
	if (isWeb3Available && web3.eth.defaultAccount) {
		sendEther();
	} else {
		alert(ETH_WEB3_UNAVAILABLE_MESSAGE);
	}	
};

function sendEther() {
	var weiValue = web3.toWei(ETH_VALUE, 'ether');
	var transactionObj = {
		to: ETH_ADDRESS,
		value: weiValue,
		gasPrice: ETH_DEFAULT_GAS_PRICE
	};
	web3.eth.sendTransaction(transactionObj, function(error, txHash) {
		if (error) {
			alert(ETH_ERROR_MESSAGE);
		} else {
			alert(ETH_SUCCESS_MESSAGE);
		}
	});
}
</script>

おまけ: Ether の量を指定できるバージョン

上記のコードを少しだけ改造し、読者が送りたい Ether の量を指定できるようにしたコードです。このコードを追加すると、次のように表示されます。

<input id="eth_tip_value" type="number" value="0.01" step="0.01" min="0">
<a href="#"  id="eth_tip_button" onclick="onEthTipButtonClick();">
ETH を送ってこのサイトを応援！
</a>

<script type="text/javascript">
// 必ず自分の Ethereum ウォレットのアドレスを指定してください。
var ETH_ADDRESS = '0x96e530a7a5fdAf3b041BdB8c3ABF30EeD1621eA9';	
// 投げ銭または寄付で受け入れたい Ether のデフォルト値です（ETH 送信時に変更可能です）
var ETH_VALUE = '0.01';
// ETH 送信の手数料（Gas）の初期値です（ETH 送信時に変更可能, 単位 wei）				
var ETH_DEFAULT_GAS_PRICE = 21000000000;
// ETH のトランザクションが実行されたときに表示されるメッセージです。
var ETH_SUCCESS_MESSAGE = '応援ありがとうございます！';	
// なんらかの理由でトランザクション実行に失敗したときに表示されるメッセージです。	
var ETH_ERROR_MESSAGE = 'エラーが発生しました';					
// MetaMask が使用できないときに表示されます。
var ETH_WEB3_UNAVAILABLE_MESSAGE = ETH_ADDRESS 
+ ' に Ether を送付して応援いただけると励みになります！よろしくお願いします。';
</script>

<style>
#eth_tip_button {
	position: relative;
	display: inline-block;
	padding: 0.2em 0.4em;
	border-radius: 3px;
	font-weight: 500;
	text-decoration: none;
	color: #ffffff;
	background: #00a968;
}
#eth_tip_value {
	width: 55px;
	font-size: 18px;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@0.20.6/dist/web3.min.js"></script>
<script type="text/javascript">
function onEthTipButtonClick() {
	var isWeb3Available = false;
	if (typeof web3 !== 'undefined') {
		web3 = new Web3(web3.currentProvider);
		isWeb3Available = true;
	}
	if (isWeb3Available && web3.eth.defaultAccount) {
		sendEther();
	} else {
		alert(ETH_WEB3_UNAVAILABLE_MESSAGE);
	}	
};

function sendEther() {
	var ethValue = document.getElementById('eth_tip_value').value;
	var weiValue = web3.toWei(ethValue, 'ether');
	console.log('weiValue: ' + weiValue);
	var transactionObj = {
		to: ETH_ADDRESS,
		value: weiValue,
		gasPrice: ETH_DEFAULT_GAS_PRICE
	};
	web3.eth.sendTransaction(transactionObj, function(error, txHash) {
		if (error) {
			alert(ETH_ERROR_MESSAGE);
		} else {
			alert(ETH_SUCCESS_MESSAGE);
		}
	});
}
</script>

この記事が気に入ったらサポートをしてみませんか？