connecting...
Google translation for articles :
2 NEMBER donated to you!!

プログラム初心者がNEMアプリを作ってみた。(11)

nem3.46xem (2) 259 2 0
NEMREGI 2019-04-10 20:48:03

こんばんはNEMREGIです。XEMのトランザクションには送金機能のほかにメッセージが記録できます。自作ソフトNEMREGIではメッセージに買った物品の情報を日本語で記録しました。今回はメッセージ機能に日本語を使う方法を書きます。

 

まず、下記の通りメッセージに直に日本語を指定し、トランザクションを作成します。(プログラムは下記の通り)今回は”ネムレジ”という日本語でメッセージを書きました。

		// 送金トランザクションを作成
		const transferTransaction = TransferTransaction.create(
  		TimeWindow.createWithDeadline(),
  		new Address("NBM7TVZRHGFPFHCWAMZ2IL5MSU2ZXPO3X6L4NNKF"),
  		new XEM(0),
  			PlainMessage.create("ネムレジ")
		);

		const account = Account.createWithPrivateKey("秘密鍵を入力してください");

		// トランザクションを署名
		const signedTransaction = account.signTransaction(transferTransaction);
		const transactionHttp = new TransactionHttp();

		// 送金実行
		transactionHttp.announceTransaction(signedTransaction)
		.subscribe(
  			value => {console.log(value.message);},
  			err => {console.log(err.toString());}
		);

 

トランザクションをnembexで確認してみましょう。結果は下記の通り「a□□a・・・」となり、「ネムレジ」とは表示されませんでした。(TT)

 

 

では、下記の通りプログラムを記述し、自作プログラムにてトランザクションメッセージを取得してみましょう。

		const accountHttp = new AccountHttp();
		accountHttp.incomingTransactions(new Address("NBM7TVZRHGFPFHCWAMZ2IL5MSU2ZXPO3X6L4NNKF"))
		.subscribe(x => {
			console.log(x);

			//メッセージ抽出
			var str = x[0].message.payload;
			console.log(str);//(1)

			//パーセントエンコーディング化(8tyte(2文字)ずつに%を付加 例:E38195→%E3%81%95)
			for (var i = 0; i < str.length/3; i++)
			{
				str = str.slice(0, 3*i) + "%" + str.slice(3*i, str.length);
			}
			console.log(str);//(2)

			//パーセントエンコーディングを日本語に変換
			str = decodeURI(str);
			console.log(str);//(3)

			document.getElementById("MSG").innerHTML = str;

		}, err => {
			alert("トランザクションが確認できませんでした。");
		});

 

結果は下記の通りとなり無事に「ネムレジ」を取得できました。

 

 

 

 

以上で日本語メッセージを記録・抽出するプログラムが完成です。では、なぜ日本語が取得できたかを説明します。

 

 

当たり前ですが、コンピューター内部では数字ですべての物事を表現します。当然、文字を表現するにもコンピューター内部では数字で管理されます。この管理の方法が文字コードです。例えばUTF-8という文字コードがあります。UTF-8は8bit(8桁の2進数)からなる文字コードです。従って,2進数「00000000」~「11111111」(16進数「00」~「ff」)までの数字を一文字に当てはめます。例えば、「1000001」(16進数で「41」)はアルファベットの「A」に対応すると決められています。しかし、UTF-8では(2の8乗)=256種類の文字しか表記できません。英語であればアルファベットA~Zの26文字は網羅できますが、日本語(漢字)となると文字数が多いのですべてを表現できません。そこで,日本語を表現するにはUTF-8を3つ並べた,3byte型UTF-8が用いられます。

 

先ほど作成したNEMのトランザクションの中身をconsole.logを使ってみてみると下記の様になっています。

 

「ネムレジ」の「ネ」は最初の6文字「e3838d」(16進数)で表現されています。webの世界ではパーセントエンコーディングというものがよく用いられます。例えば検索サイトgoogleで「ネムレジ」を検索すると下記のようなアドレスが表示されます。

 

 

先ほどのNEMメッセージと比較すると

 

 ●NEMメッセージ:e3838de383a0e383ace382b8

 ●google検索: %e3%83%8d%e3%83%a0%e3%83%ac%e3%82%b8

 

となり、%以外全く同じ文字列になっています。つまりgoogleの%エンコーディングもNEMと同じ3byte型UTF8が使われていることになります。

 

この仕組みを利用し下記の部分でNEMメッセージを%エンコーディング化しています。

			//パーセントエンコーディング化(8tyte(2文字)ずつに%を付加 例:E38195→%E3%81%95)
			for (var i = 0; i < str.length/3; i++)
			{
				str = str.slice(0, 3*i) + "%" + str.slice(3*i, str.length);
			}

このプログラムの実行結果が下記(2)になり,google検索と全く同じ文字列になりました。あとはjavascript標準関数decodeURIで%エンコーディングを日本語に戻すと(3)の「ネムレジ」が無事表示されました。

 

この方法でNEMメッセージが日本語化できます。

 

(私の感想)

