connecting...
Google translation for articles :
5 NEMBER donated to you!!

NEMもくもく会@東京に参加させて頂きました!(NEM APIのトライ(モザイク残高取得)、nemlog記事投稿、趣味のバンド活動のwebページ・ライブ動画編集等)

nem8.15xem (5) 268 6 0

こんにちは。サラリーマン投資家です。今日は、NEMもくもく会@東京に参加させて頂きました。NEMに関することをやりたい人が集まって「もくもく(と作業? というか各自マイペースに和気あいあいと自分なりにやりたいことを?)」する会で、今回、2回目の参加となります。素敵なお菓子を頂ける(!)他、NEM界隈の方々と緩やかに穏やかに楽しく繋がれる楽しいイベントなので、もし興味ある方はぜひご検討を(^^♪

 

まずは会場の雰囲気をどうぞ。オシャレなオフィスですね。

 

そして恒例のお菓子タイムのご紹介です。美味しく頂きました(^^♪

 

さて、ここからは今日のもくもく会での目標です。

  1. 前回のもくもく会では、あるアドレスのXEM残高を、APIを叩いて取得して表示する簡単なhtmlファイルを作成しました。今回は、あるアドレスのモザイクの残高を、APIを叩いて取得して表示する簡単なhtmlファイルを作成したいと思います。
  2. もくもく会の成果は、前回同様、nemlog記事にします。(この記事です。)
  3. (ここからは、時間的にちょっとできるかどうか…。)もし時間が取れれば、趣味のバンド活動のブログサイトやライブ動画の編集をやりたいと思います。(ここは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等を使ってお試ししてみてはいかがでしょうか。

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
salaryman-toushi
2019-03-03 12:31:03ID:70909

コードが表示できていなかったのを修正しました。原因は私のミスでした。(preタグをコードエディタ側で設定した後にコードエディタ側にそのままソースコードをコピペしていたのでサニタイズされていただけ。ビジュアルエディタ側に貼り付けて解決。お恥ずかしや…(笑))
こんな初心者ですが、少しずつ学習&レベルアップして、素敵なNEMのサービスをいずれ作ってみたい!

salaryman-toushi
2019-02-23 22:20:36ID:63690

>>えっさん&小梅ちゃん@nemlogコメンテーター::さん
いつもコメントありがとうございますm(__)m
プログラム以外の活動(イベントの企画を考えたり、イラストを書いたり、nemlogを書いたり)をされている方もいらっしゃると思います。
NEMのコミュニティに興味がある方が緩く穏やかに繋がりながら、自らのやりたいことをもくもくとやっていく空気がすごく好きです^_^
(私もプログラミング以外に趣味のバンド活動のあれこれをちょっとやってたりしました^_^)
こらからも無理の無い範囲で参加して楽しませて頂ければ…と思っています^_^

salaryman-toushi
2019-02-23 20:10:02ID:63468

>>うぇんじにあ::さん
楽しませて頂きました^_^
頂いたおみやのグレードアップにあわせて?自分自身の技術レベルも上げていけるよう頑張りたいと思います^_^
改めて記事チェックすると肝心のコードが空白になっていました(汗)
後で修正しておこうと思いますm(__)m

うぇんじにあ
2019-02-23 18:31:49ID:63342

お疲れ様でした!!
ここ最近、参加できてなく残念ですが、相変わらず楽しい会になってそうですね!!

そして、千疋屋が登場するとは!
おみやのグレードがどんどん高まっている気がします(^^)

NEMber who posted this article

現役サラリーマンとして、ブログ、資産形成、WEBサービス・ブロックチェーンの勉強など、日々奮闘中。どうぞよろしくお願いします。仮想通貨はNEM押しです。資産形成では米国株ETF、投資信託を中核に、仮想通貨、ソーシャルレンディング等にもポジションを取っています。
15254
0

Why don't you read following articles?