Wait a moment...
NEMもくもく会@東京に参加させて頂きました！(NEM APIのトライ(モザイク残高取得)、nemlog記事投稿、趣味のバンド活動のwebページ・ライブ動画編集等)
こんにちは。サラリーマン投資家です。今日は、NEMもくもく会@東京に参加させて頂きました。NEMに関することをやりたい人が集まって「もくもく(と作業？ というか各自マイペースに和気あいあいと自分なりにやりたいことを?)」する会で、今回、2回目の参加となります。素敵なお菓子を頂ける(!)他、NEM界隈の方々と緩やかに穏やかに楽しく繋がれる楽しいイベントなので、もし興味ある方はぜひご検討を(^^♪
まずは会場の雰囲気をどうぞ。オシャレなオフィスですね。
今日はNEMもくもく会に参加しています。会場はとてもオシャレなオフィスです^_^#NEMもくもく会 pic.twitter.com/QThMRLmEtO
— サラリーマン投資家 (@salaryman_tousi) 2019年2月23日
そして恒例のお菓子タイムのご紹介です。美味しく頂きました(^^♪
恒例のおやつタイムは、千疋屋のスイーツと、安定感のあるチョコでしたヽ(=´▽`=)ﾉ
— サラリーマン投資家 (@salaryman_tousi) 2019年2月23日
美味しく頂きました^_^
今後のもくもく会でやってみたいことを和気あいあいと語った後、再び、もくもくタイムへ。ラストスパート！#NEMもくもく会 pic.twitter.com/FRHATkNC8r
さて、ここからは今日のもくもく会での目標です。
- 前回のもくもく会では、あるアドレスのXEM残高を、APIを叩いて取得して表示する簡単なhtmlファイルを作成しました。今回は、あるアドレスのモザイクの残高を、APIを叩いて取得して表示する簡単なhtmlファイルを作成したいと思います。
- もくもく会の成果は、前回同様、nemlog記事にします。(この記事です。)
- (ここからは、時間的にちょっとできるかどうか…。)もし時間が取れれば、趣味のバンド活動のブログサイトやライブ動画の編集をやりたいと思います。(ここはNEM関係ありません…が、いつか、ライブのチケット販売等でNEMの仕組みを使ってみたり、バンドのオリジナルトークンを作って遊んでみたりしたいです。)
まずは1の内容です。やりたいことは以下の通りです。
対象アドレス：NBU7T6NGPNHASSDUTLV66OYZJHECHVZY6ABL5SQQ
保有モザイク：cam.etf:vti, cam.etf:bnd, cam.etf:vt, cam.etf:bndwの残高を取得して表示する。(他にもlevy悪用したSCAMモザイクがいつの間にか入っていました。うっとおしいですね…。確か、どなたか、消し方のノウハウをアップして頂いていたと思うので、後で調べて消しておこうと思います。)
まずは完成したコードと実行結果を以下に記載します。
htmlファイル
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
</head>
<body>
<script>
//NEMのAPIリクエストに必要な情報の定義
const node_address = "http://nemlovely1.supernode.me";
const port_no = ":7890";
const api_path = "/account/mosaic/owned";
const address_set = "?address=";
const address = "NBU7T6NGPNHASSDUTLV66OYZJHECHVZY6ABL5SQQ";
const url_endpoint = node_address + port_no + api_path + address_set + address;
//残高を取りたい各モザイクの残高を入れる変数
var balance_vti = 0;
var balance_bnd = 0;
var balance_vt = 0;
var balance_bndw = 0;
//NEMのAPIのエンドポイントにアクセスしてJSONを受け取る関数の定義
const req = new XMLHttpRequest();
req.onreadystatechange = function() {
//404エラーの場合の例外処理
if (req.status == 404) {
console.log("404エラー。指定したページは存在しません。");
return false;
}
//その他エラーの場合の例外処理
if (!(req.readyState == 4 && req.status == 200)){
console.log("リクエストで不明なエラーが発生しました。")
return false;
}
//エラーなくレスポンスが返ってきたらjsonオブジェクトに
const json = (function(raw) {
try {
return JSON.parse(raw);
} catch (err) {
console.log("レスポンスで不明なエラーが発生しました。")
return false;
}
})(req.responseText);
//jsonが不正な場合の例外処理
if (!json) {
return false;
}
//htmlにjsonをそのまま文字列として表示
document.write("オリジナルのJSONレスポンス" + "<br>");
document.write(JSON.stringify(json) + "<br>");
//保有モザイク種類の数を取得
document.write("保有モザイク種類の数" + "<br>");
document.write(json.data.length + "<br>");
//残高表示
document.write("残高" + "<br>")
//cam.etf:vtiの残高を総当たり的に取得して表示
for (var i = 0; i < json.data.length; i++) {
if (json.data[i].mosaicId.namespaceId == "cam.etf" && json.data[i].mosaicId.name == "vti"){
balance_vti = json.data[i].quantity / 1000000
}
}
document.write("VTI： " + balance_vti + "<br>");
//cam.etf:bndの残高を総当たり的に取得して表示
for (var i = 0; i < json.data.length; i++) {
if (json.data[i].mosaicId.namespaceId == "cam.etf" && json.data[i].mosaicId.name == "bnd"){
balance_bnd = json.data[i].quantity / 1000000
}
}
document.write("BND： " + balance_bnd + "<br>");
//cam.etf:vtの残高を総当たり的に取得して表示
for (var i = 0; i < json.data.length; i++) {
if (json.data[i].mosaicId.namespaceId == "cam.etf" && json.data[i].mosaicId.name == "vt"){
balance_vt = json.data[i].quantity / 1000000
}
}
document.write("VT： " + balance_vt + "<br>");
//cam.etf:bndwの残高を総当たり的に取得して表示
for (var i = 0; i < json.data.length; i++) {
if (json.data[i].mosaicId.namespaceId == "cam.etf" && json.data[i].mosaicId.name == "bndw"){
balance_bndw = json.data[i].quantity / 1000000
}
}
document.write("BNDW： " + balance_bndw + "<br>");
}
//リクエスト作成
req.open("GET", url_endpoint, true);
//リクエスト送信(＆実行)
req.send();
</script>
</body>
</html>実行結果
オリジナルのJSONレスポンス
{"data":[{"quantity":338950000,"mosaicId":{"namespaceId":"nem","name":"xem"}},{"quantity":2,"mosaicId":{"namespaceId":"pontifier","name":"fuck_this_shitcoin_to_the_ground"}},{"quantity":22000000,"mosaicId":{"namespaceId":"cam.etf","name":"bndw"}},{"quantity":22000000,"mosaicId":{"namespaceId":"cam.etf","name":"vt"}},{"quantity":22000000,"mosaicId":{"namespaceId":"cam.etf","name":"vti"}},{"quantity":22000000,"mosaicId":{"namespaceId":"cam.etf","name":"bnd"}}]}
保有モザイク種類の数
6
残高
VTI： 22
BND： 22
VT： 22
BNDW： 22
すみませんが実はかなり手抜きをしています。
APIを叩いて返ってくる残高は、各モザイクの最小単位の何倍かという数値になっているため、各モザイクの最小単位が1なのか、0.000001なのかによって、得られた数値に適切な倍率をかける処理が必要になります。今回は色々やっていて時間切れになってしまったため、ここの処理は手動でやりました。本当であれば、各モザイクの定義情報をAPIで取得して表示するという処理が必要なはずです。
また、プログラムの書き方も同じ処理を丸ごとコピペしていて、ちょっとカッコ悪いですね。for文の使い方等も含め、もっとスマートに書けるよう、勉強して、少しずつ実力をつけていきたいと思います。
ただ、いつもNEMについて学んでいて思うのは、初心者でもこれくらい簡単にブロックチェーンを扱えるということです。一般的な知識のあるwebエンジニアさんであれば、勘所をつかめば、本格的なwebアプリでもすぐ作れちゃうのでは？といつも感じています。これはDApps開発の際に、より本質的な価値を産み出す工程に注力できることを意味します。もしまだNEMを触ったことが無いwebエンジニアの方や、他のブロックチェーンのDApps開発で途方に暮れた方がいらっしゃったら、ぜひ、試しにNEMのAPI等を使ってお試ししてみてはいかがでしょうか。
