暗号通貨ダッシュボードを自作する方法

暗号通貨に投資している場合、htmlとcssだけで簡単に自分だけの暗号ダッシュボードを構築することができます...

フォーク、詐欺、アルトコインを採掘するためにCPUを盗むウェブサイト、乱高下する価格などの話題で、暗号通貨（cryptocurrences、略して「クリプト」）は確実に主流になりつつあるようです。

暗号通貨に投資している、または購入を検討している場合、その価格をリアルタイムで監視する方法が必要です。幸いなことに、HTMLとCSSだけで簡単に暗号ダッシュボードを構築することができます。

注：暗号通貨の購入は非常に投機的な投資です。決して余裕のある金額以上を投資せず、一晩で失うことを覚悟してください。

はじめに

このダッシュボードはcoinmarketcap.comが提供する無料のウィジェットを使用しています。この優れたウェブサイトでは、何千もの暗号通貨の統計と現在の価格が表示されます。まず、ご希望の通貨を選択するか、右上の検索ツールにコインを入力してください。

選択すると、コインの概要ページが表示され、選択したコインに関する様々な統計、チャート、分析が表示されます。ツール」タブに移動します。ここでは、選択したコインに関する特定のデータを表示する既製のウィジェットが表示されます。Customizethiswidgetの設定を自由に試してみてください。ただし、当面は基本的なウィジェットで十分です。ウェブサイトのウィジェットボックスからコードをコピーするか、後で使用するためにページを開いたままにしてください。

ビットコインで利用できるウィジェットコードは以下の通りです。

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD"></div>

ビットコイン、イーサ、リップル、ドージコイン、その他1000種類以上のオプショナルコイン（アルトコイン）のどれを選んでも、やり方は全く同じです：コインを探してウィジェットコードをコピーしてください。

自動化したい場合は、API TickerやCronなどのスケジューリングツールを使って、ほぼすべてのアクションを実行することができます。この記事の範囲を少し超えてしまいますが、例えば価格がある閾値より下がったらメールアラートを作成することができます。

ウェブページを作成する

ウィジェットができたので、それを表示するための基本的なHTMLページを作成する必要があります。お気に入りのテキストエディタで、dashboard.htmlというページを作成します。

必要なスタートアップコードは以下の通りです。

<!doctype html>
<html>
<head>
<タイトル>Crypto Dashboard</title
</head>になります。
<body
</body>。
</html>。

HTMLウィジェットのコードをbodyタグの間に貼り付けます。ビットコインに話を戻すと、全体のコードはこのようになります。

<!doctype html>
<html>
<head>
<タイトル>Crypto Dashboard</title
</head>になります。
<body
<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script>.
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD"></div>
</body>。
</html>。

暗号通貨ダッシュボードの作成は、とても簡単です。

美しく仕上げる

このダッシュボードは技術的には完成度が高いのですが、あまり良いものではありません。ウィジェットは水平方向には画面いっぱいに表示されますが、垂直方向にはあまり高く表示されません。CSS（Cascading Style Sheets）を使ってスタイルを設定しよう。

タイトルの下に、スタイルマークを追加します。

<style>
</style>。

これらのスタイルタグには、CSSを記述することができます。

.coinmarketcap-currency-widget {
幅：33％。
margin: 100px auto;
}

このシンプルなCSSは、2つのことを行っています。Document Object Model（DOM）を使って、coinmarketcapの通貨ウィジェットクラスをターゲットにしています。このクラスはウィジェットのメインコンテナなので、このコマンドはその特定の要素に次のスタイルを適用するようウェブブラウザに指示します。

ウィジェットの幅は33%に設定されており、デフォルトのオプション（この場合は100%）を保持しても、引き伸ばされたように見えることはもうありません。

最後に、上下に100ピクセルの余白をつけ、左右は自動余白にします。これにより、ウィジェットはブラウザの上部から遠ざかり、水平方向の中央に配置されます。

このウィジェットのスタイルは、ほぼ無限に広がります。赤い文字や青い背景がお好みかもしれませんね。文字を点滅させるのはどうでしょうか？空は本当に無限大です。

コインを追加する

基本を押さえたところで、いよいよコインを増やしていきます。たとえ1枚のコインしか持っていなくても、ダッシュボードを分散させることにはいくつかの利点があります。

ゆるやかなルールとして（暗号通貨の西部では何が起こるかわからないが）、ビットコインが下がるとアルトコインが上がる。ただし、ビットコインが絶対に下がると、他のすべてが一緒に下がる。

他の通貨を監視することで、ある通貨から別の通貨に資金が流出していることが通常はっきりとわかります。新しいコインを買いたい場合、ダッシュボードに追加することで、トレンドや日々の安値を発見し、掘り出し物を買うことができるかもしれません。

上記の手順で、追跡したい他の通貨のウィジェットコードを取得することができます。以下のように、ビットコイントラッカーの下に貼り付けるだけです。

<script type="text/javascript" src="https://files.coinmarketcap.com/static/widget/currency.js"></script>
<div class="coinmarketcap-currency-widget" data-currency="bitcoin" data-base="USD" data-secondary="BTC"></div
<div class="coinmarketcap-currency-widget" data-currency="ethereum" data-base="USD" data-secondary="BTC"></div
<div class="coinmarketcap-currency-widget" data-currency="ripple" data-base="USD" data-secondary="BTC"></div
<div class="coinmarketcap-currency-widget" data-currency="cardano" data-base="USD" data-secondary="BTC"></div

ウィジェットごとにcurrency.jsが必要なわけではありません。

ダッシュボードを再読み込みしてみると、あまり良くないことがわかります。すべてのコインが縦に積み上げられ、その間に大きな隙間ができていますこれらのウィジェットをマルチコイン用に見栄えよくするためには、CSSを変更する必要があります。

各ウィジェットコンテナの幅と余白を調整することで、以下のように複数のウィジェットを水平に配置することができます。

width: 23%;
margin: 10px 1%;
float: left;

同じCSSを使えば、ウィジェットをいくつでも積み重ねることができます。ただし、ウィジェットが12個くらいになったら、少し修正する必要があるかもしれません。

最後に、ダッシュボードを自動的にリロードすることで、常に最新の価格を確認することができます。

ドキュメント上部のヘッダータブの中に、このメタタグを貼り付けます。

<meta http-equiv="refresh" content="60">。

これは、X秒ごとにページを更新します。Xはコンテンツで指定します。上記のコードでは、60秒ごとにページが更新されます。数秒以内に入力すればよいので、お好みで変更してください。

正気を保つ

暗号通貨ダッシュボードが完成したので、coinmarketcap.comやcoinbase.comのウェブサイトなど、購入したものをモニターするためのウェブサイトをチェックする必要はもうありません。1分ごとに価格をチェックして、自分を追い込まないようにしましょう。

パソコンで動かすのはもちろん、Raspberry Piにセットして廊下を走らせることもできますよ。

移動中に価格を確認したい場合は、最高の暗号通貨Androidアプリのガイドをチェックしてください。また、暗号通貨を購入する前に知っておく必要があるすべての情報のガイドを読むことを忘れないでください。

パスワードダッシュボードを作成したことがありますか？

2021-03-12 02:21 に公開
閲覧 ( 37 )
分類：プログラミング