前回はブラウザの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