Help us understand the problem. What is going on with this article?

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

※本記事は 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レスポンスを処理する方法を説明します。

nem_takanobu
ブロックチェーンはNEM、機械学習はPyTorchが好きです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away