暗号通貨NEMアカウントの残高履歴をJavaScriptで表示する。 #JavaScript

前回はブラウザのURLを直接叩いてNEMアカウントの情報にアクセスする方法を説明しました。
今回は一歩進めて、JavaScriptでアクセスし、一覧で残高履歴などの情報を表示する方法を説明します。

アドレスはURLの後ろに指定する方式にします。

ttp://nemtest.com?address=NBZNQL2JDWTGUAW237PXV4SSXSPORY43GUSWGSB7

こんな感じです。何度も繰り返しますが、NEMではアカウント情報にアクセスするためにnode.jsなどのサーバを立てる必要はありません。一般的に使われているブラウザでノードにアクセスするだけで十分です。
"?address=" の後ろの部分を調べたいNEMアドレスにすることで、情報を表示することが出来るようにします。
この追加する文字列をクエリ文字列と言いますが、JavaScriptを利用してパラメータとして抜き出します。

getparam

if (1 < document.location.search.length) {
    var query = document.location.search.substring(1);

    var params = query.split('&');
    var item = new Object();
    for (var i = 0; i < params.length; i++) {
        var element = params[i].split('=');
        var index  = decodeURIComponent(element[0]);
        var value = decodeURIComponent(element[1]);
        item[index] = decodeURIComponent(value);
    }
    address = item["address"];
}

これでaddres=の後ろの部分を変数addressに入れることに成功しました。
次に、NEMのノードへ非同期でアクセスし、アカウント情報を取得します。
非同期通信にはとりあえず、jQueryのAjaxを利用します。

依存ライブラリは一つだけ。

call_jquery

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

処理は以下のような感じです。

ajax

function sendAjax(URL){
    URL +=  address;
    return $.ajax({url: URL ,type: 'GET'});
}

sendAjax(ACCOUNT_TRANSFERS).done(
    function(result){

        var dataArray = result.data;
        dataArray.forEach(function(val){

            var tran = val.transaction;
            //ここにテーブル表示ロジックを挿入

        });
    }
);

これでtranという変数に1件分のトランザクションデータが入りました。
そのデータをHTML上に展開します。表示する器はHTMLは以下のように準備しておきます。

table

<table id="transfers">
    <thead>
        <tr>
            <th>timeStamp</th>
            <th>type</th>
            <th>amount</th>
            <th>recipient</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

#transfersの場所に以下のテーブ要素をループで差し込みます。

append

$( "#transfers tbody" ).append( "<tr>" +
    "<td>" + tran.timeStamp + "</td>" +
    "<td>" + tran.type + "</td>" +
    "<td>" + tran_amount + "</td>" +
    "<td>" + tran_fee + "</td>" +
    "<td>" + tran_recipient + "</td>" +
    "<td>" + tran_signer + "</td>" +
"</tr>" );

同じようにすれば、ハーベスト結果やアカウント情報にも簡単にアクセスできます。
わざわざログインする必要もなく、気になる入金、インポータンス値の変化、ハーベスト結果が常にチェックできます。
Web API機能が提供されているNEMならではのツール開発が簡単にできてしまいますね。

では最後に動くものを置いておきます。
addressの後ろはご自身のアドレスを指定してみてください。
徐々にブラッシュアップして最後にはXEMBookとして、貯める系XEM運用ツールにしていけたらと思っています。

次回は、もう一つ気になる機能をこのXEMBookに追加したいと思います。
乞うご期待！

以下のNEMアドレスは、全てNEM上でエンジニアが活動できるための資金に使用します。
これから私が書く記事に共感していただけましたら、ご寄附いただけると助かります。
NEM ADDRESS: NBZNQL-2JDWTG-UAW237-PXV4SS-XSPORY-43GUSW-GSB7