【NEM開発】NEM着金通知のChrome拡張機能をリリースしました！

前回はNEM Libraryを用いてXEM、独自通貨(モザイク)の送金・着金した際に発行されるトランザクションの監視を実装しました。

【NEM開発入門】NEM Libraryを利用して着金を監視する

2018年9月23日

今回はその技術を利用してChrome拡張機能を作って公開しました！

【お知らせ】
NEM着金通知のChrome Extensionを公開しました！
指定のアドレスにXEMまたはモザイクが着金するとデスクトップ通知でお知らせしてくれます。
例えばnemlogで記事投稿した後に仕事中に投げ銭の通知が来てニヤつくという使い道になります。#NEM $XEM #nemlog https://t.co/iQdVsEbQZX

— まつしん@Railsプログラマ (@matsushin11)

2018年9月28日

この記事では利用方法の詳細と技術的な話を少しします。

拡張機能としてインストールするとできることは、指定のNEMアカウントのアドレスを登録するとXEMあるいはモザイクが着金するとデスクトップ通知してくれるというものです。

特にnemlogで記事投稿している人にオススメ！投げ銭のリアルタイム通知でニヤニヤしよう！！

Contents

1 NEM着金通知の利用方法
- 1.1 Chrome拡張のインストール
- 1.2 動作確認
2 技術的な話
- 2.1 webpackの利用について
- 2.2 nem-libraryの利用方法
3 作ってみた感想
4 参考

NEM着金通知の利用方法

まずはChrome拡張のインストールから。

Chrome拡張のインストール

ChromeブラウザからChromeウェブストアにアクセスして「Chromeに追加」をクリック。

確認ダイアログが表示されるので「拡張機能を追加」をクリック。

URL欄の右端にアイコンが表示されればOK！

次に、拡張機能の利用方法を見ていきましょう！

動作確認

アイコンをクリックするとフォームが表示されるので通知したいアドレスを入力。「着金の通知を開始する」をクリック。

Nem library examples howto at master aleixmorgadas nem library examples

通知を開始しました！と表示されればOK。

本当に監視が開始されたか確認したい場合は以下の流れで確認できます。

