Wait a moment...
NEM APIのトライと、より良い証券サービス開発の野望について(モザイク残高取得、残高をドーナツグラフ状に表示)
こんにちは。サラリーマン投資家です。前回のNEMもくもく会では、NEMのAPIのトライとして、モザイク残高を取得して表示するhtmlを作成しました。
本当は、モザイク残高をドーナツグラフ状に表示させるところまで終わらせたかったのですが、当日中にはできず、今日、ようやくそこまでたどり着くことができたので、nemlog記事にて公開させて頂きます。
やりたいこと
対象アドレス：NBU7T6NGPNHASSDUTLV66OYZJHECHVZY6ABL5SQQ
保有モザイク：cam.etf:vt, cam.etf:vti, cam.etf:bndw, cam.etf:bndの残高を取得して、ドーナツグラフ状に表示する。
事前準備
Chart.js
javascriptでのグラフ描画について少し調べたところ、Chart.jsというライブラリが使いやすそうでしたので、これを利用することにします。
2019/3/10時点での最新バージョンのソースコードを以下URLからダウンロードします。zipファイルをダウンロードして展開し、distフォルダ内のChart.jsファイルをコピーして、以下のindex.htmlと同じディレクトリに配置します。
https://github.com/chartjs/Chart.js/releases/tag/v2.7.3
index.html
本体のhtmlファイルは以下の通りとします。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src="Chart.js"></script>
</head>
<body>
<canvas id="myPieChart"></canvas>
<div id="vt"></div>
<div id="vti"></div>
<div id="bndw"></div>
<div id="bnd"></div>
<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_vt = 0;
var balance_vti = 0;
var balance_bndw = 0;
var balance_bnd = 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;
}
//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
}
}
//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
}
}
//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
}
}
//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
}
}
//円グラフのデータセット
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["VT", "VTI", "BNDW", "BND"],
datasets: [{
backgroundColor: [
"#E60012",
"#F39800",
"#FFF100",
"#009944"
],
data: [balance_vt, balance_vti, balance_bndw, balance_bnd]
}]
},
options: {
responsive: true,
cutoutPercentage: 50,
title: {
display: true,
text: "ポートフォリオ"
},
legend: {
position: "top"
}
}
});
document.getElementById("vt").innerHTML = "VT:" + balance_vt;
document.getElementById("vti").innerHTML = "VTI:" + balance_vti;
document.getElementById("bndw").innerHTML = "BNDW:" + balance_bndw;
document.getElementById("bnd").innerHTML = "BND:" + balance_bnd;
}
//リクエスト作成
req.open("GET", url_endpoint, true);
//リクエスト送信(＆実行)
req.send();
</script>
</body>
</html>
実行結果
本体のindex.htmlをGoogle Chrome等のwebブラウザで開くと以下のようになります。
意図したとおり、ドーナツ状にモザイク残高をグラフ表示させることができました。(とはいえ、正直カッコ悪いコードと感じます。改善案等、ご提案頂けると、大変うれしいです。)
最後に…
なぜこのようなものを作ろうとしているのか？
投資家の中でも特に「インデックス投資」「ETF」「ロボアドバイザー」等について詳しい方は、上記を見てピンとくるものがあるのではないでしょうか。そう、低コストなETFのみを扱い、それらETFの残高をNEMのモザイクの残高に見立てて管理する、超低コストな証券サービスを作りたい( or 利用したい)という野望が自分にあるからです。類似サービスは既にありますが(WealthNavi, THEO, …等)、それらサービスのコストはそれなりに高く、残高管理のDBは極めて厳格な運用がなされており、高コストの一因となっているのでは…と思っています。そのDBをブロックチェーンが代わりに担うことで、圧倒的な低コストが実現できないか？と思っています。
今回、残高照会の画面は、NEMのモザイクの利用と既存のweb技術(それもすごく基本的なものだけ)で、すごく簡単にそれっぽいものが作れることが示せたと思います。
これは本当に初歩の初歩という感じですが、KYCの仕組みや自動積立やリバランスの仕組み等もNEMの仕組みと既存のweb技術の組み合わせで実現できるのでは？と思っています。
もし、業界関係者の方が見てくれていたら、ぜひNEMの仕組みに興味をもって、より良い金融サービスの開発のきっかけにして頂ければとてもうれしいです。
