自作ツール「XRPL Explorer Mini」の実装解説
価格取得と残高照会を支えるフロントエンド技術の裏側

当サイトで公開中の「XRPL Explorer Mini」では、ブラウザから直接 XRPL ネットワークへ接続する仕組みを採用しています。

このツールを構築する上で核となる「価格データの取得」と「XRPL ノードからの残高抽出」について、どのようなロジックで動いているのかを整理しました。

1. 市場価格の取得（CoinGecko API）

XRP の日本円（JPY）および米ドル（USD）価格をリアルタイムに表示するため、CoinGecko API を活用しています。

const response = await fetch(
    "https://api.coingecko.com/api/v3/simple/price?ids=ripple&vs_currencies=jpy,usd"
);
const data = await response.json();

2. リアルタイム残高照会（xrpl.js）

アカウントの残高取得には、XRPL 公式ライブラリ xrpl.js を使用しています。

3. 安全な利用のための入力値クリーニング

ユーザーが入力したアドレスに含まれる余計な空白や全角文字を排除するため、入力値の正規化と不要文字の除去を行っています。

let targetAddr = inputField.value
    .normalize("NFKC") // 全角文字を半角に変換
    .replace(/[^\x21-\x7E]/g, "") // 非表示文字などを削除
    .trim();