LoginSignup
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-03

この記事では、Symbol SDKを使ってアドレスとプライベートキーの発行をするプログラムについて説明します。

ここでは、Webページ制作に使うHTMLファイルとブラウザに利用できるようにカスタマイズしたSymbol SDKが同じフォルダ内にあるものとして説明します。

なので、Symbol SDKを用意していない方は、以下の記事を参照してください。

ブラウザ環境でのSymbolの実行環境の構築について

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で企画されたイベントであるしゅうさんの勉強会「しゅうさんといっしょ!」の内容の一部をまとめたものです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4