はじめに
本連載では、カスタムブロックチェーンを構築するためのフレームワークであるSubstrateの概要と使い方について、全6回で解説します。
第6回では、前回作成した独自のトークンRuntimeをブラウザから操作するためのWebアプリケーションを実装する手法について紹介します。
本記事は、過去にコンセンサス・ベイスが主宰していたオンラインサロンの記事です。記事は2017年~2018年にかけて執筆されたため、一部は、既に古くなっている可能性があります。あらかじめご了承ください。
UIテンプレートの確認
第5回の手順を実行した読者の方は、すでにUI開発のためのプロジェクトもセットアップ済です。
コマンド1を用いて、UIテンプレートのフォルダに移動し、必要なモジュールのインストールとWebアプリケーションの実行をおこないます。
コマンド1. UIテンプレートの初期化と実行
$ cd substrate-mytoken-ui
$ yarn install
$ yarn run dev
また、別のコンソールにて、第5回で作成したmytokenのカスタムチェーンをローカルで起動しておいてください。
コマンド2. substrate-mytokenチェーンの起動
$ cd substrate-mytoken
$ ./target/release/substrate-mytoken --dev
チェーンのノードとWebサーバの起動が完了したら、Google Chromeでhttp://localhost:8000 にアクセスしてください。無事にWebページが表示されれば準備は完了です。もし、画面が真っ白になるなどの異常がある方は、Google ChromeのDeveloperツール等を用いてエラーを確認してみてください。
独自セグメントの実装
今回使用するsubstrate-uiテンプレートは、oo7-substrateと呼ばれるフレームワークとReactを用いて実装されたWebアプリケーションです。oo7-substrateは、ParityのEthereumノードとWebフロントエンドをつなぐフレームワークであるoo7-parityのsubstrate版です。oo7フレームワークでは、Bondと呼ばれるPromiseに似た非同期通信モジュールを用いて値を表現します。
それでは、トークンRuntimeを扱うための独自セグメントの実装に挑戦してみましょう。
まず、 src/app.jsxファイルをエディタで開き、セグメントの定義が並ぶ箇所の適当な行に、コード1に示すTokenSegmentの定義を追記します。
TokenSegmentでは、token.initやtoken.ownerなど、トークンRuntimeのストレージ情報を表示する機能を実装しています。
コード1. src/app.jsx: トークンの状態を取得
class TokenSegment extends React.Component {
constructor() {
super()
}
render() {
return
Token
Manage custom overlay token
}
}
続いて、同じくsrc/app.jsx中のAppクラスの定義を開き、修正を加えます。まず、constructor部分に、独自型であるTokenBalanceの定義を追記します。続いて、readyRenderの箇所を修正し、さきほど定義したTokenSegmentを読み込みます。このとき、runtime.tokenが存在する場合のみTokenSegmentを表示するようにしておきます。また、デフォルトで用意されているセグメントで不要なセグメントがあれば、適宜削除しておきます。
コード2. src/app.jsx: Appクラスの修正
export class App extends ReactiveComponent {
constructor() {
super([], { ensureRuntime: runtimeUp })
addCodecTransform('TokenBalance', 'u128');
// For debug only.
window.runtime = runtime;
window.secretStore = secretStore;
window.addressBook = addressBook;
window.chain = chain;
window.calls = calls;
window.system = system;
window.that = this;
window.metadata = metadata;
}
readyRender() {
return (
ここまで実装できたら、一度ブラウザに戻り、ページを再読込みしてみましょう。図1に示すとおり、Tokenとタイトル表示されるセグメントが表示されれば成功です。InitやSupplyなどの情報も取得できているか確認してください。
図1. Tokenセグメントの表示例
トランザクションの発行
値の取得ができたら、UI上からトランザクションの発行に挑戦してみましょう。
app.jsxのTokenSegmentの定義を、コード4に示すとおりに修正します。コード4では、トランザクションを実行するアカウントの選択欄と、init, transfer関数の実行フォームを追加しています。
コード4. init, transferの実行機能実装
class TokenSegment extends React.Component {
constructor() {
super();
this.source = new Bond;
this.initSupply = new Bond;
this.receiver = new Bond;
this.transferAmount = new Bond;
}
render() {
return
Token
Manage custom overlay token
account
} />
init
n ? n : null}
action={
transfer
n ? n : null}
/>
Token Balance
} />
}
}
init関数の動作を確認するため、コマンド2を用いて一度チェーンの状態を初期化して、ノードを再起動しましょう。
コマンド2. チェーンの初期化と再起動
$ ./target/release/substrate-mytoken purge-chain --dev -y
$ ./target/release/substrate-mytoken --dev
初期化された状態では、図2に示すとおり、Initはfalseの状態になっているはずです。また、Ownerには適当なアドレス、Supplyには0が格納されています。
図2. Tokenの初期化状態
この状態から、account欄にAliceと入力し、init欄に適当なsupplyの値を入力し、init関数を実行します。
もし、Aliceのアカウントが存在しない場合、Walletセグメントにてseed: //Alice, name: Aliceとしてアカウントを読み込んでください。
図3. init関数の実行
問題なくinitが実行できれば、Init: trueとなり、OwnerやSupplyの値も更新されるはずです。
続いて、transfer関数を用いて、AliceからBobにトークンを送金してみます。第1引数にBobを指定し、第2引数に送りたいトークン量を指定します。もし、Bobのアカウントも見つからない場合は、Walletセグメントからseed: //Bob, name: Bobとしてアカウントを読み込んでください。
transferも無事に実行できれば、Aliceのトークン残高が減り、Bobのトークン残高に加算されているはずです。
本稿までで、全6回にわたり、Substrateの基本的な概念や開発手法について紹介してきました。より発展的な内容は、参考文献に示す公式ページや、Substrateのコード自体を参照しながら、学習を進めてみてください。
参考文献：
- What is Substrate? – Parity
https://www.parity.io/what-is-substrate/ - Substrate Developer Hub
https://docs.substrate.dev/ - Substrate: The platform for blockchain innovators – Github
https://github.com/paritytech/substrate - polkadot-js/app – Github
https://github.com/polkadot-js/apps
ブロックチェーン学習に最適の書籍の紹介
図解即戦力 ブロックチェーンのしくみと開発がこれ1冊でしっかりわかる教科書
本書は、ブロックチェーン技術に興味を持ったエンジニアや、その仕組みを学び、自分の仕事に活かしたいビジネスパーソンを対象にして、ブロックチェーンのコア技術とネットワーク維持の仕組みを平易な言葉で解説しています。この本を読んだうえで、実際にコードを書くような専門書、ブロックチェーンビジネスの解説書を読むことで、理解度が飛躍的に高まるでしょう。（はじめにより）
会社紹介
弊社（コンセンサス・ベイス株式会社）は、2015年設立の国内で最も古いブロックチェーン専門企業です。これまでに、大手企業の顧客を中心に、日本トップクラスのブロックチェーンの開発・コンサルティング実績があります。ブロックチェーンに関わるビジネスコンサル・システム開発・教育・講演などご希望でしたら、お気軽にお問い合わせください。
会社ホームページ
https://www.consensus-base.com/
免責事項
本記事に掲載されている記事の内容につきましては、正しい情報を提供することに務めてはおりますが、提供している記事の内容及び参考資料からいかなる損失や損害などの被害が発生したとしても、弊社では責任を負いかねます。実施される際には、法律事務所にご相談ください。
技術・サービス・実装方法等のレビュー、その他解説・分析・意見につきましてはblock-chani.jp運営者の個人的見解です。正確性・正当性を保証するものではありません。本記事掲載の記事内容のご利用は読者様個人の判断により自己責任でお願いいたします。
