為替レートAPI
今回、為替レートAPIを乗り換えたのでまとめ！
CurrencyFreaks
乗り換えた理由は1ヶ所でドル円・ユーロ円・ビットコイン円・ビットコインドル等ほとんど揃うからｗ。また、今回ミニグラフもポップアプ表示してみました。
手順
- アカウント作成
- APIキー取得
- html・JavaScript作成配置
めっちゃ簡単ｗ
JavaScript
//////////////////////////// 為替レート //////////////////////////
function quotesApi() {
const url = "https://api.currencyfreaks.com/v2.0/rates/latest?apikey={ ここにAPIキー }&symbols=BITCOIN,EUR,JPY,USD";
getData(url).then((data) => {
let output = "";
let output_eur = "";
const quotes = data.rates;
const bid = Math.floor(quotes.BITCOIN * 10000);
const eud = quotes.EUR;
const usjp = quotes.JPY;
const eujp = Math.floor(usjp / eud * 100) / 100;
output += '<a href="https://stocks.finance.yahoo.co.jp/stocks/chart/?code=USDJPY=X&ct=z&t=1m" title="USD:JPY" target="_blank">$\\(<span id="usjp">' + usjp + '</span>)</a>';
output_eur += '<a href="https://stocks.finance.yahoo.co.jp/stocks/chart/?code=EURJPY=X&ct=z&t=1m" title="EUR:JPY" target="_blank">E\\(<span id="eurjp">' + eujp + '</span>)</a>';
const element = document.getElementById('quotes');
element.innerHTML = output;
const element_eur = document.getElementById('quotes_eur');
element_eur.innerHTML = output_eur;
bitApi(usjp,bid);
});
}
////////////////////////////// ビットコイン ////////////////////////////
function bitApi(usjp,bid) {
const bidcoin = Math.floor(usjp * bid).toLocaleString();
let output = "";
output += '<a href="https://bitflyer.com/ja-jp/bitcoin-chart" title="ビットコイン円" target="_blank">B\\' + bidcoin + '</a>';
const element = document.getElementById('bit');
element.innerHTML = output;
bid = bid.toLocaleString();
let output_us = "";
output_us = ' <a href="https://bitflyer.com/ja-jp/bitcoin-chart" title="ビットコイン＄" target="_blank">B\$' + bid + '</a> ';
const element_us = document.getElementById('best_bit');
element_us.innerHTML = output_us;
}
quotesApi();
htmlにidがquotes・quotes_eur・bit・best_bit の4箇所に表示されます。リンクは好きなところにリンクさせて下さい。functionが別れてるのは以前のAPIの名残ｗ。意味ないですｗｗｗ
ミニグラフ TradingView ウィジェット
これはAPIキーもいりませんｗ。Mini Chartを選択しウィジェットを設定・ソースコードをコピペ。今回は4つのウィジェットを取得しました。
html + JavaScript
<!-- ポップアップグラフ ここから -->
<!-- USD/JPY ポップアップ -->
<!-- TradingView Widget BEGIN -->
<div id="tv-popup-usd"
style="position:absolute; display:none; z-index:1000; width:300px; height:200px; border:1px solid #333; background:#000;clear: both;">
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://jp.tradingview.com/symbols/CMCMARKETS-USDJPY/?exchange=CMCMARKETS" rel="noopener nofollow"
target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "CMCMARKETS:USDJPY",
"chartOnly": false,
"dateRange": "1M",
"noTimeScale": false,
"colorTheme": "dark",
"isTransparent": false,
"locale": "ja",
"width": "100%",
"autosize": true,
"height": "100%"
}
</script>
</div>
</div>
<!-- TradingView Widget END -->
<!-- TradingView Widget BEGIN -->
<div id="tv-popup-eur"
style="position:absolute; display:none; z-index:1000; width:300px; height:200px; border:1px solid #333; background:#000;clear: both;">
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://jp.tradingview.com/symbols/CMCMARKETS-EURJPY/?exchange=CMCMARKETS" rel="noopener nofollow"
target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "CMCMARKETS:EURJPY",
"chartOnly": false,
"dateRange": "1M",
"noTimeScale": false,
"colorTheme": "dark",
"isTransparent": true,
"locale": "ja",
"width": "100%",
"autosize": true,
"height": "100%"
}
</script>
</div>
</div>
<!-- TradingView Widget END -->
<!-- BTC/JPY ポップアップ -->
<div id="tv-popup-btcjpy"
style="position:absolute; display:none; z-index:1000; width:300px; height:200px; border:1px solid #333; background:#000;">
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://jp.tradingview.com/symbols/BINANCE-BTCJPY/?exchange=BINANCE" rel="noopener nofollow"
target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "BINANCE:BTCJPY",
"chartOnly": false,
"dateRange": "1M",
"noTimeScale": false,
"colorTheme": "dark",
"isTransparent": false,
"locale": "ja",
"width": "100%",
"autosize": true,
"height": "100%"
}
</script>
</div>
<!-- TradingView Widget END -->
</div>
<!-- BTC/USD ポップアップ -->
<div id="tv-popup-btc"
style="position:absolute; display:none; z-index:1000; width:300px; height:200px; border:1px solid #333; background:#000;">
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
<div class="tradingview-widget-copyright"><a
href="https://jp.tradingview.com/symbols/BITSTAMP-BTCUSD/?exchange=BITSTAMP" rel="noopener nofollow"
target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
<script type="text/javascript"
src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
"symbol": "BITSTAMP:BTCUSD",
"chartOnly": false,
"dateRange": "1M",
"noTimeScale": false,
"colorTheme": "dark",
"isTransparent": false,
"locale": "ja",
"width": "100%",
"autosize": true,
"height": "100%"
}
</script>
</div>
</div>
<script>
function setupPopup(linkId, popupId, offsetX = 0, offsetY = 50) {
const link = document.getElementById(linkId);
const popup = document.getElementById(popupId);
link.addEventListener('mouseenter', () => {
const rect = link.getBoundingClientRect(); // リンクの座標取得
popup.style.display = 'block';
popup.style.position = 'absolute';
popup.style.left = rect.left + window.pageXOffset + offsetX + 'px';
popup.style.top = rect.top + window.pageYOffset + offsetY + 'px';
});
link.addEventListener('mouseleave', () => {
popup.style.display = 'none';
});
}
// 設定
setupPopup('quotes', 'tv-popup-usd', -150, 70);
setupPopup('quotes_eur', 'tv-popup-eur', -150, 70);
setupPopup('bit', 'tv-popup-btcjpy', -150, 70);
setupPopup('best_bit', 'tv-popup-btc', -150, 70);
</script>
<!-- ポップアップグラフ ここまで -->
それぞれのグラフはリンクにマウスオーバーで表示するようにdivにスタイル当ててます。
余談
CurrencyFreaksは1ヶ月1000リクエストまで無料だそうです。APIキー取得もめちゃ簡単でした。取得できるレートの種類もかなり豊富なのでここだけでOK!
コメント
コメントを投稿