今回のプログラムが作成でき、メッセージが表示された瞬間、暗号通貨が分散化台帳であることをつくづく実感できました。ブロックチェーン上からデータを参照できたことで、ブロックチェーンは台帳であると感じました。メッセージ機能を使えば、データ共有が必要なシステム(例えば掲示板,対戦ゲームなど)に色々応用できますので、本記事を参考にして頂けたら幸いです。私を含め、NEMプログラム初心者の皆さん、この機能を使って、様々な情報共有アプリケーションの作成を目指していきましょう。

 

最後に今回のおさらい(まとめ)

 NEMメッセージ→%エンコーディング化→decodeURI

で日本語化できます。

 

 

 

<今回のプログラム>

import React,{Component} from 'react';
import * as ReactDOM from 'react-dom';
import {NEMLibrary, NetworkTypes,Address,AccountHttp,TransferTransaction, TimeWindow,XEM, PlainMessage,TransactionHttp,Account} from "nem-library";

NEMLibrary.bootstrap(NetworkTypes.MAIN_NET);

class AppNem extends Component{
	constructor(props){
		super(props);
		this.state = {
		};
	}

	//XEM送金
	sendXEM()
  	{
		// 送金トランザクションを作成
		const transferTransaction = TransferTransaction.create(
  		TimeWindow.createWithDeadline(),
  		new Address("NBM7TVZRHGFPFHCWAMZ2IL5MSU2ZXPO3X6L4NNKF"),
  		new XEM(0),
  			PlainMessage.create("ネムレジ")
		);

		const account = Account.createWithPrivateKey("秘密鍵を入力して下さい");

		// トランザクションを署名
		const signedTransaction = account.signTransaction(transferTransaction);
		const transactionHttp = new TransactionHttp();

		// 送金実行
		transactionHttp.announceTransaction(signedTransaction)
		.subscribe(
  			value => {console.log(value.message);},
  			err => {console.log(err.toString());}
		);

	}

	getMessage()
	{
		const accountHttp = new AccountHttp();
		accountHttp.incomingTransactions(new Address("NBM7TVZRHGFPFHCWAMZ2IL5MSU2ZXPO3X6L4NNKF"))
		.subscribe(x => {
			console.log(x);

			//メッセージ抽出
			var str = x[0].message.payload;
			console.log(str);//(1)

			//パーセントエンコーディング化(8tyte(2文字)ずつに%を付加 例:E38195→%E3%81%95)
			for (var i = 0; i < str.length/3; i++)
			{
				str = str.slice(0, 3*i) + "%" + str.slice(3*i, str.length);
			}
			console.log(str);//(2)

			//パーセントエンコーディングを日本語に変換
			str = decodeURI(str);
			console.log(str);//(3)

			document.getElementById("MSG").innerHTML = str;

		}, err => {
			alert("トランザクションが確認できませんでした。");
		});

	}
	
	render(){
		return(
		<div>
				<button type="button" onClick={this.sendXEM.bind(this)}>XEM送金ボタン</button>
				<button type="button" onClick={this.getMessage.bind(this)}>メッセージ取得ボタン</button>
				<p id = "MSG"></p>
		</div>
		);
	}
}




ReactDOM.render(
	<AppNem />,
	document.getElementById('app')
);

 

 

///////////////////////////////////////////////////////

本記事はプログラム初心者がNEMアプリ「NEMREGI」を製作するまでの過程を記載しています。

自作プログラムNEMREGIは  https://www.nemregi.shop/ で公開しています。

(趣味程度に製作したソフトです。使用上のトラブルは一切保証いたしません。)

(使用した方がいましたらコメントいただけると嬉しいです。要望・使用感などありましたらご指摘をお願いします)

 

//////////////////////////////////////////////////////

これまでの記事:

プログラム初心者がNEMアプリを作ってみた。(10)

プログラム初心者がNEMアプリを作ってみた。(9)

プログラム初心者がNEMアプリを作ってみた。(8)

プログラム初心者がNEMアプリを作ってみた。(7)

プログラム初心者がNEMアプリを作ってみた。(6

プログラム初心者がNEMアプリを作ってみた。(4)(5)番外編

プログラム初心者がNEMアプリを作ってみた。(5)

プログラム初心者がNEMアプリを作ってみた。(4)

プログラム初心者がNEMアプリを作ってみた。(3)(番外編)

プログラム初心者がNEMアプリを作ってみた。(3)

プログラム初心者がNEMアプリを作ってみた。(2)

プログラム初心者がNEMアプリを作ってみた。(1)

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber
NEMREGI
2019-04-10 22:18:40ID:100390

>>mizinco::さん
コメントありがとうございます。お互いプログラミング頑張りましょう!!

mizinco
2019-04-10 22:16:25ID:100389

文字のエンコード化すごい!プログラミング勉強中なので参考になります!

NEMber who posted this article

2017年から仮想通貨を購入しましたが、その後の暴落で損額をくらいました。その後は2018年10月から本格的に仮想通貨NEMのプログラム作成を開始。2019年3月にNEMREGI(NEMレジ)(β版)を作りました。サラリーマンなので空き時間に趣味程度のプログラムを作成しております。
20169
0

Why don't you read following articles?

11.15 XEM
730 2 5


15.785 XEM
614 4 2

9.435 XEM
502 0 1


12.575 XEM
335 2 4