EOSJS

Scatterプログラミングの始め方（eosjs v16.0.9版）

  /

仮想通貨EOS（イオス）にてdApps（ダップス）に接続するにはScatter（スキャッター）が必須になります。

そのScatter（スキャッター）を基盤にEOS系のdAppsを作れたら、HTML上からScatterを接続できたら、、そして、更に簡単に接続できたらと思いScatterプログラミングをやってみました。

今回は初心者にもわかりやすく、できるだけコピペで簡単にできるようにプログラミングをしていきたいと思います。

目次
  1. Scatterプログラミングの初期設定をする
  2. Scatterのパラメーターを初期化する
  3. ネットワークを設定する
  4. Scatterにログインする
  5. Scatterからログアウトする
  6. フルコード
  7. 最後に

Scatterプログラミングの初期設定をする

今回はeosjs v16.0.9版のプログラミングを行っていきたいと思います。

まずはHTMLのヘッダーの設定をしたいと思いますので、以下を記述してください。

<!-- EOS基盤のJavascriptモジュール v16.0.9 -->
<script src="https://cdn.jsdelivr.net/npm/eosjs@16.0.9/lib/eos.min.js"></script>

<!-- ScatterのコアJavascriptモジュール -->
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-core.min.js"></script>

<!-- ScatterのEOSブロックチェーン接続Javascriptモジュール -->
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs.min.js"></script>

 

これを設定することによるEOSとScatterのAPIからブロックチェーンに接続し送金やステーキング、アカウント作成などの様々なEOSの機能を扱うことが出来ます。

Scatterのパラメーターを初期化する

まずはScatterのパラメーターを一度初期化します。

/*Scatterを初期化する*/
ScatterJS.plugins(new ScatterEOS());

/*EOS API変数を初期化する*/
var eos = null;

/*アカウント情報を初期化する*/
var account = null;

/*パーミッション情報を初期化する*/
var options = null;

 

この宣言で一度すべてをクリアにしました。

ネットワークを設定する

ブロックチェーンに接続するためにネットワーク情報を設定します。

/*EOSメインネットのチェーン設定*/
const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
    host:'nodes.get-scatter.com',
    port:443,
    protocol:'https'
});

 

このネットワーク情報はメインネットなので本番環境で動かしたい場合は上記のチェーンを設定します。

テスト版で動かしたい場合はテストネットも接続できます。

/*EOSテストネットJungleのチェーン設定*/
const network = ScatterJS.Network.fromJson({
    blockchain: 'eos',
    chainId: 'e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473',
    host: 'jungle2.cryptolions.io',
    port: 443,
    protocol: 'https'
});

テストネットは色々ありますが今回はJungleテストネットのチェーン情報を掲載します。

Scatterにログインする

それでは早速Scatterにログインするプログラムを書いていきましょう。

function scatter_login(){

    /* ScatterでEOSブロックチェーンに接続する */
    ScatterJS.connect('YourAppName', {network}).then(connected => {
        /* 接続ができなかった場合は処理を中止する */
        if(!connected) return console.error('no scatter');

        /* EOSブロックチェーンとScatterを繋ぎAPI操作できるようにする。 */
        eos = ScatterJS.eos(network, Eos);

        /* ScatterでEOSブロックチェーンに接続する */
        ScatterJS.login().then(id => {

            /* ScatterでEOSアカウントに不備があれば処理を中止する */
            if(!id) return console.error('no identity');

            /* Scatterに登録されているEOSアカウントのパラメーターを設定する */
            account = ScatterJS.account('eos');
            /* activeかownerかのパラメーターを設定する */
            options = {authorization:[`${account.name}@${account.authority}`]};

            /* 設定されたアカウント情報を出力する */
            console.log(JSON.stringify(account));
            
        });
    });
}

これでScatterに接続できる環境が整いました。

Scatterからログアウトする

ログインしたらログアウトしすべての情報を開放してやる必要もありますので。
ログアウトのコードも明記しておきます。

function scatter_logout(){

    /* Scatter上のアカウントデータをクリアする */
    ScatterJS.scatter.forgetIdentity()

    /* Scatterからログアウトする。 */
    ScatterJS.scatter.logout();

    /* アカウント情報をクリアする */
    account = null;
    option = null;

}

これをすることによりScatterからログアウトできます。

フルコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>scatter test</title>


<script src="https://cdn.jsdelivr.net/npm/eosjs@16.0.9/lib/eos.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-core.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs.min.js"></script>
  
<script>

/* EOSとScatterの初期化をする */
ScatterJS.plugins(new ScatterEOS());
var eos = null;
var account = null;
var options = null;


/* EOSブロックチェーンネットワークを宣言する */
const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
    host:'nodes.get-scatter.com',
    port:443,
    protocol:'https'
}); //mainnet


/* Scatterにログインする。 */
function scatter_login(){
    ScatterJS.connect('<dAppsの名称>', {network}).then(connected => {
        if(!connected) return console.error('no scatter');

       eos = ScatterJS.eos(network, Eos);

        ScatterJS.login().then(id => {
            if(!id) return console.error('no identity');
        
            account = ScatterJS.account('eos');
            options = {authorization:[`${account.name}@${account.authority}`]};

            /* HTML上に結果を表示する。 */
            document.getElementById('account').innerHTML = JSON.stringify(account);
            
        });
    });
}

/* Scatterにログアウトする。 */
function scatter_logout(){
    ScatterJS.scatter.forgetIdentity()
    ScatterJS.scatter.logout();
    account = null;
    options = null;
    
    /* HTML上に結果を表示する。 */
    document.getElementById('account').innerHTML = "";
}

</script>
</head>

<body>

<!-- HTMLの本文 -->
<h1>scatter test</h1>

<!-- Scatterのログインとログアウトをするボタン -->
<button type="button" name="name" value="value" onClick="scatter_login();">Scatter Login</button><br>
<button type="button" name="name" value="value" onClick="scatter_logout();">Scatter Loｇout</button><br><br>

<!-- 結果を表示する -->
<div id="account">no account</div><br>

</body>
</html>

最後に

今回はScatterとEOSをつなぐ基本的なコードを明記しました。

フルコードをそのままHTMLにコピペしてScatterを立ち上げた状態で、Scatter Loginボタンを押せばScatterでdAppsにログインできるはずです。
Scatter Loｇoutボタンを押せばログアウトもできるはずです。

次回は実際に送金やステーキングをやってみましょう。

dApps EOS eosjs Scatter ウォレット プログラミング 仮想通貨
EOS初心者おすすめ記事
合わせて読みたい
RELATED POST