2019年12月だが、2018年にNEM関連で作ってきたものを振り返る

どうも、私の名前は@scrpgilです。
渋谷のスタートアップで、Ionicを使ったアプリ開発をして働いています。

この記事は、私が、2018年にNEMを使って開発したプロダクトを、振り返ったものになります。簡単過ぎて、プロダクトと呼べない物もあれば、気合を入れて作った物も、形になっていない物もあります。共通しているのは、どのプロダクトも**自分なりのテーマを、持って作っていた**ということです。

この記事に出てくるもので、プロダクトとして、ちゃんとユーザーに使われているものは多分ありません。しかし、どのプロダクトも、それなりに思い入れがあります。

そのため、今回は、**私が作ったプロダクトを振り返って反省するため**に、記事を書きました。

この記事を読んで、何が得られるかは難しいですが、私がプロダクトを作る時、**何をどのように考えて開発していたのかが**、何かの参考になればと思います。


## プロダクト開発以前
プロダクト開発の話に入る前に、私が、NEMを使った開発を始めるまでを、ざっくり振り返ります。

### ブロックチェーンに触れる
私が、暗号通貨に初めて触れたのは、2017年4月です。それまで株式投資をしていた、私は、何か新しいものに投資をしたいと考えていましたた。**株とは違ったなにかを。**

そんな折、Zaifの広告が目に入りました。確か、ホリエモンが、Zaifの技術アドバイサーになった的な内容だったと思います。
かねてより、日経ヴェリタス(Podcast)で、ビットコインの存在を知っていた、私は暗号通貨に投資しようと思いました。元々、アスキーアートに興味があったので、**モナコインに惹かれた**のもあります。

早速、Zaifで口座を開設し、20万円を元手に、いくつかの暗号通貨を購入しましたた。そのとき、購入したのが、NEMとモナコインです。

驚いたことに、購入してすぐに**NEMの価格が急騰しました**。これに味をしめた私は、追加で20万円を投入し、さらに色々な暗号通貨に手をだしました。**Zaifトークンや、エコビットとか**。特に、Zaifトークンは、一時期かなりの数を保持していたので、だいぶ思い入れ深いです。**Zaif教とか、おインコ様とか懐かしいですよね。**

### イーサリアムに触れる

