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

※本記事は 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

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


<script src="https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js"></script>

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