この記事では、Symbol SDKを使ってアドレスとプライベートキーの発行をするプログラムについて説明します。
ここでは、Webページ制作に使うHTMLファイルとブラウザに利用できるようにカスタマイズしたSymbol SDKが同じフォルダ内にあるものとして説明します。
なので、Symbol SDKを用意していない方は、以下の記事を参照してください。
Symbolのアドレスとプライベートキーの発行プログラム
以下のコードについて説明をします。
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit-icons.min.js"></script>
<script src="symbol-sdk-0.21.0.js"></script>
<title>Symbolアドレス生成</title>
</head>
<body style="margin:30px;">
<h1>Symbolを触ってみる</h1>
<h2>アドレスを取得しよう</h2>
<div>
Address:<span id="address">Nothing</span>
</div>
<div>
Private Key:<span id="private">Nothing</span>
</div>
<a id="address_get" class="uk-button uk-button-primary" style="margin-top:10px;">
アドレス取得</a>
<script>
const symbol=require("/node_modules/symbol-sdk");
$('#address_get').click(function(){
let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.TEST_NET);
$('#address').text(wallet.address.plain());
$('#private').text(wallet.privateKey);
});
</script>
</body>
</html>このコードの完成版が以下になります。
このことについて説明します。
head要素の中身について
まず、head要素をみてみます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
この要素で、jQueryを読み込みます。
以下の3行でCSSのフレームワークであるUIKitを読み込んでいます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit-icons.min.js"></script>
また、 Symbol SDKをHTMLファイルと同じフォルダ内に置いている上で、このようにして書きます。
<script src="symbol-sdk-0.21.0.min.js"></script>
このように書くことで、Symbol SDKをHTMLファイルに読むこむことができるようになります。
また、以下のようにして書くと、Symbol SDKをネットワークからダウンロードして読む込みこともできます。
<script src=“https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js”></script>
body要素の中身について
ここからbody要素の中身をみていきます。
以下のコードでWEBページのレイアウトを表示します。
<h1>Symbolを触ってみる</h1>
<h2>アドレスを取得しよう</h2>
<div>
Address:<span id="address">Nothing</span>
</div>
<div>
Private Key:<span id="private">Nothing</span>
</div>
<a id="address_get" class="uk-button uk-button-primary" style="margin-top:10px;">
アドレス取得</a>
この実際のレイアウトが以下のようになります。
それぞれについて説明します。
以下の要素で、見出しをを表示させます。
<h1>Symbolを触ってみる</h1>
<h2>アドレスを取得しよう</h2>
この要素で、addressとプライベートキーを表示します。
<div>
Address:<span id="address">Nothing</span>
</div>
また、この要素でプライベートキーを表示します。
<div>
Private Key:<span id="private">Nothing</span>
</div>
以下の要素で、「アドレス取得」と書かれている実行ボタンを実装します。
<a id="address_get" class="uk-button uk-button-primary" style="margin-top:10px;">
アドレス取得</a>
Script要素の中身について
ここから、script要素をみていきます。
以下の1行で、Symbol SDKを呼び出す宣言になります。
const symbol=require("/node_modules/symbol-sdk");
このように書く事で、symbolという定数にSymbol SDK内の情報を代入することになります。ここで、requireはnode.jsで定義されるコマンドです。こうすることで、定数symbolはオブジェクトになります。
それ以降、symbolという定数を使う事で、Symbol SDKの中身を使えるようになります。この1行は基本的にコピペでOKです。また、ここではsymbolを定数名としましたが、定数名はお好みでOKです。
以下の行はjQueryで書かれていて、IDをaddress_getとした要素(「アドレス取得」と書かれたボタン)をクリックすると、
$('#address_get').click(function(){
以降に書かれているコードを実行するというものです。
そのコードが以下のものになります。
let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.TEST_NET);
$('#address').text(wallet.address.plain());
$('#private').text(wallet.privateKey);
この3行について説明します。
let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.TEST_NET);
walletという変数を用意し、定数symbolの中のAccount.generateNewAccount命令を使えば、アドレスとプライベートキーが発行されます。ここで、generateNewAccountの引数は、ネットワークの種類を表し、ここではsymbol.NetworkType.TEST_NETとすることで、テストネットとしています。
また、テストネットは152番のネットワークとしているので、
let wallet = symbol.Account.generateNewAccount(152);
としても構いません。
メインネットがローンチされたときは、ここをこのように書き換えるだけでOKの予定です。
let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.MAIN_NET);
以上の一文は基本的にコピペで構いません。
この命令を実行すると、アドレスやプライベートキーといった情報が変数walletに代入されます。
次に
$('#address').text(wallet.address.plain());
と書く事で、発行されたアドレスがID「address」とした要素にアドレスが出力されます。
つまり、以下のコードに書き出すこととなります。
<div>
Address:<span id="address">Nothing</span>
</div>
また、
$('#private').text(wallet.privateKey);
と書く事で、発行されたアドレスがID「address」とした要素にプライベートキーが出力されます。
つまり、以下のコードに書き出すこととなります。
<div>
Private Key:<span id="private">Nothing</span>
</div>
すると「アドレス取得」と書かれたボタンをクリックすることで実行すると、以下のようになります。
※この記事は、nemlogで企画されたイベントであるしゅうさんの勉強会「しゅうさんといっしょ!」の内容の一部をまとめたものです。