今回はNEMのアカウント情報を取得してブラウザ情報に表示する方法を説明します。
HTML構成は以下の通りです。特定のアドレスに対してその所有するモザイクIDと残高を表示します。
<h3>アドレス:<h3>
<div id="address"></div>
<h3>モザイク:<h3>
<table id="table" class="table">
<thead><tr>
<th>ID</th>
<th>残高</th>
</tr></thead>
</table>
テーブルを使用するので見やすくするためにスタイルシートも追加します。Bootstrap4を使用します。
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
>
ではプログラムを記述していきましょう。
今回からノードが持っている情報を取りに行きます。ですのでHTTPで接続するためのコマンドを宣言します。
const accountHttp = new nem.AccountHttp(NODE);
調査対象のアカウントからアドレスクラスを生成します。今回はblock=1 に刻まれていたアカウントを拝借することにしました。
const alice = nem.Address.createFromRawAddress("SBSXJRXCHIFQIA4RK2DKOYXL43IXPQWSC5FES3XB");
次にnem2-sdkを利用してノードへ問い合わせを行います。
accountHttp.getAccountInfo(alice)
.subscribe(_=>{
$("#address").text(_.address.address);
});
今回覚えるコマンドはこれ。
AccountHttp(NODE).getAccountInfo(Address)
アドレス情報を一括で取得し、後続する .subscribe の _ へ情報を出力します。
ブラウザのコンソールで確認すると以下のような情報が詰め込まれているのがわかります。
今回欲しい場所はadressとmosaicsですね。
addressは前回同様 _.address.address で取得できます。そのままjQueryで画面に出力しましょう。
mosaics は配列構造になっているためループ処理が必要です。
for( mosaic of _.mosaics){
$("#table").append("<tr>"
+"<td>"+ mosaic.id.toHex() + "</td>"
+"<td>"+ mosaic.amount.toString() + "</td>"
+ "</tr>"
);
}
まとめ
全体的には以下のようなファイルになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h3>アドレス:<h3>
<div id="address"></div>
<h3>モザイク:<h3>
<table id="table" class="table">
<thead><tr>
<th>ID</th>
<th>残高</th>
</tr></thead>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://s3-ap-northeast-1.amazonaws.com/xembook.net/nem2-sdk/symbol-sdk-0.18.0.js"></script>
<script>
const NODE = 'https://jp12.nemesis.land:3001';
const nem = require("/node_modules/symbol-sdk");
const accountHttp = new nem.AccountHttp(NODE);
const alice = nem.Address.createFromRawAddress("TCTBZLHW5R6VQW2TER33WCYAQ5JK2K5MZAUKKWWJ");
accountHttp.getAccountInfo(alice)
.subscribe(_=>{
$("#address").text(_.address.address);
for( mosaic of _.mosaics){
$("#table").append("<tr>"
+"<td>"+ mosaic.id.toHex() + "</td>"
+"<td>"+ mosaic.amount.toString() + "</td>"
+ "</tr>"
);
}
});
</script>
</body>
</html>
これでノードに接続して取得した情報を画面上に表示することができました。以下のように表示されていたらOKです。
このままでは、モザイクIDがどんな名前なのか、残高の少数桁はいくらなのかいろいろわからないままですね。
これを解決するためには、取得した情報をたよりに再度ノードに問い合わせを行う必要があります。かなり高度なrxjsの技術を必要とするので、これはまた別の機会に説明します。
今回の注目点は、ブラウザを利用して直接ノードの情報を取りに行くことができたということです。当たり前のように見えますが、一般的にブロックチェーンの情報はインフラ社などの一般企業や独自に建てたサーバがキャッシュしておいた情報を見に行くことがほとんどです。NEMテクノロジーではノードにREST機能が内包されているため、このようにノードの情報を直接見ることが可能になるのです。
記事一覧
NEM開発事始め(1) HTMLファイルの作成とNEMアカウントの生成
NEM開発事始め(2) NEMアカウント情報の取得と表示
NEM開発事始め(3) NEMトランザクション履歴の取得と表示
NEM開発事始め(4) NEM送金トランザクションの実行