暗号通貨取引所coincheckのスプレッドを可視化するCCSpreadVisualizerを改造してデザイン崩れを解消

これもはてなブログで書いていた記事を移設した内容のものですが、少々加筆修正して再投稿します。

coincheck(コインチェック)は手数料無料ですが、実際は売買価格差(スプレッド)がcoincheckの設けとなっています。でもこのスプレッドは可視化されておらず、実際にコインを売買する画面でしか確認ができないため大変不便を感じます。そんなスプレッドを可視化してくれるすぐれものががCCSpreadVisualizerです。coincheckを使う人にはまさに必須のツールと言っても過言ではなく、すでに多くの方は利用中のことかと思います。もちろん私も便利に利用させて貰っています。

ところが、ちょっと前にcoincheckのサイトがリニューアルされたため、CCSpreadVisualizerを入れてると表示が崩れまくって見づらくなってしまったため、一時的にCCSpreadVisualizerをオフにしていました。そうこうしているうちにNEM流出があり、coincheckで取引も一時停止状態になってしまい、スプレッド表示なんかどうでも良くなってしまった日々が続いておりますが、出金も明日2月13日より再開とのことで、再びCCSpreadVisualizerが必要になる日も近いと思うので、CCSpreadVisualizer改造版について記事にまとめました。

CCSpreadVisualizer改造版の説明

まずはCCSpreadVisualizerをインストールしていないと始まりません。作者のページを参考にしてインストールを完了させてください。

hitoriblog.com

coincheckの取引画面のデフォルトの見た目

ちなみにノーマル状態でのcoincheckの取引所の画面は以下のような見た目になっています。

coincheckの取引画面の改造版の見た目

改造版を有効化した後はこんな画面になります。どこまで頑張ろうか悩みましたが、時間をかけるのも勿体ないので表示崩れを治す程度の修正を加え、加えて頭の方に表示されているお知らせ欄が非常にうざかったので、こちらも非表示にしてみました。ここは取引の画面なので、正直表示する位置は下に持ってくるとか、もうちょい考えてほしいものです。

CCSpreadVisualizer改造版のコード

修正コードはこちらです。Tampermonkeyに登録したCCSpreadVisualizerのコードを上書きして保存してください。


// ==UserScript==
// @name         CCSpreadVisualizer
// @namespace    http://hitoriblog.com/
// @version      0.2
// @description  try to take over the world!
// @author       moyashi
// @match        https://coincheck.com/ja/exchange
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

function floatFormat( number, n ) {
    var _pow = Math.pow( 10 , n );
    return Math.round( number * _pow ) / _pow;
}

var currencies = ["btc", "eth", "etc", "lsk", "fct", "xmr", "rep", "xrp", "zec", "xem", "ltc", "dash", "bch"];

$(document).ready(function(){
    $(".buy-link a").css("padding", "1px");
    $.each(currencies, function(index, elem) {
        $("[href='/ja/buys?pair=" + elem + "_jpy']").append("<div class=\"currency-rate\"> <p class=\"currency_desc ng-binding append\" style=\"width:80px; text-align:left\"><span style=\"color:green; font-weight: bold;\">買</span><span id=\"" + elem + "-buy-price\"></span></p><p class=\"currency_desc ng-binding append\" style=\"width:50px\">(<span id=\"" + elem + "-buy-difference\"></span>%)</p><p class=\"currency_desc ng-binding append\" style=\"width:100px; text-align:left\"><span style=\"color:red; font-weight: bold;\"> 売</span><span id=\"" + elem + "-sell-price\"></span></p><p class=\"currency_desc ng-binding append\">(<span id=\"" + elem + "-sell-difference\"></span>%)</p>");
    });
});


function updatePrice(currency) {
  $.getJSON("https://coincheck.com/buys/rate?amount=10&pair=" + currency + "_jpy", function getFunc(myData){
    var price = parseFloat(myData.price / 10);
    $("#" + currency + "-buy-price").text(floatFormat(price, 2));
    var org = parseFloat($("[href='/ja/buys?pair=" + currency + "_jpy'] p:contains('円')").text().replace("円", ""));
    var difference = floatFormat((price / org - 1) * 100, 2);
    $("#" + currency + "-buy-difference").text(difference);
    $.getJSON("https://coincheck.com/sells/rate?amount=10&pair=" + currency + "_jpy", function getFunc(myData){
      var price = parseFloat(myData.price / 10);
      $("#" + currency + "-sell-price").text(floatFormat(price, 2));
      var org = parseFloat($("[href='/ja/buys?pair=" + currency + "_jpy'] p:contains('円')").text().replace("円", ""));
      var difference = floatFormat((org / price - 1) * 100, 2);
      $("#" + currency + "-sell-difference").text(difference);
    });
  });
}

function update() {
    $.each(currencies, function(index, elem) {
        updatePrice(elem);
    });
}

update();

$(".ticker .box.last .value").on('DOMSubtreeModified propertychange', function() {
  update();
});

})();

Let’s enjoy!!

おすすめの取引所ランキング

ビットコインの取引手数料が驚きのマイナスはZaifだけ!

Zaifでビットコインを取引すると、手数料がかかるどころかビットコインが逆に貰えちゃいます。マイナス手数料はどこ探してもZaifだけ。登録して損はないでしょう。


世界最高峰と言われる本格的なFXトレードツールMT4が無料で使える!

世界最高峰のFXトレードツールを使ってビットコインやリップルのチャート分析が可能。エキスパートアドバイザー使って自動売買のプログラミングにチャレンジしてみよう!

仮想通貨

アルトコイン含め全ペアの取引手数料が無料なのはbitbankだけ!

XRP、ETH、BCHなどのメジャーアルトコインの取引手数料が無料、顧客資産は100%コールドウォレット管理と業界随一のセキュリティーの高さが売りのbitbank。安心感が違います。