スポンサーリンク
仮想通貨EOSのブロックチェーンに接続するにはScatter（スキャッター）がメジャーですが、ブロックプロデューサー候補のGreymass開発のAnchor（アンカー）がScatterに変わるdApps接続方法として注目を集めています。
スポンサーリンク
QRコードのみで接続できるAnchor Link
従来はScatterなどのデスクトップアプリを立ち上げてdAppsに接続する必要がありました。
今回の接続方法はiPhoneにAnchor（アンカー）というアプリ（現時点2020年6月3日ではiOSのTestflight経由のアプリのみ）をインストールして、QRを読むだけで、ログイン、トランザクションなどの処理を行うことができるようになりました。
なんでiPhoneでQRコードによる接続が必要なのかというと、AppleがdApps起動用のブラウザをアプリに搭載するのを排除してきており、秘密鍵のみを管理する鍵管理アプリにすることで規制を回避できる可能性があります。
Anchor Linkのサンプルコード
EOSブロックチェーンにAnchor Linkで接続するサンプルコードを明記しました。
以下のコードもコピペするだけで動作するものとなります。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anchor Link - Login</title>
<script src="https://unpkg.com/anchor-link"></script>
<script src="https://unpkg.com/anchor-link-browser-transport"></script>
<script>
// アプリ識別子、該当する場合はeosio契約アカウントに設定する必要があります
const identifier = 'example'
// ブラウザのトランスポートを初期化する
const transport = new AnchorLinkBrowserTransport()
// リンクを初期化する
const link = new AnchorLink({transport})
// ink.restoreSession（）を使用して復元された、またはlink.login（）で作成されたセッションインスタンス
let session
// ドキュメントのロード時に呼び出されるセッションの復元を試みます
function restoreSession() {
link.restoreSession(identifier).then((result) => {
session = result
if (session) {
didLogin()
}
})
}
// ログインしてセッションを保存する（成功した場合）
function login() {
link.login(identifier).then((result) => {
session = result.session
didLogin()
})
}
// ログアウトしてストレージからセッションを削除
function logout() {
document.body.classList.remove('logged-in')
session.remove()
}
// セッションが復元または作成されたときに呼び出されます
function didLogin() {
document.getElementById('account-name').textContent = session.auth.actor
document.body.classList.add('logged-in')
}
// セッションを使用してトークンを転送する
function transfer() {
const action = {
account: 'eosio.token',
name: 'transfer',
authorization: [session.auth],
data: {
from: session.auth.actor,
to: 'eoserscrypto',
quantity: '0.0001 EOS',
memo: 'Anchor is the best! Thank you <3'
}
}
session.transact({action}).then((result) => {
document.getElementById('log').innerHTML += `Transaction broadcast! ${ result.processed.id }\n`
})
}
// キーボードでトランザクションを操作する。
window.addEventListener('keypress', (event) => {
if (event.key === 'F' || event.key === 'f') {
transfer()
}
})
</script>
<style>
.logged-in #login-ui {
display: none;
}
#app-ui {
display: none;
}
.logged-in #app-ui {
display: block;
}
</style>
</head>
<body onload="restoreSession()">
<div id="app-ui">
<p>ようこそ <b id="account-name">名無しさん</b>！</p>
<ul>
<li><button onclick="transfer()">eoserscryptoに送金する</button></li>
<li><button onclick="logout()">ログアウト</button></li>
</ul>
<p><small>Fキーを押してeoserscryptoに送金する</small></p>
<pre id="log"></pre>
</div>
<div id="login-ui">
<button onclick="login()">ログイン</button>
</div>
</body>
</html>
QRコードをAnchorアプリで読み込むだけでEOSブロックチェーンに接続できたと思います。
非常に簡単で、スタイリッシュな接続になっています。
最後に
今回Anchor Linkの簡単なソースコードと接続について紹介しました。
次回は、実際に各機能のサンプルコードを紹介していきたいと思います。
スポンサーリンク
スポンサーリンク