投資からブロックチェーンに触れた私ですが、同年8月ごろ、技術的にブロックチェーンに触れる機会がやってきます。
「[はじめてのブロックチェーン・アプリケーション Ethereumによるスマートコントラクト開発入門](https://www.amazon.co.jp/dp/B07416W2PY)」という本が発売されたのです。技術者として、ブロックチェーンに触れる絶好のチャンスでした。

発売日に本を買って、ブロックチェーンにデビューしました。

が、触った所感は、**私にはまだ早い**、といった感じでした。

当時のgethの最新版(1.6)だと動かなかったり、コントラクトのデプロイにGASが必要だったり、面倒なことが多いなって感じました。そしてなにより、イーサリアムを使って何をやるか、**まったく思いつかなかったのです。**

というわけで、私は、ブロックチェーンを使ったプログラミングから、遠ざかることになります。
もっと言えば、**イーサリアムから挫折したわけです。**

### 投機
イーサリアムに挫折したものの、暗号通貨の取引は、引き続き行ってました。

その後、中国のICO全面禁止のニュースや、COMSAの上場を経て、12月に、バブルがやってきました。暗号通貨は軒並み急騰、NEMも200円まで価格が急騰したのです。

NEMの価格上昇に驚いた私は、改めてNEMについて調べることにしました。そこで、**NEMの特徴をいくつか知ることになりました。**

* 各機能がNISからAPIベースで提供されており、開発しやすい
* [nem-sdk](https://github.com/QuantumMechanics/NEM-sdk)というJavaScriptのライブラリが提供されている
* 日本のコミュニティが活発
* テックビューロで、NEMのコアデベロッパーが働いている
* mijinという次世代バージョンを開発中

特に、APIベース、JavaScriptでライブラリが提供されている2点が気に入りました。これなら、**イーサリアムで挫折した私も、何か開発できそうだ！**と。

時は、2017年12月。もうすぐ2018年が始まります。

私は、達人プログラマーの教えにのっとり、毎年、新しい技術に触れることを目指していましたが、2018年は**NEM、そしてブロックチェーン**を勉強しようと決めたのです。

※余談ですが、この時期、Zaifがよく「502 bad gateway」になっていたので、定期的にZaifの価格情報を取得して、キャッシュする「ZaifMonitoring」みたいなサイト作りました。それなりにアクセスがあった気がします。今はもうないです。

## プロダクト開発を始める

さて、ここからプロダクト開発を話が本格的に始まりますが、**けっこう長いです。**
なので、最初に**私が思うNEMのおすすめの学習ステップ**を書いておきます。

実際に私は、この順番でプロダクト開発をしていきました。NEMでやれることを徐々に学べたので、良い順番だと思います（ただし、2018年の話）。

もし、**「NEMの勉強はじめました」**とか**「NEMで何か作りたい」**とかだったら、この順を試してみてください。無理なく、学習できるかもです。

APIで各データを取得、画面に表示(Xembook的なやつ)
　↓
WebSocketを使って、トランザクション(着金のみ)のリアルタイム取得
　↓
モザイクの発行と、トランザクションの作成
　↓
ウォレットの作成、QRコードの発行など
　↓
NEMを使った独自サービス

あと、ブロックチェーンに関する前提知識は、是非とも次の記事を読みましょう。世界一わかりやすいです。

[誰も教えてくれないけれど、これを読めば分かるビットコインの仕組みと可能性](https://jp.techcrunch.com/2015/03/31/bitcoin-essay/)


### nemfolio

私が、最初に作ったのが、この[nemfolio](http://nemfolio.xiaca.org/)です。これは、登録したNEMのアドレスの残高＆トランザクション＆ハーベストを、モニタリングできるサイトです。

<img width="200" alt="Screen Shot 2019-12-17 at 0.31.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/1913c617-2e30-e69d-3b4d-99f061503127.png">

平たくいえば、XembookをiOSまたは、Androidのデザインに対応させたものです。

これは、完全に勉強用に作成しました。

今でも思いますが、NEMで自分のアドレスの残高を表示させるのは、**C言語でいうHello World、****Railsでいう”Creating a Weblog in 15 minutes“です。**
初めて、NEMを触る人は、まずこれをやるべきだと思います

nemfolioを開発して、**nem-sdkの基本的な使い方、各データを取得するAPI、****httpsノードが少ない！(当時)**ことなどを学べました。
特に、httpsのノードが少ないため、**Netlify、Firebase Hostingにデプロイすると運用が面倒**だと判明し、収穫が大きかったです。昨今、httpのみのホスティングは、逆に面倒だったりするので...。私のおすすめは、GCSかS3にホスティングして、独自ドメインで使う、です。
[nemfolioのソースコードはこちら](https://github.com/scrpgil/nemfolio)

### nem-transfer-api

NISがhttps通信できないため、作ってしまったが、nem-transfer-apiです。主な目的は、SSL通信を中継して、http通信のNISとアクセスするためのものです。今、思えばよくこういうの作ろうと思ったなって感じです。

2018年4月まで動いていましたが、GCPのクレジットが切れたため、止めました。

詳しくは、以下にアクセス。
[transfer-nem-apiのソースコードはこちら](https://github.com/scrpgil/transfer-nem-api)

### oshou.love
nemfolionを開発して、NEMの各データにアクセスする方法がわかったので、次は、WebSocketのAPIを使って、トランザクションの監視を使ってみたくなりました。
そうして、作成したのが[oshou.love](http://oshou.xiaca.org/)です。当時、流行っていた**osushi.loveから名前を拝借しました。**

<img width="207" alt="Screen Shot 2019-12-17 at 1.08.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/32aa83e8-2b74-bcf2-15e0-699840a8c468.png">

このサイト、何ができるって、着金に反応して、**「ありがたや ありがたや」**というだけで、特になにもないわけですが、開発を通して、**WebSocket APIの使い方、トランザクションの状態(Confirmed、Unconfirmed)、ハッシュによるトランザクションの見分け方**などを学べました。

また、Testnetをもらうためには、公式のフォーラムで、骸骨の人にお願いする必要があるなども学べました。たぶん、当時の書き込みを見つけましたが、とても懐かしいです。

<img width="488" alt="Screen Shot 2019-12-17 at 1.12.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/07b53717-5f94-17cb-158e-5461a97f5cee.png">

[oshou.loveのソースコードはこちら](https://github.com/scrpgil/oshou.love)

### Ya
次は、トランザクションの作成とモザイクを使うものを作ろうと思いました.
そして、作成したのが、この[Ya](https://ya-greeting.firebaseapp.com/)です。

![https___qiita-image-store.s3.amazonaws.com_0_165335_17015c7d-130c-a18f-7313-eff84f542fb8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/f8a23ecc-40b7-a5db-67bc-86a14f6c71dd.gif)

この時は、本格的にみんなに使ってもらえるサービスを！という気持ちもあったので、何か、サービスとしてなりたつものを考えていました。ただ、NEMを使って何をやれば面白いかは、**さっぱり検討ついていませんでした。**

何日か悩んだ挙句、**モザイクを投げるだけで楽しいとよいかな**と思い、「Yo」をパロディすることにしました。
私が、作成したYaでできることは次の通りです。
１．Ya用ウォレットの作成
２．Yaトークンの購入
３．ニックネームの登録
４．他のユーザーを探す
５．Yaトークンを送る

さて、当初は、Yaを4/1にサービスとして公開することを考えていましたが、作成していく過程でいろいろ問題点が発生しました。
https通信を安定して行えるNISがない(当時の話)、モザイクの手数料計算のために謎APIを叩く必要がある、モザイクの送金もXEMの手数料がかかる、などなどです。

特に、「モザイクの送金もXEMの手数料がかかる」は作ってる最中に気付き、気楽にYaを投げるサービスを考えていたのが、あっという間に破綻してしまいました。ここらへんは、完全に私の知識不足です。


結局、サービスとして公開することは断念しましたが、それなりに、時間をかけて作っていたので、完全に日の目をみないのも、もったいなく思い、Qiitaの記事として公開することにしました。興味ある方は、下のリンクをどうぞ。
[NEMを使ってYoのパロディサイトを作ってみたのでだらだらと振り返る](https://qiita.com/scrpgil/items/87d6a985bb6bc843b89c)

### PicoWallet
Yaの公開は断念しましたが、開発の中で**「NEMウォレットのスマホアプリいいのなくね？」**ということに気付きました。私自身、開発中、スマホからNEMを送金したい時が何回もあったんですが、公式アプリの出来がなんとも悪い...。

そして、Twitter等でも**「もっと使いやすいウォレットを！」**という声をちらほら見ました。

ということで、次に開発したのが[PicoWallet](https://picowallet.net/)です。
当時、スマホ決済アプリで一番使われていたであろうAliPayを参考に開発しました。

<img width="203" alt="Screen Shot 2019-12-17 at 1.44.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/fd46a2fd-c0f7-b09e-befa-b6c0718fd5fe.png">

また、NEMなど暗号通貨を使ったアプリは、個人のデベロッパーアカウントだとAppleの審査通らない！という情報もあり、PWAで作成しました。

デザインはシンプルで、必要な機能は揃っており、なぜか多言語対応もしています。
Webサイトですが、カメラを起動して、QRコードを読み取ることも、送金用のQRコードを発行することもできる、シャレオツなウォレットです。
[動画はこちら](https://twitter.com/scrpgil/status/990609740756541443)
<img width="200" alt="Screen Shot 2019-12-17 at 1.53.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/a3d9e2cc-744e-8b45-812c-02dd6937b47f.png">


ちなみに、この時期の私は、**「ウォレットは暗号通貨時代のブラウザだ！ウォレットを制する者は暗号通貨を制す！」**と本気で思っていました。

また、NEMに関して言えば、ウォレットを作成できれば、どんなサービスも作れるようになると考えていました。

なぜなら、**暗号通貨を使ったサービスって、何かしらのトランザクションを発生させるものだし、そのサービスにおいて、アカウント=ウォレットであることが多いと、思っていたからです。**

というわけで、かなり気合を入れて開発したのですが、いざ、公開！という3日前くらいに[RaccoonWallet](https://raccoonwallet.com/)が発表されます。RaccoonWalletは、**素晴らしいデザイン、素晴らしいチーム、Android版アプリあり**、と3拍子揃ったかなりイケてるウォレットでした。

当時のRaccoonWallet発表のインパクトは凄まじく、同時期に開催されたネムフェスのハッカソンでは、優勝してOculus GOとCOMPをもらっていたりしてました。

その後、PicoWalletを公開して取り上げてもらえたりしたものの、結果はRaccoonWalletに完敗でした。今、振り返るとうまく行かなかった理由の一つは、**PWA対応しかなかったことかもしれません。**

「スマホでも使いやすいウォレットを！」の声はありましたが、そこに対するソリューションは、**PWAではなくアプリの方が正しかったんだと思います**。使いにくいと言われていた公式のNEMウォレットも、アプリだったので、当たり前だったのかも...。

[PicoWalletのソースコードはこちら](https://github.com/PicoWallet/PicoWallet)

※開発当時、完成したウォレットで、高円寺のいか焼き屋にいったのは良い思い出。そして、ネムフェスで使おうとしたら、すごい警戒されたのも良い思い出。たしかに、自作ウォレットで決済させてくれっていったら、そうなるわな。あと、自分の影響力のなさを感じた一幕ではあった。

### nempass
PicoWalletと時を、同じくして作ったのがこの[nempass](https://nempass.com/)です。これは、2018年5月に福岡で行われたネムカフェ内のハッカソン「NEMCON！」に参加するために作成した、チケット管理プロダクトです。

<img width="901" alt="Screen Shot 2019-12-17 at 2.38.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/1156217e-ca56-b72b-7764-524f2efa1ede.png">


当初は、PicoWalletで参加する予定でしたが、参加条件が

>「支払いを楽しくする」
支払いの新しいカタチをNEMを使って実現しましょう！
NEMCON!では、XEMを使いたくなるようなWEBアプリを募集します！
https://nemcafe.jp/nemcon_entry/


>今回はXEM支払いが楽しくなるようなプロダクトが審査基準となっています。ですので単なるウォレットアプリでは審査の対象になりません。
XEMの送信によって何かが起こったり、楽しんだり、便利になったりするようなプロダクトの提出をお願いしました。
https://nemcafe.jp/nemcon-grand-prix/

となっており、どう考えても**「PicoWalletは、支払いを楽しくするわけではないな」**と思えて、急遽作ったプロダクトです。エントリー開始まで、まったく時間がありませんでしたが、前述の**「ウォレットを作成できるようになれば、どんなサービスも作れるようになる」**精神で、一週間くらいで開発しました。

短い期間で開発したプロダクトでしたが、**モザイクをチケット管理に使う**というのは割とウケがよかったです。こちらは、ネムフェスでも発表しましたが、一部の方々に好評でした。
[nempass~モザイクを使ったチケット管理について~](https://speakerdeck.com/scrpgil/mosaikuwoshi-tutatiketutoguan-li-nituite)

ただ、残念ながらNEMCON!はノミネートならずでした。5位と一票差だったのが悔やまれます。周りの人に投票をお願いしてもよかったかもしれません。

ただ、nempassはFIN/SUMのレギュラトリーサンドボックスでも、入選？したりと、その後もそれなりに、活躍しました。FIN/SUMは、丸ビルの上層階でウェルカムパーティーやったり、会場間が無料タクシーで移動できたり、各セミナーはフルーツ食べ放題だったり大変豪華なイベントでした。

[nempassのソースコードはこちら](https://github.com/scrpgil/nempass)

※FIN/SUMでの反応はいまいちだったが、理由は「転売を禁止する法律はない！」というもの。その後、転売禁止の法律できたので、時期が早すぎたとしか思えぬ。ちなみにFIN/SUMへは、「転売は市場原理的に理にかなったもの、禁止するより転売で不当な金額釣り上げをなくしましょう」という主張をした。
※ネムカフェで、福岡にいったけど食べ物は上手いし、移動はしやすいし、とても良いところでした。また、落ち着いたら福岡にいきたい。
※ちなみに、NEMCON!の優勝はRaccoonWalletでした。「Webアプリでもないし、支払いを楽しくするかわからぬウォレットが優勝なんて！」と一瞬悔しかったが、それだけ当時の勢いが凄かったことがわかるエピソードでもある。「素晴らしい！押したい！」とコミュニティが思ったプロダクトが、優勝するのは悪いことではないはず。

### nem.sh
NEMCON！に落ちたものの、事前にチケットは買っていたので、ネムカフェのために福岡に行きます。
ネムカフェは、活気に満ちていたり、NEMCON!が盛り上がったり、二次会？のパーティーがすごい豪華だったり、そのパーティで過激な話をされたりと、色々記憶に残るイベントでした。あと、その時にnemcheのサービスを買った人に会い、**nemcheトークン？**なんかをもらったりしたのも、良い思い出です。

その福岡の帰りの飛行機で開発したのが[nem.sh](https://github.com/scrpgil/nem.sh)です。これは、NEMのトランザクション内に、スクリプトを埋め込めるCLIツールです。実行結果は、次の通り。

<img width="694" alt="Screen Shot 2019-12-17 at 3.20.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/a5293ae9-0069-a366-f822-2f4655905010.png">

実は、NISには、特定のハッシュを直接取得できる謎APIがあるんですが、それを使って実現しています。
http://alice7.nem.ninja:7890/transaction/get?hash=b37685ca16474b6897550f51f008c11b1e24e93e51b5543d066d9266d4e35008

ただし、このAPIを利用できるのは、キャッシュを永続保持？するNISのようです。例えば、下のURLだと、"Hash was not found in cache"となり、データを取得できません。
http://san.nem.ninja:7890/transaction/get?hash=b37685ca16474b6897550f51f008c11b1e24e93e51b5543d066d9266d4e35008

nem.shを作った理由は、Ya、PicoWallet、nempassと大作続きだったので、息抜きに軽いプロダクトを作りたかったからです。軽く作った割には、実用性高いツールですが、**Gistで管理すればよくね、**と言われてしまえば、それまでです...。。

[nem.shのソースコードはこちら](https://github.com/scrpgil/nem.sh)

### nem-p2p
nem.sh以降、NEMを使ったプロダクト開発から遠ざかっていました。Ya、PicoWallet、nempassで燃え尽き症候群になっていた感じです。

そんな折、QiitaにNEMのアドベントカレンダーができたのを知りました

前々から**「トランザクションに直接、バイナリ書き込むのは現実的か検証したい」**と思っていたので、アドカレ駆動開発で作成したのが[nem-p2p](http://p2p.nempass.com/?address=NBCLBDSKQGKAIE6Y5ULWBZVW5S332TC4BMIGXPNG)です。

NEMは、トランザクションに1024文字のメッセージを書き込めます。なので、Base64などに変換すれば、どのようなファイルでも書き込めます。
![https___qiita-image-store.s3.amazonaws.com_0_165335_87bea93c-2516-57aa-92f0-5a50e91f6816.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/c85e0a6f-034d-424d-7d64-f5b7f65f83fd.jpeg)

このプロダクトについては、去年書いた記事を読んでみてください。

[NEMでファイル共有システムを作ってみたらこうなった](https://qiita.com/scrpgil/items/07839aaebfe32ea777ed)

以上で、全てのプロダクトの振り返り終わりです。

## 反省点

振り返りが済んだので、反省タイムに入ります。

私の、最大の反省点は、どれも**一人だけでやっていた**ということだと思います。
振り返ってみても、私のNEM開発は、**孤独な時間が多かった**と感じています。

もっと、誰かと、プロダクトのアイデアについて議論したり、デザインをお願いしたり、色々やれたんじゃないかと思っています。

今の、私の心情に近い、アフリカの名言を貼っておきます。この言葉を、心に刻んでおきたい...。

**早く行きたければ、ひとりで行け。遠くまで行きたければ、みんなで行け。**

次やる時は、もっと、いろいろな人を巻き込めるように。。。

## Ionicについて

ちなみに、今回振り返ったプロダクトで、Webサイトになっているものは、全て[Ionic Framework](https://ionicframework.com/)を使って開発されています。

簡単に、高品質なアプリを、クロスプラットフォーム(Web、iOS、Android)で展開することができます。しかも、Angular、React、Vueなどの好きなJSフレームワークで作れます。

見ての通り、PicoWalletのように、カメラを使ってQRコードを読み込んだり、QRコードを発行できたりしますので、是非ともどうぞ。

## まとめ
いかがでしたか。
昨今のNEM界隈はnem2が話題なので、この記事の内容は少し古いと思います。
それでも、この記事が誰かの役にたてば幸いです。

あと、先日、Ionic4でnem2-sdkを動かす方法がわかったので、またNEMで何かを作る機運が高まってきました。
[Ionic4(ionic/angular)でnem2-sdkを動かした話](https://qiita.com/scrpgil/items/c107d1db652c8049ed75)

また、何か作りましたらTwitterや、Qiitaで発信しようと思っています。
どこかで、私を見かけたら、よろしくお願いします。
それでは...。