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

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

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

2018.09.23

 

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

 

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

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

まつしん

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

 

NEM着金通知の利用方法

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

Chrome拡張のインストール

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

 

NEM着金通知 Chrome ウェブストア

 

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

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

NEM着金通知 Chrome ウェブストア

 

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

動作確認

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

Nem library examples howto at master aleixmorgadas nem library examples

 

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

NEM着金通知 Chrome ウェブストア

 

 

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

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

 拡張機能

 

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

DevTools chrome extension iaclabpefbplpkobpfhpfldomdjoekee background html

 

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

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

 Banners and Alerts

 

 

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

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

スクリーンショット 2018 09 29 14 54 

 

注意点

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

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

技術的な話

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

webpackの利用について

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

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

 

nem-libraryの利用方法

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

 

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

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

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

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

 

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

 

技術的な話は以上です。 

作ってみた感想

Sunrise 3579931 640

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

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

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

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

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

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です