NEM開発事始め(1)　HTMLファイルの作成とNEMアカウントの生成

目指せ北海道さんが執筆された[NEM解体新書](https://nemlog.nem.social/blog/19574)と呼ばれる素晴らしいドキュメントがあります。
私もそれに倣って、NEM開発事始めという連載を開始することにしました。

> 『近頃、世間ではNEMが流行っている。志ある人は熱心に勉強し無学な人でさえNEMは凄いものだと感心している。しかし、その始まりを振り返えると、数名がふと思い立ちアドカレをやりだしたことで〇年も前のことだ』

と言われる未来が来ますように。

### 注意
本連載につきまして、[次世代NEMではじめるブロックチェーンアプリケーション開発](https://nizveyl.booth.pm/items/1549217)という書籍が出版されています。第三章を私が担当しており、一部類似した箇所が出てくるかもしれませんが購入された方の不利益にならないよう極力配慮します。全体を俯瞰して学びたい方は上記リンクより購入（ダウンロード）お願いします。
また、本連載で言及するNEM開発とは来年リリース予定のCatapultエンジンを搭載した次世代NEMでの開発を意味します。

# 今回の目標
- HTMLファイルの作成
- NEMアカウントの生成

作成したHTMLファイルをブラウザで表示できるようにします。
NEMアカウントを生成します。

# htmlファイルの作成

まずはブラウザにページを表示するためのHTMLファイルを作成します。
テキストエディタなどで以下のように入力し保存して、ブラウザで開いてみてください。


```html:index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>
<body>
<div class="container">
	アドレス:<div id="address"></div>
	秘密鍵:<div id="privateKey"></div>
	公開鍵:<div id="publicKey"></div>
</div>
</body>
</html>

```

画面上に以下のように表示されればOKです。HTMLは画面上の構成を定義しているだけにすぎません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29187/63a5cfd0-9369-32b0-51a5-81199b85d640.png)

さて、ここからHTML上にいろいろな表示ができるようにプログラムを挿入していきます。
まずは周辺ライブラリの設定です。


```html:index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>
<body>

<div class="container">
	アドレス:<div id="address"></div>
	秘密鍵:<div id="privateKey"></div>
	公開鍵:<div id="publicKey"></div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>

```
jQueryという動的にHTMLを制御できるライブラリを挿入しました。
body閉じタグの直前に置くのがよいそうです。
これだけでは先ほどの画面と何もかわりません。

# NEMアカウントの生成

先ほど作成したHTMLファイルにnem2-sdkというライブラリとアカウントを取得するプログラムを挿入します。

```html:nem2-sdk
<script src="https://s3-ap-northeast-1.amazonaws.com/xembook.net/nem2-sdk/nem2-sdk-0.14.4.js"></script>
```

```html:script
<script>

const NODE = 'https://jp5.nemesis.land:3001/';
const nem = require("/node_modules/nem2-sdk");
const alice = nem.Account.generateNewAccount(nem.NetworkType.MIJIN_TEST);

$('#address').text(alice.address.address);
$('#privateKey').text(alice.privateKey);
$('#publicKey').text(alice.publicKey);

</script>
```
NODEという変数に今回接続するCatapultノードを指定します。
nemという変数を宣言してnem2-sdkライブラリを使えるようにしています。
aliceという変数に新規に作成したNEMアカウント情報を代入しています。

今回覚えるNEMコマンドはこれ
###### Account.generateNewAccount

アカウントクラスのgenerateNewAccountで新しいNEMアカウントを作成できます。
カッコ（）の中でどのネットワークで使用したいかを指定することができます。
今回はMIJIN_TESTというネットワークで使いたいということを明言しています。

いやいや、ちょっと待って。自分はすでに秘密鍵持っててそれのアカウント情報が欲しいんだ、という方はこちらを使います。

###### Account.createFromPrivateKey

用法はこんな感じです。

```js
const alice = nem.Account.createFromPrivateKey(
    '7DC9EAFEE62C96E19BF24D2A90C5C7541202890E93E0914082EB6FB8569D4ECA', 
    nem.NetworkType.MIJIN_TEST
);
```

最後にjQueryを使ってHTML上の各divへ表示出力しています。
注意点はアドレスクラスとアカウントクラスの違いに気をつけておく必要があります。
公開鍵と秘密鍵のテキストはアカウントクラスに所属するので
alice.publicKey や alice.privateKey という取り方になりますが、
アドレスは alice.address では取れません。これで取れるのはアドレスクラスになります。
なので、アドレスをテキスト表示したければ
alice.address.address と指定する必要があります。



# まとめ

全体的には以下のようなファイルになります。


```html:index.html

<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>
<body>

<div class="container">
	アドレス:<div id="address"></div>
	秘密鍵:<div id="privateKey"></div>
	公開鍵:<div id="publicKey"></div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://s3-ap-northeast-1.amazonaws.com/xembook.net/nem2-sdk/nem2-sdk-0.14.4.js"></script>
<script>

const NODE = 'https://jp5.nemesis.land:3001';
const nem = require("/node_modules/nem2-sdk");
const alice = nem.Account.generateNewAccount(nem.NetworkType.MIJIN_TEST);

$('#address').text(alice.address.address);
$('#privateKey').text(alice.privateKey);
$('#publicKey').text(alice.publicKey);

</script>
</body>
</html>

```

以下のように表示されたら成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29187/1e02050f-8095-ff8d-4271-44bfd9040efc.png)

取引所へ送金する場合などは、
取引所のアドレスに対して、送金したい額を自分の秘密鍵で署名し、
取引所はあなたの公開鍵を使ってその署名があなたにしか作成できないこと検証して残高の組み換えを行います。

今回はブロックチェーンで使用するアカウントの生成について学びました。
冬休みにでもぜひ試してみてください。

注目すべき点はシステム規模の大小関係なく、その鍵は他で作ることが可能ということです。
これがブロックチェーン技術の最も基本で根幹となる動作です。

それブロ、ワイブロさまざまな意見がネット上に流れていますが、
「よそで作った鍵使ってもいいですよね」が通用すればそれはブロックチェーン革命。
「困る、うちが管理してるんだからうちで作った鍵を作ってくれ」と言われればそれは従来システムで事足りる可能性があります。

今作っているものを見直すきっかけにしていただければ幸いです。


# 記事一覧
NEM開発事始め(1)　HTMLファイルの作成とNEMアカウントの生成
[NEM開発事始め(2)　NEMアカウント情報の取得と表示](https://qiita.com/nem_takanobu/items/1764d027331be75a14eb)
[NEM開発事始め(3)　NEMトランザクション履歴の取得と表示](https://qiita.com/nem_takanobu/items/3d9090b653449dd79f91)
[NEM開発事始め(4)　NEM送金トランザクションの実行](https://qiita.com/nem_takanobu/items/7d74caf9d908a85aabb1)