JavaScript
browserify
Blockchain
NEM
catapult

nem2-sdkを使ってブラウザで動くブロックチェーンのアプリを開発する方法

nem2-sdkはcatapultのAPIアクセスを簡便に行える開発ツールです。さまざまな言語で開発が進められており、TypeScript,JavaScript版がもっとも進んでいます。

以下のリポジトリで最新版を確認することができます。

nemtech/nem2-sdk-typescript-javascript

しかし、Node.jsでの使用が前提となっており、ブラウザで利用するための環境は整っていません。

今回はbrowserifyを利用してnem2-sdkをブラウザでも利用できるようにしてみます。


Node.js npm のインストール

ブラウザで利用するバンドル版を作るためにNode.jsをインストールする必要があります。Macにはnem2-sdkが入りませんでしたので、amazon linuxに入れました。

このあたりを参考に

Amazon Linux - Node.js と npm をインストールする

browserifyのインストール

npm install browserify

nem2-sdk のインストール。今回はNEM財団が提供するCatapult(Cow) TESTNETのバージョンに合わせて0.11.6を入れます。

npm install nem2-sdk@0.11.6

ブラウザバンドル版を書き出します。

browserify -r /home/ec2-user/node_modules/nem2-sdk -o nem2-sdk-0.11.6.js

注意点が2つあります。

-r オプションをつけて外部js側からrequireが使えるようにしておきます。

-r オプションをつけた場合、browserify化するモジュールはフルパスで指定する必要があります。

2つめはもっとスマートな方法があるかと思いますので、ご存知の方は教えてください。

さて、バンドル化されたらhtmlファイルから読み込んでみましょう。

サンプルプログラムを例示します。

<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

<title>10_account</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="nem2-sdk-0.11.6.js"></script>
<script>
const nem = require("/home/ec2-user/node_modules/nem2-sdk");

const accountHttp = new nem.AccountHttp("http://13.114.200.132:3000");
const address = nem.Address.createFromRawAddress("SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2");

accountHttp
.getAccountInfo(address)
.subscribe(
accountInfo => {
$("#account_pubkey").text(accountInfo.publicKey);
$("#account_address").text(accountInfo.address.address);
console.log(address);
},
err => console.error(err)
);
</script>
</head>
<body>
<div class="container">
<div id="items-ctrl">
<ul>
<li>[PUBLICK_KEY]:<span id="account_pubkey"></span></li>
<li>[ADDRESS]:<span id="account_address"></span></li>
</ul>
</div>
</div>
</body>
</html>

まず、nem2-sdkファイルの場所を指定します。

<script src="nem2-sdk-0.11.6.js"></script>

次に 変数にライブラリを読み込みます。

browserifyした時のフルパスで指定します。


const nem = require("/home/ec2-user/node_modules/nem2-sdk");

これで nem. と指定することで nem2-sdkのクラスが使えるようになります。

ソースコードの解説は以下のページに載っているので参考にしてください。

アカウントの情報を取得する | nem developer center

ビルド環境のない方のために、出力したものを配置しておりますので自由にご利用ください。


<script src="https://s3-ap-northeast-1.amazonaws.com/xembook.net/nem2-sdk/nem2-sdk-0.11.6.js"></script>

次回は、rxjsと組み合わせて、リスト状のAPIレスポンスを処理する方法を説明します。