NanoWallet / NEM Authenticator / NEMPay をビルドしてみよう

今回はコアメンバーが開発している、NanoWallet、NEM Authenticator、NEMPayをソースからビルドしたり、実機で動作させてみます。
あまりnem自体の技術とは関係ないですが、リリースされていない最新版を試してみたり、バグを修正したり、翻訳をコミットする人が増えてくれれば幸いです。
(もちろんMainnetでのご利用は自己責任で…)


# NanoWalletのビルド

[NEM – Distributed Ledger Technology \(Blockchain\) » Downloads](https://nem.io/downloads/)

NanoWalletとは、公式の提供するブラウザベースの主流ウォレットです。
技術的には典型的なWebフロントエンドの構成となっており、`Angular`と`Bootstrap`を利用しています。
Web(html, css, js)の技術が分かれば実装を読み解けると思います。
また、`NW.js`によるWindows/Mac/Linuxネイティブのアプリも提供されています。

## 必要な環境

* Node.js

## パッケージインストールとビルド

[NemProject/NanoWallet: Cross\-platform lite wallet written in JavaScript](https://github.com/NemProject/NanoWallet)

ソースを`clone`もしくはアーカイブをダウンロードしてきてReadmeの通りgulpでビルドするだけですが、ちょっとだけ自分流を入れています。

```
npm install gulp
```
Readmeではgulpをグローバルインストールしていますが、ローカルにインストールして、引き続き`npm install`で依存パッケージをインストールします。

```
$(npm bin)/gulp 
# ./node_modules/.bin/gulp もしくは直接パスを指定
```
実行すればビルドされると同時に http://localhost:4000 でブラウザが立ち上がり、ウォレットが表示されます。
この画面はコマンドプロンプトを閉じない限りはソースを編集したらすぐにそれが反映される開発モードです。

また、ビルドされたファイルは`build/`に出力されるので、この中の`start.html`を開けば、リリースされているNanoWalletと同じようにローカルで開くことができます。

![nano1.jpg](https://qiita-image-store.s3.amazonaws.com/0/2353/11e100ec-105d-a795-80a4-cff6472aaaaf.jpeg)
(`master`ブランチをビルドしてみました。このキャプチャでは配布版と違いはほとんどありませんが…)

実際に開発をするつもりがなくても`2.0`ブランチで次期バージョンの開発が進んでいるので、それをちょっと見てみるのも面白いかもしれません。

![nano2-1.png](https://qiita-image-store.s3.amazonaws.com/0/2353/777ae28f-5fe2-45af-f91e-f2ba4fdb2109.png)
`2.0`では`TREZOR`に対応するようです。

![nano2-2.png](https://qiita-image-store.s3.amazonaws.com/0/2353/410eef23-5b57-8196-9823-634b4c2d06af.png)
送金画面はちょっと変化がありますね。誤解のおおいモザイク送信時の1xemは隠されるようです。

内部的な話だと、コア部分が`nem-sdk`へと分離され、ライブラリとして利用するような実装へ変更されていました。

NanoWallet自体のデバッグはGoogle ChromeやFirefoxに標準実装されているインスペクタで出来ますし、数ある暗号通貨のウォレットの中でも弄る敷居としてはかなり低いものではないでしょうか。


# NEM Authenticator

[aleixmorgadas/NEM\-Authenticator: NEM Authenticator Official Repository](https://github.com/aleixmorgadas/NEM-Authenticator)

NEM Authenticatorとは、マルチシグ連署人のアカウントを登録し、トランザクションへの署名をワンタップで行うことができるアプリです。(正式版はまだリリースされていません)
署名することだけの機能ですが、NanoWalletを使わなくてもよく、円滑なマルチシグ運用の助けになるでしょう。

![nemauth.jpg](https://qiita-image-store.s3.amazonaws.com/0/2353/2cb0c143-7e40-60fa-3115-6c2b25e5cb6c.jpeg)

ここでは`Android`版をビルドし、`apk`パッケージを作ってみます。

## 環境構築

* Node.js
* Java Development Kit 1.8(JDK)
* Gradle

今回Android Studioはデカくて入れたくなかったので、必要なツールだけでビルド環境を構築してみました。
以下Windowsでのビルドになりますが、上記のコマンドのパスが通っていればビルドできると思います。

`JDK`と`Node.js`はインストーラ形式なので実行してインストールしてください。
`Gradle`と`AndroidSDK`は手動で配置します。場所は任意ですが、今回は`C\:`におきました。
パスを通す必要がありますが、(主観ですが)Windowsの環境変数を設定するのは面倒なのでここでは設定せず、ビルド用のバッチファイル内で通す方法で行います。

### JDK 1.8
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
(`AndroidSDK`が`JDK 9`に未対応のため`JDK 8`をダウンロードしインストールします)

### Node.js
https://nodejs.org/
最新版でも問題無いと思いますが、とりあえず安定のLTS版が良いでしょう。

### Gradle
https://gradle.org/install/#manually
Binary-onlyで十分です。`C:\gradle\bin\gradle`となるように配置します。

### AndroidSDK
https://developer.android.com/studio/index.html?hl=ja#download
`C:\android-sdk\tools\bin\sdkmanager.bat`となるように配置します。

## sdkmanagerでbuild-toolsをインストール
```
C:\android-sdk\tools\bin\sdkmanager "build-tools;22.0.1"
```

NEM-Authenticatorの`config.xml`によると、最低バージョンが`21`だったので、気持ち新しめで22をインストールしてみました。
`<preference name="android-minSdkVersion" value="21" />`

参考にビルドツールのリリースノートのリンクを置いておきます。
https://developer.android.com/studio/releases/build-tools.html

## NEM-Authenticatorのビルド
https://github.com/aleixmorgadas/NEM-Authenticator
cloneしてきたNEM-Authenticatorのディレクトリに入り、必要なnpmパッケージをインストールします。

```
npm install ionic cordova android-versions
```

ionicコマンドをグローバルにインストールしたくなかったので、ローカルにインストールしました。
`android-versions`も入れておかないとビルド時にコケるので追加しています。

ビルドするコマンドが長くて忘れがちなのでバッチファイルにしてしまいます。
GradleとAndroidSDKとionicコマンドへのパスはバッチファイル内で通します。

```
set PATH=%PATH%;C:\gradle\bin\;C:\android-sdk\tools\bin\;.\node_modules\.bin
call ionic cordova build android
pause
```

`build.bat`として保存してください。これを実行して、ビルドが終わるまで待ちます。
初回はGradleが何やらいろいろセットアップを始めるので時間がかかりますが、二回目以降はすぐ完了します。
`BUILD SUCCESSFUL`と表示されれば以下のパスに`.apk`が出力されています。

```
NEM-Authenticator\platforms\android\build\outputs\apk
```

あとはこのファイルをGoogleドライブでもWeb経由でも端末にダウンロードできるようにすれば、インストールすることができます。

## 実機での実行

実機に直接インストールして確認したい場合は、Android端末の開発者向けオプションでUSBデバッグ機能をオンにして、USBケーブルで接続し、`build`の代わりに`run`コマンドを実行します。

```
ionic cordova run android
```
接続している端末でアプリが立ち上がるのが確認できると思います。

### インスペクタを使ったデバッグ

デバッグはGoogle Chromeで行うことができます。
`chrome://inspect/#devices`にアクセスすると接続している端末がでてくるので、`inspect`のリンクからインスペクタを起動できます。

![chrome-debug1.png](https://qiita-image-store.s3.amazonaws.com/0/2353/cbd3660b-db35-af49-5aba-9eceb4bb5b43.png)

`inspect`のリンクをクリックするとインスペクタが開きます。

![chrome-debug2.png](https://qiita-image-store.s3.amazonaws.com/0/2353/90df8c31-1af1-5e72-a87a-bf63f0f598f3.png)



# NEMPay

[dgarcia360/NEMPay: Adaptable Android & iOS Mosaic Wallet for NEM Blockchain](https://github.com/dgarcia360/NEMPay)

NEMPayはモザイクも扱える期待のウォレットです。(正式版はまだリリースされていません)
xemもnemネームスペースのモザイクであるため、同様にあつかうこともできます。

![68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313630302f312a4338693278307231366e3230326342757879595570672e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/2353/4d10665f-9072-5209-040c-f0058ee7df19.png)

## 環境構築

```
.\node_modules\.bin\cordova plugin add cordova-plugin-device
```
NEM Authenticatorのビルド環境と同じですが、`cordova-plugin-device`を追加でインストールしておきます。

`fseventsでError: EPERM: operation not permitted`のエラーが出る場合はnpm 5.3にダウングレードすることで回避できます。

```
npm install npm@5.3 -g
```

## ビルド＆デバッグ
https://github.com/dgarcia360/NEMPay
以降は`NEM Authenticator`と同様の手順でビルドもデバッグも行えます。

# まとめ

NEM AuthenticatorとNEMPayは正式リリースを待ち望むかたも多いでしょう。

iOS版のビルドについては未確認ですが、XCodeをインストールし、途中までは同様の手順をおこない、ビルドコマンドで`android`の代わりに`ios`と渡してあげればできると思います。
その場合はSafariの開発者ツールを使うことになると思います。
(iPhoneを持ち合わせていないもので…すみません)