※本記事は Hippopotamus:v0.10.0.3のテストネットに対応しました (2020/10/21現在)
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 -g browserify
nem2-sdk のインストール。今回はTESTNET(Hippopotamus:v0.10.0.3)のバージョンに合わせてNEM Groupが提供する0.21.0を入れます。
npm install nem2-sdk@0.21.0
nem2-sdkを入れたnode_modulesの配置しているディレクトリに移動し、ブラウザバンドル版を書き出します。
-r オプションをつけて外部js側からrequireが使えるようにしておきます。
browserify -r ./node_modules/symbol-sdk -o symbol-sdk-0.21.0.js
さて、バンドル化されたら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.21.0.js"></script>
<script>
const nem = require("/node_modules/symbol-sdk");
const accountHttp = new nem.AccountHttp("http://api-01.ap-northeast-1.0.10.0.x.symboldev.network:3000");
const address = nem.Address.createFromRawAddress("TCFV4TKV6RMN7QPR3PTBXDWIJCLXDVKSIPEEUAQ");
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.21.0.js"></script>
次に 変数にライブラリを読み込みます。
browserifyした時のフルパスで指定します。
const nem = require("/node_modules/nem2-sdk");
これで nem. と指定することで nem2-sdkのクラスが使えるようになります。
ソースコードの解説は以下のページに載っているので参考にしてください。
[アカウントの情報を取得する | nem developer center]
(https://nemtech.github.io/ja/guides/account/getting-account-information.html)
ビルド環境のない方のために、出力したものを配置しておりますので自由にご利用ください。
<script src="https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js"></script>
次回は、rxjsと組み合わせて、リスト状のAPIレスポンスを処理する方法を説明します。