Lisk Elements で遊ぼう #1

2019年3月22日 19:43

万博記念公園で桜まつりが始まったので、もう少し桜が咲いたら自転車で行こうと思ってる万博おじです。

はじめに

タイトルの通り今回は仮想通貨LiskのJavaScriptライブラリであるLisk Elementで遊んでみたいと思います。
シリーズ化しようと思ってますが、「プログラムなんてやったことないんだぜ」という人も見られるようにする予定です。
なのでnode.jsは使用しません。
これでLisk自体にも興味を持って貰うとおじさん嬉しい。

コーディング 1

ということで、まず以下のコードをメモ帳などに貼り付けて、ファイル名をとりあえずaccount.html、保存時の文字コードをUTF-8としましょう。
※ファイル名を付ける時、拡張子の.txtは消しましょう。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>account</title>
   <script src="https://js.lisk.io/lisk-elements-2.0.0.min.js"></script>
 </head>
 <body>
   <div id="contents">Now Loading..</div>
 </body>
</html>

コード説明

<!DOCTYPE html>
HTML5で書いてますよーという宣言

<meta charset="utf-8">
文字コードはUTF-8ですよーという宣言

<title>account</title>
WEBブラウザに表示されるタイトル。
この場合はaccount。

<script src="https:～
lisk-elements-2.0.0を使いますよーという宣言

<body>～</body>
WEBブラウザに表示される内容を書くところ。
今回はNow Loading..と表示される。

ファイルが保存できたら、ファイルをダブルクリックして実行！
※ブラウザはGoogle ChromeやFirefox推奨
どうでしょう？Now Loading..とブラウザに表示されましたか？
表示されたら次に進みましょう。

コーディング 2

いよいよ、Liskチェーンにアクセスしてアカウント情報を取得します。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>account</title>
   <script src="https://js.lisk.io/lisk-elements-2.0.0.min.js"></script>
   <script type="text/javascript">
     const getAccount = (liskAddress) => {
       const client = lisk.APIClient.createMainnetAPIClient();
       client.accounts.get({ address: liskAddress })
       .then(res => {
         document.querySelector('#contents').innerHTML = JSON.stringify(res.data);
       });
     }
     onload = getAccount('10872755118372042973L');
   </script>
 </head>
 <body>
   <div id="contents">Now Loading..</div>
 </body>
</html>

はい、<script src="https～の下に何か増えましたね！

増えたのはこちら

<script type="text/javascript">
  const getAccount = (liskAddress) => {
    const client = lisk.APIClient.createMainnetAPIClient();
    client.accounts.get({ address: liskAddress})
    .then(res => {
      document.querySelector('#contents').innerHTML = JSON.stringify(res.data);
    });
  }
  onload = getAccount('10872755118372042973L');
</script>

コード説明

<script type="text/javascript">
JavaScriptで書きますよーという宣言

const getAccount = (liskAddress) => {〜}
関数名がgetAccount、受け取るパラメータ名がliskAddressという関数の宣言

const client = lisk.APIClient.createMainnetAPIClient();
Liskメインネットに接続
※実際に何かLiskに関するプログラムを作る場合はcreateTestnetAPIClient()を使用してテストネットで動作するようにしましょう。

client.accounts.get({ address: liskAddress})
アカウント情報を取得
取得条件はLiskアドレスがパラメータのliskAddressに格納された値

.then(res => {～});
<div id="contents">Now Loading..</div>に取得したアカウント情報を上書き

onload = getAccount('10872755118372042973L');
画面のロード後に関数getAccountに10872755118372042973Lを渡して実行
※Liskアドレスは公式ドキュメントに記載されているユーザー名oliverさんのアドレスです。実際に動かす際には自分のLiskアドレスを入れてみると良いでしょう。

なんか、文字の羅列が表示されましたか？

このままだと見難いので、ちょっと整形しましょう。

コーディング 3

どーん

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>account</title>
   <script src="https://js.lisk.io/lisk-elements-2.0.0.min.js"></script>
   <script type="text/javascript">
     const getAccount = (liskAddress) => {
       const client = lisk.APIClient.createMainnetAPIClient();
       client.accounts.get({ address: liskAddress })
       .then(res => {
         const pretag = document.createElement('pre');
         pretag.innerHTML = JSON.stringify(res.data, null , 2);
         document.querySelector('#contents').replaceWith(pretag);
       });
     }
     onload = getAccount('10872755118372042973L');
   </script>
 </head>
 <body>
   <div id="contents">Now Loading..</div>
 </body>
</html>

何が変わったかというと、.then(res => {〜});の中身ですね。

変わったのはこちら

const pretag = document.createElement('pre');
pretag.innerHTML = JSON.stringify(res.data, null , 2);
document.querySelector('#contents').replaceWith(pretag);

コード説明

const pretag = document.createElement('pre');
preタグを作成

pretag.innerHTML = JSON.stringify(res.data, null , 2);
preタグの内容にアカウント情報を書き込み
※JSON.stringifyは受取った文字列をJSONとして扱う関数で、第3引数に数値を入力すると（この場合2）適切な場所で改行後、数値分インデントされます。

document.querySelector('#contents').replaceWith(pretag);
表示内容をpreタグの内容に変更
※document.querySelector('#contents')でid="contents"のオブジェクトを取得し、replaceWithで置き換えています。

なんということでしょう。あんなに見難かった文字列が見やすくなったではありませんか！

この情報から読めること

address
Liskアドレス。
この場合は10872755118372042973L

balance
保有枚数（1億倍された値を取得）
この場合は0

user
デリゲートユーザー名
この場合はoliverさん

vote
voteの重み（1億倍された値を取得）
この場合は404.87543729

rank
デリゲートランク
この場合は592位

さて、どうだったでしょう？
割と簡単にアカウント情報が取得できたとは思いませんか？
「Lisk ExplorerやLisk Hub、Lisk Mobileで見れるやんけ！」ではなく、「ちょっと何かしてみようかな」と思ってもらえたら嬉しいです。

今回はここまで。
お疲れ様でした！

リンク

Lisk Elements ドキュメント(Account)
※検索条件は Lisk Core ドキュメント参照

応援

「おもろいやんけ！」と思ってもらえたら、コメントや万博おじへtweetしてくれると嬉しいです。
Lisk Japanもよろしくね！

この記事が気に入ったらサポートをしてみませんか？