V3系symbol-sdkを速習Symbol風にブラウザコンソールから使用する

速習Symbolなどではsymbol-sdkをbroserifyしたものをブラウザコンソールから読み込み、コマンドプロンプトに対話形式でSymbolを素早く学べるコンテンツを提供していました。

しかし、symbol-sdkはv3になってからbrowserifyを利用したライブラリの生成ができなくなりました。残念に思っていたところ、オープニングラインさんのブログ記事でv3系sdkをブラウザで使う方法の解説がありました。

それで、じゃぁホスティングするときどうするんだっていう話になるんですが、
./node_modules/symbol-sdk/dist/ 配下の以下のファイルをあげておけばいいんじゃないかと思います。
bundle.web.js
bundle.web.js.map
5fcc69fd3573ae76acd8.module.wasm

なんと、npmでインストールした後にできるdistフォルダ配下のライブラリがそのまま使えるそうです。

なので、使ってみました。

使えました。

と言うわけで、今回はv3sdkをブラウザコンソールで使用する方法を解説します。

まずはインポートです。以下にbundle版が配置されているのでそれを読み込みます。

こちらにも置いていますのでご自由にどうぞ。

module = await import("https://www.unpkg.com/symbol-sdk@3.0.7/dist/bundle.web.js");

コンソールでの呼び出し方はこの書き方一択です。await import(...)です。
この書き方、検索してもあまり見かけません。３回唱えましょう。
await import
await import
await import

ここさえ乗り越えたら後は楽勝です。

オープニングラインさんのブログの内容ほぼそのままですが、写経してみると

symbolSdk = module.default;
facade = new symbolSdk.facade.SymbolFacade('testnet');

privateKey = new symbolSdk.PrivateKey("************");
keyPair = new facade.constructor.KeyPair(privateKey);

network = symbolSdk.symbol.Network.TESTNET;
deadline = network.fromDatetime(new Date(Date.now() + 7200000)).timestamp;

nodeUrl = localStorage.getItem('nodeUrl');

おっと、ここまで書きましたが、直接記事を読んでもらった方が早いですね。

module importはv2系のbrowserifyとは違って、インポート時に実行を2回に分ける必要がなく一気に実行までいけるので便利ですね。ただ、v3系の読み込むライブラリは7.8MBと少しサイズ大きめなので注意が必要です。

それでは！