Lisk SDK (lisk-client)を使いながらJavaScriptを勉強してみない? - その4 -
こんにちは!
久々に風邪をひいて週末熱を出して寝ていた万博おじです😨
(子どもから貰った様子)
ということで、今回は5回目、内容は「ループ処理:APIからトランザクション情報を取得」です。
準備
JavaScriptの基本:パスフレーズを生成
文字列操作:パスフレーズからアドレスを取得
非同期処理:APIからアカウント情報を取得
ループ処理:APIからトランザクション情報を取得
トランザクションの生成と送信
トランザクション手数料の取得
はじめに
ループ処理。大事です。
だいたいどんな機能でも複数の情報を並べて表示とかしますしね!
で、このループ処理、JavaScriptだけではないですがいろんな書き方があります。
お勉強用ソースコードには1種類だけですが、参考に記載するので覚えていってくださいね😉
前回
今回のお勉強用ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画面タイトルです</title>
<script src="https://js.lisk.com/lisk-client-5.2.2.min.js" defer></script>
<style>
html { font-size: 10px; }
body { font-size: 1.6rem; }
input[type="text"],
input[type="number"],
input[type="password"],
textarea,
button {
font-size: 1.6rem;
padding: 5px;
}
</style>
</head>
<body>
<div>
<input type="password" id="enter-passphrase" style="width: 300px;" placeholder="パスフレーズを入力してください" oninput="checkPassphrase(this.value)" />
</div>
<div>
<button type="button" id="btn-login" style="width: 150px;" onclick="login()" disabled="true">ログイン</button>
<button type="button" style="width: 150px;" onclick="createAccount()">アカウントを作成</button>
</div>
<div>
<a href="https://testnet-faucet.lisk.com/" target="_blank" rel="noopener noreferrer">テストネット用のLSKを受け取ります</a>
</div>
<hr>
<h4>テスト用パスフレーズ:</h4>
<div>
abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about
</div>
<hr>
<!-- (1)パスフレーズの表示場所 -->
<h4>パスフレーズ:</h4>
<div id="lisk-passphrase"></div>
<!-- (2)アドレスの表示場所 -->
<h4>アドレス:</h4>
<div id="lisk-address"></div>
<div id="lisk-bufferAddress"></div>
<!-- (3)公開鍵の表示場所 -->
<h4>公開鍵:</h4>
<div id="lisk-publicKey"></div>
<!-- (4)残高の表示場所 -->
<h4>残高:</h4>
<div id="lisk-balance"></div>
<!-- (5)残高の表示場所 -->
<h4>トランザクション(直近10件):</h4>
<div id="lisk-transactions"></div>
<script>
/*
* アカウント情報初期化
*/
function clearAccountInfo() {
document.querySelector("#lisk-address").innerHTML = "";
document.querySelector("#lisk-balance").innerHTML = "";
document.querySelector("#lisk-passphrase").innerHTML = "";
document.querySelector("#lisk-bufferAddress").innerHTML = "";
document.querySelector("#lisk-publicKey").innerHTML = "";
document.querySelector("#lisk-transactions").innerHTML = "";
}
/*
* アカウント作成処理
*/
function createAccount() {
// (0)アカウント情報初期化
clearAccountInfo();
// (1)パスフレーズを生成して画面に表示
const mnemonic = lisk.passphrase.Mnemonic.generateMnemonic();
document.querySelector("#lisk-passphrase").innerHTML = mnemonic;
// (2)アドレスと公開鍵を取得して画面に表示
const addressAndPublicKey = lisk.cryptography.getAddressAndPublicKeyFromPassphrase(mnemonic);
const bufferAddress = addressAndPublicKey.address;
const publicKey = addressAndPublicKey.publicKey;
document.querySelector("#lisk-bufferAddress").innerHTML = `(${bufferAddress.toString("hex")})`;
document.querySelector("#lisk-publicKey").innerHTML = publicKey.toString("hex");
// (3)アドレスを取得して画面に表示
const address = lisk.cryptography.getLisk32AddressFromAddress(bufferAddress);
document.querySelector("#lisk-address").innerHTML = address;
// (4)残高は0LSKとする
document.querySelector("#lisk-balance").innerHTML = "0LSK";
}
/*
* ログイン
*/
async function login() {
// (0)アカウント情報初期化
clearAccountInfo();
// (1)入力されたパスフレーズを取得
const passphrase = document.querySelector("#enter-passphrase").value;
// (2)パスフレーズからlsk始まりのアドレスを取得
const address = lisk.cryptography.getLisk32AddressFromPassphrase(passphrase);
// (3)Lisk Service API の accounts を使用してアカウント情報を取得
const response = await fetch(`https://testnet-service.lisk.com/api/v2/accounts?address=${address}`);
const json = await response.json();
// (4)見つからなかった場合は終了
if (json.error) {
alert("アカウントが見つかりませんでした。");
return;
}
// (5)見つかった場合は画面に表示
const account = json.data[0];
document.querySelector("#lisk-address").innerHTML = account.summary.address;
document.querySelector("#lisk-balance").innerHTML = `${lisk.transactions.convertBeddowsToLSK(account.summary.balance)}LSK`;
document.querySelector("#lisk-passphrase").innerHTML = "ひみつ";
// (6)公開鍵とバッファアドレスはパスフレーズから取得して表示
const addressAndPublicKey = lisk.cryptography.getAddressAndPublicKeyFromPassphrase(passphrase);
document.querySelector("#lisk-bufferAddress").innerHTML = `(${addressAndPublicKey.address.toString("hex")})`;
document.querySelector("#lisk-publicKey").innerHTML = addressAndPublicKey.publicKey.toString("hex");
// (7)トランザクション情報取得して表示
showTransactions(address);
}
/*
* トランザクション情報表示
*/
async function showTransactions(address) {
// (1)指定のアドレスで送信または受信したトランザクション情報を取得
const response = await fetch(`https://testnet-service.lisk.com/api/v2/transactions?address=${address}&offset=0&limit=10`);
const json = await response.json();
// (2)見つからなかった場合は終了
if (json.error || json.data.length === 0) {
return;
}
let html_transactions = "";
for (data of json.data) {
html_transactions += `
<div>ID:${data.id}</div>
<div>タイプ:${data.moduleAssetName}</div>
<div>送信者:${data.sender.address === address? "あなた": data.sender.address}</div>
${data.asset.recipient === undefined? "":
`<div>受信者:${data.asset.recipient.address === address? "あなた": data.asset.recipient.address}</div>`
}
${data.asset.amount === undefined? "":
`<div>${data.sender.address === address? "送信":"受信"}枚数:${lisk.transactions.convertBeddowsToLSK(data.asset.amount)}LSK</div>`
}
<div>手数料:${lisk.transactions.convertBeddowsToLSK(data.fee)}LSK</div>
${data.asset.data === undefined? "":
`<div>データ:${data.asset.data}</div>`
}
<hr>
`;
}
document.querySelector("#lisk-transactions").innerHTML = html_transactions;
}
/*
* パスフレーズチェック
*/
function checkPassphrase(val) {
// (1)現在の入力値をチェック
const ret = lisk.passphrase.Mnemonic.validateMnemonic(val);
// (2)パスフレーズが正しくない場合はログインボタンを入力不可、正しい場合は入力可に変更
document.querySelector("#btn-login").disabled = !ret;
}
</script>
</body>
</html>
前回からの変更点
HTMLで変わったのは以下の通りです
トランザクション情報を表示する場所を追加(lisk-transactions)
テスト用パスフレーズの表示
JavaScriptで変わったのは以下の通りです
アカウント情報クリア処理(clearAccountInfo)を追加
トランザクション情報表示処理(showTransactions)を追加
アカウント作成処理でアカウント情報クリア処理を呼び出すように変更
ログイン処理でアカウント情報クリア処理とトランザクション情報表示処理を呼び出すように変更
画面を開くとこんな感じ
ソースコードの説明:HTML
新しく出てくる内容はありません🙂
ソースコードの説明:JavaScript(lisk-client)
新しく出てくる内容はありません🙂
ソースコードの説明:JavaScript
function clearAccountInfo
画面に表示されているアカウント情報をクリアする処理です。
innerHTML = "" とすることで画面を初めて開いた状態と同じ状態にしています。
function showTransactions
渡されたlsk始まりのアドレスからトランザクション情報を取得し画面にその情報を表示する処理です。
ログイン処理の最後に実行されます。
[変数] += [値]
変数に設定された値にさらに値を加算する方法です。
変数名 = 変数名 + 値 と同じです。
[値1] === [値2]
型も含めて一致する場合にtrueになります。
[値1] !== [値2]
型または値が一致しない場合にtrueになります。
undefined
値が設定されていない変数、戻り値がない関数の結果などがundefinedとして扱われます。
[真偽判定]? [真の場合]: [偽の場合]
三項演算子といいます。
?の前の判定が真(true)となる場合はコロン(:)の左側、偽(false)となる場合は右側が適用されます。
for ([ループ内変数] of [配列変数])
配列変数の内容をループ処理する際に使用します。
ループ処理中の配列変数の1要素についてはループ内変数に格納されます。
for ([カウンタ変数] = [初期値]; [ループ範囲]; [最終評価式])
ごく標準的なループ処理です。
配列の件数分ループする場合に使用されます。
[配列].forEach([コールバック関数])
配列を起点にループする場合はこのようにforEachを使用します。
ソースコードの説明:Liskサービス API
https://testnet-service.lisk.com/api/v2/transactions
テストネットのトランザクション情報を取得するLisk公式のLiskサービスAPIです。
詳しくはこちらをご覧ください。
トランザクション情報が取得できた時は以下のようなJSONが返却されます。
{
"data": [
{
"id": "...",
"moduleAssetId": "2:0",
"moduleAssetName": "token:transfer",
"fee": "210000",
....,
"sender": {
"address": "lsk.....",
"publicKey": "...",
},
"asset": {
"amount": "100000000",
"data": "",
"recipient": {
"address": "lsk...",
"publicKey": "..."
}
},
....
},
]
}
エラー時は以下のようなJSONが返却されます。
{
"error": true,
"message": "Not found"
}
おわりに
今回はここまで!
ループ処理はプログラムで何かしようとすると頻繁に出てくると思うのでしっかり覚えましょう。
どんなループ方法があるか知りたい人は「JavaScript ループ処理」などで検索してみてね😉
次回はいよいよLSKを送信します。LiskサービスのAPIやlisk-clientをいろいろ使用するのでちょっと難しいかもしれませんがよろしくお願いします🙂
それではお疲れさまでした!
万博おじについて
Liskに関するツールなど開発したりノード管理したりしています。
何かあればTwitter等でご連絡ください。
個人アカウント
Twitter:ys_mdmg
GitHub:lisknonanika
Discord:ys_mdmg#5646
Lisk Explorer:lisk observer, lisk scan
デリゲートアカウント(共同管理)
Twitter:liskcommulab
Discord:CommuLab#0097
Lisk Explorer:lisk observer, lisk scan
管理
ノード:Mainnet / Testnet
Lisk Service:Mainnet / Testnet
デリゲートサイト:Lisk CommuLab
この記事が気に入ったらサポートをしてみませんか?