Wait a moment...

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

20925
NEMREGI
nem4.65xem (1)
265
1
2019-04-15 21:22:56
プログラム初心者がNEMアプリを作ってみた。(12)

こんばんは。今回はreactのデザインを行う、MaterialUIの導入法を書きます。プログラム初心者がNEMアプリを作ってみた。(5) の記事まで戻ると、下記のような画面が作成できました。

 

 

この画面では、ボタンのデザインは何も設定していないため、とても地味なデザインとなっています。今回は、Reactのデザインを行うMaterialUIで、このボタンをデザイン性のあるものに変えます。まず、下記の通り「npm install @material-ui/core」と入力し、MaterialUIをインストールしましょう。

 

 

次に、MaterialUIのサイト(https://material-ui.com/)にアクセスしてください。そのあと、下記の赤枠を選択し、気に入ったボタンのデザインを選んでください。

 

 

今回は青色のボタンを選びました。<>をクリックするとソースコードが下記の様に表示されます。

 

赤枠の部分が、選んだボタンのレイアウトになりますので、プログラムに移植しましょう。移植したプログラムが下記の通りです。

import React,{Component} from 'react';
import * as ReactDOM from 'react-dom';
import { AccountHttp, NEMLibrary, NetworkTypes, Address } from "nem-library";

import { withStyles } from '@material-ui/core/styles';//追加部分
import Button from '@material-ui/core/Button';//追加部分

NEMLibrary.bootstrap(NetworkTypes.MAIN_NET);

class AppNem extends Component{
	constructor(props){
		super(props);
		this.state = {
			nemAmount:'0',
		};
	}

	//NEM取得関数(前回のプログラムから引用)
	getNemAmount()
  	{
		const address = new Address("NBM7TVZRHGFPFHCWAMZ2IL5MSU2ZXPO3X6L4NNKF");
		const accountHttp = new AccountHttp();
		accountHttp.getFromAddress(address).subscribe(accountInfoWithMetaData => {
			this.setState({nemAmount:'I have '+accountInfoWithMetaData.balance.balance+'nem'})
    		});
  	}

	render(){
		return(
		<div>
			<p>{this.state.nemAmount}</p>		
				<Button variant="contained" color="primary" onClick={this.getNemAmount.bind(this)}>NEM保有量取得ボタン</Button> {/*追加部分*/}
		</div>
		);
	}
}

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

 

追加部分とコメントした部分が修正箇所です。では実行してみましょう。

 

 

デザイン性のあるボタンが表示できました。

 

以上の様にMaterialUIでデザインを選び、変更することができます。

ちょっと話が脱線しますが、NEMプログラムをやってみて感じたことを、今回は書こうかと思います。プログラムの本題とは離れるため、読みたくない人は読み飛ばしてください。

 

<NEMプログラミングに掛かった時間比率について>

webプログラミング初心者の私が、NEMプログラミング習得及び作成にかかった大まかな時間比率は

 ●言語の習得(javascript,Tyepscriptなど) → 10

 ●webデザイン → 8

 ●NEMプログラミング →1~0.5

くらいでした。そのくらいNEMは少ない時間で習得でき、完結・簡単にまとめてある印象です。逆にwebデザインには多くの時間が必要で、materialUIのみではデザインできない部分があり、materialUI+CSSが必要になりました。これにはサンプルが少なく、(どっちが優先されるとか)いろいろ癖があるので、デザインに多くの時間が掛かりました。

 

<NEMプログラムのファイルサイズについて>

NEMプログラムをwebpackでやっていると、どうしても解消できないのがファイルサイズの肥大化です。NEMLibraryをwebpackすると、ファイルサイズが2MByteを超えます。個人的にはこの辺を解消するライトなライブラリが出ないか望んでいる限りです。(node.jsなどサーバー側でNEMプログラムを裏で走らせ、フロントエンドで表示させれば解消できると思いますが、初心者の個人が作るにはハードルが高すぎます。)

 

<NEMアプリの信頼について>

私の様にNEMプログラムを自作しても、それを使う人は皆無だと思っています。(現にNEMREGIもほとんどアクセスはありません)なぜなら、公開したプログラムに悪意があるかどうか使用者が判断できないからです。支払い時にはプライベートキーを入力する必要がありますが、それを悪用されない保証がどこにもありません。今後、仮想通貨におけるプログラム全般が普及するには、公開したアプリを信頼できる保証付き登録サイトがなければ、ブロックチェーンアプリケーションが普及することは難しいことを、自らプログラムを作成・公開して感じました。管理者がいない仮想通貨自体の保証もクローズアップされておりますが、アプリケーションの保証も検討されなければ、普及は難しいのではと個人的には感じています。

 

 

話がかなり脱線しましたが、今回はここまでに。

 

 

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

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

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

(NEMショップやフリマなどを開く際にQRコードを用いて携帯一つで支払いできます)

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

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

 

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

これまでの記事:

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

プログラム初心者が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)

Comment
tom
tom
2019-04-15 23:02:18ID:103940

たしかに!秘密キーが流出しない補償をつけないといけませんね!

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