Symbol SDKを利用したアドレスとプライベートキーの発行プログラム

<p>この記事では、Symbol SDKを使ってアドレスとプライベートキーの発行をするプログラムについて説明します。
<p>ここでは、Webページ制作に使うHTMLファイルとブラウザに利用できるようにカスタマイズしたSymbol SDKが同じフォルダ内にあるものとして説明します。</p>
<p>なので、Symbol SDKを用意していない方は、以下の記事を参照してください。</p>
<p><strong><a href="https://qiita.com/YutopianF/items/f2196b844487b0e9ef7a" target="_blank" rel="noopener">ブラウザ環境でのSymbolの実行環境の構築について</a></strong></p>

<h2 style="background-color: #44004e; padding: 8px;"><strong><span style="font-size: 16pt; color: #ffffff;">Symbolのアドレスとプライベートキーの発行プログラム</span></strong></h2>
<p>以下のコードについて説明をします。</p>
<pre class="language-markup"><code>&lt;html lang="ja"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/css/uikit.min.css" /&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit-icons.min.js"&gt;&lt;/script&gt;
    &lt;script src="symbol-sdk-0.21.0.js"&gt;&lt;/script&gt;
    &lt;title&gt;Symbolアドレス生成&lt;/title&gt;
  &lt;/head&gt;

  &lt;body style="margin:30px;"&gt;
    &lt;h1&gt;Symbolを触ってみる&lt;/h1&gt;
    &lt;h2&gt;アドレスを取得しよう&lt;/h2&gt;
    &lt;div&gt;
       Address:&lt;span id="address"&gt;Nothing&lt;/span&gt;
    &lt;/div&gt;
    &lt;div&gt;
       Private Key:&lt;span id="private"&gt;Nothing&lt;/span&gt;
    &lt;/div&gt;
    &lt;a id="address_get" class="uk-button uk-button-primary" style="margin-top:10px;"&gt;
アドレス取得&lt;/a&gt;
    &lt;script&gt;
      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);
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>

<p>このコードの完成版が以下になります。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51370/1604482577スクリーンショット 2020-11-04 18.35.53.png" alt="" width="402" height="287" /></p>
<p>このことについて説明します。</p>

<h2><span style="font-size: 18pt; background-color: #44004e; color: #ffffff;"><strong>head要素の中身について</strong></span></h2>
<p>まず、head要素をみてみます。</p>
<p><em><strong>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt; </strong></em><br /><em><strong>&lt;/script&gt;</strong></em></p>
<p>この要素で、jQueryを読み込みます。</p>
<p>&nbsp;</p>
<p>以下の3行でCSSのフレームワークであるUIKitを読み込んでいます。</p>
<p><em><strong>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/css/uikit.min.css" /&gt;</strong></em><br /><em><strong>&lt;script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit.min.js"&gt;&lt;/script&gt;</strong></em><br /><em><strong>&lt;script src="https://cdn.jsdelivr.net/npm/uikit@3.5.8/dist/js/uikit-icons.min.js"&gt;&lt;/script&gt;</strong></em></p>

<p><span style="font-size: 1em;">また、 Symbol SDKをHTMLファイルと同じフォルダ内に置いている上で、このようにして書きます。</span></p>
<p><em><strong> &lt;script src="symbol-sdk-0.21.0.min.js"&gt;&lt;/script&gt;</strong></em></p>
<p>このように書くことで、Symbol SDKをHTMLファイルに読むこむことができるようになります。</p>
<p>また、以下のようにして書くと、Symbol SDKをネットワークからダウンロードして読む込みこともできます。</p>
<p><em><strong>&lt;script src=&ldquo;https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js&rdquo;&gt;&lt;/script&gt;</strong></em></p>

<h2><span style="font-size: 18pt; background-color: #44004e; color: #ffffff;"><strong>body要素の中身について</strong></span></h2>
<p>ここからbody要素の中身をみていきます。</p>
<p>以下のコードでWEBページのレイアウトを表示します。</p>
<p>&nbsp;<em> <strong>&lt;h1&gt;Symbolを触ってみる&lt;/h1&gt;</strong></em><br /><em><strong>&nbsp; &lt;h2&gt;アドレスを取得しよう&lt;/h2&gt;</strong></em><br /><em><strong>&nbsp; &lt;div&gt;</strong></em><br /><em><strong>&nbsp; &nbsp; &nbsp; Address:&lt;span id="address"&gt;Nothing&lt;/span&gt;</strong></em><br /><em><strong>&nbsp; &nbsp;&lt;/div&gt;</strong></em><br /><em><strong>&nbsp; &nbsp;&lt;div&gt;</strong></em><br /><em><strong>&nbsp; &nbsp; &nbsp; Private Key:&lt;span id="private"&gt;Nothing&lt;/span&gt;</strong></em><br /><em><strong>&nbsp; &nbsp; &lt;/div&gt;</strong></em><br /><em><strong>&nbsp; &nbsp; &nbsp;&lt;a id="address_get" class="uk-button uk-button-primary" style="margin-top:10px;"&gt;</strong></em><br /><em><strong>アドレス取得&lt;/a&gt;</strong></em></p>
<p>この実際のレイアウトが以下のようになります。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51370/1604482577スクリーンショット 2020-11-04 18.35.53.png" alt="" width="402" height="287" /></p>
<p>それぞれについて説明します。</p>
<p>以下の要素で、見出しをを表示させます。</p>
<p>&nbsp;<em> <strong>&lt;h1&gt;Symbolを触ってみる&lt;/h1&gt;</strong></em><br /><em><strong>&nbsp; &lt;h2&gt;アドレスを取得しよう&lt;/h2&gt;</strong></em></p>
<p>この要素で、addressとプライベートキーを表示します。</p>
<p><em><strong>&lt;div&gt;</strong></em><br /><em><strong>&nbsp; &nbsp; &nbsp; Address:&lt;span id="address"&gt;Nothing&lt;/span&gt;</strong></em><br /><em><strong>&lt;/div&gt;</strong></em></p>
<p>また、この要素でプライベートキーを表示します。</p>
<p><em><strong>&nbsp;&lt;div&gt;</strong></em><br /><em><strong>&nbsp; &nbsp; &nbsp; Private Key:&lt;span id="private"&gt;Nothing&lt;/span&gt;</strong></em><br /><em><strong>&nbsp;&lt;/div&gt;</strong></em></p>