拡張機能ページ(「chrome://extensions/」をブラウザのURL欄に入力)にアクセスし、ヘッダー部の右端でデベロッパーモードに切り替え、「background.html」をクリック。

DevToolsが立ち上がりますので、その下の方にSUBSCRIBEと表示されていれば間違いなく着金の監視が開始されています。

DevTools chrome extension iaclabpefbplpkobpfhpfldomdjoekee background html

それでは登録したアドレスにXEMまたはモザイクを送金してみましょう！

以下のような通知が届けばOK！！モザイクでも同様の表示になります。

ちなみにもちろん通知を停止することもできます。

再度フォームを表示して「通知を停止する」を押すだけ。

注意点

APIを利用しているNEMのノードを固定にしているため、たまに動作しなくなるケースがあります。

その場合は記事にコメントするまたはTwitterからDMで連絡お願いします。

技術的な話

続いて技術的な話になります。また、実装したコードはこちらに置いております。

webpackの利用について

最近よく使うVue.jsとかでもwebpack使ってるし、Chrome拡張の開発でも使えないかなーと考えていたところ、テンプレートがすでにありました。

これをgit cloneしてくれば簡単！

nem-libraryの利用方法

実際に着金を監視して通知をしている箇所のコードを見ていきましょう。

connection = confirmedTransactionListener.subscribe(res => {
    const signerAddress = res.signer.address.value;
    if (address == res.recipient.value) {
        let amount = 0;
        let divisibility = 6;
        const hash = res.transactionInfo.hash.data
        if (res._mosaics == undefined) {
            // XEM
            amount = res._xem.quantity / (10 ** divisibility);
            notice(hash, amount, 'xem', signerAddress)
        } else {
            // Mosaic
            const mosaic = res._mosaics[0];
            const mosaicHttp = new MosaicHttp();
            mosaicHttp.getAllMosaicsGivenNamespace(mosaic.mosaicId.namespaceId).subscribe(mosaicDefinitions => {
                mosaicDefinitions.forEach(function(mosaicDefinition, _index){
                    if (mosaic.mosaicId.name == mosaicDefinition.id.name) {
                        divisibility = mosaicDefinition.properties.divisibility;
                    }
                });
                amount = mosaic.quantity / (10 ** divisibility);
                const mosaicName = `${mosaic.mosaicId.namespaceId}:${mosaic.mosaicId.name}`;
                notice(hash, amount, mosaicName, signerAddress)
            });
        }
    }
}, err => {
    console.log(err);
});

connection = confirmedTransactionListener.subscribe(res => {

const signerAddress = res.signer.address.value;

if (address == res.recipient.value) {

let amount = 0;

let divisibility = 6;

const hash = res.transactionInfo.hash.data

if (res._mosaics == undefined) {

// XEM

amount = res._xem.quantity / (10 ** divisibility);

notice(hash, amount, 'xem', signerAddress)

} else {

// Mosaic

const mosaic = res._mosaics[0];

const mosaicHttp = new MosaicHttp();

mosaicHttp.getAllMosaicsGivenNamespace(mosaic.mosaicId.namespaceId).subscribe(mosaicDefinitions => {

mosaicDefinitions.forEach(function(mosaicDefinition, _index){

if (mosaic.mosaicId.name == mosaicDefinition.id.name) {

divisibility = mosaicDefinition.properties.divisibility;

}

});

amount = mosaic.quantity / (10 ** divisibility);

const mosaicName = `${mosaic.mosaicId.namespaceId}:${mosaic.mosaicId.name}`;

notice(hash, amount, mosaicName, signerAddress)

});

}

}, err => {

console.log(err);

});

前回の記事通りConfirmedTransactionListenerを使っています。

処理としてはまずトランザクションの内容によってXEMとモザイクで処理を分けています。XEMの場合はシンプルにレスポンスから着金量を計算して通知しています。

モザイクの場合が少しだけ複雑です。トランザクション情報の中にモザイクの定義情報がないため、送金量の桁数の調整ができません。

なので、もう一度APIを利用して指定のネームスペースのモザイク情報をすべて取得して小数点以下の桁数を取得しています。その後着金量の調整をしてから通知という流れになります。通知自体は共通化してnotice関数としています。

実際のデスクトップ通知処理(notice関数)は以下の通りです。

function notice(hash, amount, mosaicName, signerAddress) {
    chrome.notifications.create(`NOTIFICATION_NAME_${hash}`, {
        type: 'basic',
        iconUrl: '../icon-notification.png',
        title: `${amount} ${mosaicName}`,
        contextMessage: '受け取りました！',
        message: `送金元：${signerAddress}`,
        priority: 1
    });
}

function notice(hash, amount, mosaicName, signerAddress) {

chrome.notifications.create(`NOTIFICATION_NAME_${hash}`, {

type: 'basic',

iconUrl: '../icon-notification.png',

title: `${amount} ${mosaicName}`,

contextMessage: '受け取りました！',

message: `送金元：${signerAddress}`,

priority: 1

});

}

技術的な話は以上です。

作ってみた感想

Chrome拡張機能を実装した経験がある人はわかると思うのですが、とにかくデバッグが手間でした。コードを修正してすぐ画面に表示をさせて確認するというのができません。

今回はWebpackを作っていますので、コードを修正してまずはビルド。次にビルドしたコードをChrome側で再度取り込んで動きを確認するので手順がいくつか増えています。

ただChrome拡張機能ならではの実装方法があるのでその辺りがとても勉強になりました。

具体的には、アイコンを押した際に起動するJavascriptと裏側で動いているJavascriptのファイルが違うのですが、その2つの動作を連携させる仕組みとかアドレスを保管するためのchrome.storage機能になります。

なかなかリリースするところまで作るのは面白かったのでまたNEMを使ったサービス・ツールを何かしら考えたいと思います！

【NEM開発】NEM着金通知のChrome拡張機能をリリースしました！