Boxesを利用してブラウザから動作するDAppsサンプルアプリを作るツイートシェアはてブLINEPocket前回は書籍を読んでコンソール上で実装した処理を実行することができました。次はやはりブラウザから操作したい。いうことでサンプルアプリ作りました。Boxesを利用することに。BoxesにはReactやVue.js等のモダンなJavascriptフレームワークを使ったDAppsのサンプルアプリまで色々あるのでとても参考になります。その中でも今回はtutorialtokenにしました。このサンプルアプリではブラウザ上から指定のアドレスに独自トークンの発行/送信を行う所までできます。動作確認するまでの流れをまとめたので見ていきましょう。まとめ開発の流れ開発の流れとしては以下の通りで、コードを書く以外にもいくつか手順があります。前提としてはnpmとnodeはすでにインストールされているものとします。Boxesからサンプルコードをダウンロード。動作させた環境は以下になります。Boxesからサンプルコードをダウンロード。tutorialtokenダウンロードしたら次はOpenZeppelinのインストール。OpenZeppelinとはSolidityでセキュアなスマートコントラクトを作成する目的で作られた、基本的なスマートコントラクトのフォーマットを提供するライブラリ群となっています。今回ではERC20準拠の独自トークンを作成するために使います。次にダウンロードしたサンプルコードそのままでは動作しないのでドキュメントに書いてある通りにコーディングします。コーディングするのは2ファイルのみです。contractsフォルダ以下にTutorialToken.solファイルを作成してコーディングします。INITIAL_SUPPLY;}}ERC20に準拠するトークンの定義を書いています。StandardTokenを継承してトークンの省略名等の必要な定義を少しするだけ。これだけで独自トークンの送金ができちゃうのか・・簡単。ERC20とはイーサリアム上のトークンを標準化する仕様のことまつしん独自トークンをすぐ作れるのはXEMの特権かと思ってたけどプログラマなら簡単にイーサリアムでも作れそうだな〜。migrationsフォルダ以下に2_deploy_tutorial_token.jsファイルを作成してコーディングします。{deployer.deploy(TutorialToken);};デプロイする際の動作が記述されています。処理としてはデプロイするだけの処理となっています。webとの連携に関してはsrc/js/app.jsに最初から記述されています。このファイルをじっくり読み込むと基本的なSolidity側との連携の理解ができるかと思います。一部サンプルコードだと最新のGanacheに対応していないらしくコードを修正しました。App.initContract();},まつしんここのコード変更しないといけないの、かなりハマった。変更しないとGanacheと連携して動作しない。コードのコンパイル実装ができましたので、コンパイルを行います。compileGanacheの起動アプリと連携させるためにGanacheを起動させる。インストールしていない場合はここからダウンロードして、インストールを。Ganacheはイーサリアム開発用のパーソナルブロックチェーンです。ガスコスト等をGUIで確認できるのでとても便利です。コードのデプロイ・アプリ起動イーサリアムネットワークにコントラクトをデプロイします。artifacts...Ganacheが起動していればデプロイ時にトランザクションが確認できます。files...起動すると自動でブラウザのタブが開かれます。独自トークンを送信するアドレスと送金量が入力できるだけの画面が表示されればOKです。MetaMask連携アプリが起動できたので、Metamaskからローカルで起動しているブロックチェーンにアクセスできるようにしましょう。MetaMaskがまだインストールできていない場合はこちらからChromeにインストールして設定を完了させてください。URLに「http://127.0.0.1:7545」を入力してSAVE。次にGanacheアカウントのインポートを行います。Ganacheのアカウント一覧で上から2番目のアドレスの横にある鍵マークをクリック。秘密鍵が表示されるので選択してコピーしておく。Accout」を選択。コピーした秘密鍵をペースとしてIMPORTして完了。画面に作成したアカウントのアドレスと送金量を入力してTransferボタンをクリック。アラートメッセージが表示され、画面上のBalanceの数字が減っていたら送金完了!GanacheのTRANSACTIONSにもデータが追加されています。最後にMetaMaskでもトークンが送金されたことを確認します。CONTRACTADDRESSをコピーします。TOKENボタンをクリック。コピーしたコントラクトアドレスを貼り付けてAddボタンをクリック。すると、保有トークン数が見えます!以上で、終わりです!まとめまずはweb3.jsを利用したwebとの連携の基本がわかったかなと。楽にセキュアなコントラクトを作成できた。ちなみに今回はプログラムを用いて独自トークンを作ったが、NEMだとプログラムを書かなくてもNanoWalletを使えばさくっと作れます。前にブログに書いてた。【解説】NEMのモザイクを使って独自通貨をTIpNEMで投げ銭するまで2017年11月3日まつしん次は何しようかな。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取る【4/22の資産公開】どうやら春が来たっぽい?!DApps開発学習を開始!まずは「ブロックチェーンアプリケーション開発の教科書」を読んだよRECOMMENDこちらの記事も人気です。Libraryを利用して独自通貨(モザイク)を...プロフィールまつしん(matsushin)プログラミング・仮想通貨・スポーツが好き。教師を目指していたが、IT業界は伸び続けると思いその道へ。新卒でSIer→Webプログラマ→リモートワーク普段はRailsでお仕事してます。