<p>以下の要素で、「アドレス取得」と書かれている実行ボタンを実装します。</p>
<p><em><strong>&nbsp; &nbsp;&lt;a id="address_get" class="uk-button uk-button-primary" style="margin-top:10px;"&gt;</strong></em><br /><em><strong>アドレス取得&lt;/a&gt;</strong></em></p>

<h2><span style="font-size: 18pt; background-color: #44004e; color: #ffffff;"><strong>Script要素の中身について</strong></span></h2>
<p>ここから、script要素をみていきます。<br />以下の1行で、Symbol SDKを呼び出す宣言になります。</p>
<p><em><strong>const symbol=require("/node_modules/symbol-sdk");</strong></em></p>
<p>このように書く事で、symbolという定数にSymbol SDK内の情報を代入することになります。ここで、requireはnode.jsで定義されるコマンドです。こうすることで、定数symbolはオブジェクトになります。<br />それ以降、symbolという定数を使う事で、Symbol SDKの中身を使えるようになります。この1行は基本的にコピペでOKです。また、ここではsymbolを定数名としましたが、定数名はお好みでOKです。</p>

<p>以下の行はjQueryで書かれていて、IDをaddress_getとした要素(「アドレス取得」と書かれたボタン)をクリックすると、</p>
<p><em><strong>$('#address_get').click(function(){</strong></em></p>
<p>以降に書かれているコードを実行するというものです。</p>
<p>そのコードが以下のものになります。</p>
<p><em>&nbsp;<strong> let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.TEST_NET);</strong></em><br /><em><strong>&nbsp; $('#address').text(wallet.address.plain());</strong></em><br /><em><strong>&nbsp; $('#private').text(wallet.privateKey);</strong></em></p>
<p>この3行について説明します。</p>

<p><em><strong style="color: #555555; font-size: 1em;">&nbsp; let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.TEST_NET);</strong></em></p>
<p>walletという変数を用意し、定数symbolの中の<strong>Account.generateNewAccount</strong>命令を使えば、アドレスとプライベートキーが発行されます。ここで、<strong>generateNewAccount</strong>の引数は、ネットワークの種類を表し、ここではsymbol.NetworkType.TEST_NETとすることで、テストネットとしています。<br />また、テストネットは152番のネットワークとしているので、</p>
<p><em><strong style="color: #555555; font-size: 1em;"> let wallet = symbol.Account.generateNewAccount(152);</strong></em></p>
<p>としても構いません。</p>
<p>メインネットがローンチされたときは、ここをこのように書き換えるだけでOKの予定です。</p>
<p><strong>&nbsp; <em>let wallet = symbol.Account.generateNewAccount(symbol.NetworkType.MAIN_NET);</em></strong></p>
<p>以上の一文は基本的にコピペで構いません。</p>
<p>この命令を実行すると、アドレスやプライベートキーといった情報が変数walletに代入されます。</p>
<p>次に</p>
<p><strong>&nbsp;<em> $('#address').text(wallet.address.plain());</em></strong></p>
<p>と書く事で、発行されたアドレスがID「address」とした要素にアドレスが出力されます。</p>
<p>つまり、以下のコードに書き出すこととなります。</p>
<p><strong> <em>&lt;div&gt;</em><br /><em>&nbsp; &nbsp; &nbsp; Address:&lt;span id="address"&gt;Nothing&lt;/span&gt;</em><br /><em>&lt;/div&gt;</em></strong></p>
<p>また、</p>
<p><em><strong>&nbsp; $('#private').text(wallet.privateKey);</strong></em></p>
<p>と書く事で、発行されたアドレスがID「address」とした要素にプライベートキーが出力されます。</p>
<p>つまり、以下のコードに書き出すこととなります。</p>
<p><strong> <em>&nbsp;&lt;div&gt;</em><br /><em>&nbsp; &nbsp; &nbsp; Private Key:&lt;span id="private"&gt;Nothing&lt;/span&gt;</em><br /><em>&nbsp;&lt;/div&gt;</em></strong></p>

<p>すると「アドレス取得」と書かれたボタンをクリックすることで実行すると、以下のようになります。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51370/1604382831スクリーンショット 2020-11-03 14.53.20.png" alt="" width="746" height="364" /></p>

<p>※この記事は、nemlogで企画されたイベントであるしゅうさんの勉強会「しゅうさんといっしょ!」の内容の一部をまとめたものです。</p>