見出し画像

目指せ勝率アップ!! ローソク2倍表示するチャートひろび~ろなBookmarklet

やすおといいます。
購入前には、必ず無料部分を最後まで読んでください
※スタイルシートを追記して表示を調整していますので、本noteに
 記載している内容によってトレードや証拠金を操作する事はできません。

目次
・さて、さっそく本題。
・では以下、本体の説明です。
・あとがきと注意事項
・コピペソース(有料note部分)

さて、さっそく本題。

と、その前に<追記>
初めてのnoteだったので『あれこれサポートさせられたらどうしよう…』と悩んだ結果「ノーサポート」って書いていますが、分からないことがあれば聞いてくださいね。

さらに追記。

年末年始無料公開してます。
とはいえ、ソースは全部無料部分で書いているので無料感はないです。

では、本題。

普段はbitFlyer Lightningでトレードしています。
たぶんみなさんも同じような画面を使われているのではないでしょうか?

画像1

私はこんな画面でもう半年以上も使っていたのですが、
・ニュースなんて見ない
・チャットもうるさい
だけ
・約定履歴流れてるとかっこいい、でも見ていない。
・板情報も雰囲気はわかるけど、秒でかわるし・・・。

画面上に無駄なエリアが多い、いや無駄なエリアの方が多いと思うのです。

画像2

トレード下手なのに、情報少なくって勝て…ないよね…

という訳で、チャートがひろび~ろになるブックマークレットを作成!!

画像3

お気に入りボタンを押すだけで(画像はデモトレサイトです)

画像4

上画像(GIFアニメ)のようにチャート部分が広がります。


例えば、

下記のチャートは、同じ時間でチャートエリアの広さが違うだけものです。画像5

画像6

印象やひとめで得られる情報が大きく違いませんか?

これを書いているときのチャートも貼ってみます。画像7

画像8

ただチャートエリアが広いだけのことで、受ける印象が違うんですよね…。

チャート画面から得られる情報が少ない
イコール
逆のポジションを持ちかねない…。


そこで自分用のブックマークレットを作ったのですが、なにかさみしい…。
誰かに使ってもらいたい!と思い、noteで公開することにしました。
(noteを出してみたかったんだよ...。)

チャートを大きく表示させるようになり、オーダー部分の場所が余ったので、ついでに注文ボタンも大きくしました

ブックマークレットの登録方法に関しては、下記等を参考にしてください。
https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04
簡単にいうと、ブックマークのリンク先URLの欄に、javascriptを書き、実行させるものです。少しググると、たくさん情報があるはずです。


=では以下、本体の説明です。=


始めの挨拶

javascript:
(
function()
{

前準備
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');

CSSの上書き内容を記述
style.innerHTML='

約定履歴とニュースの非表示
section.market-history {display:none !important;}

チャットの非表示
section.chat {display:none !important;}

ボードの非表示
.main--top .board {display:none !important;}

チャートのバランス調整示
.main--top .chart {width:82% !important;}

損益表示やオーダーボタン部分のバランス調整示
.main--top .order {width:18% !important;} 

下部の注文・建玉・取引履歴(4件くらい)に狭くする
.wrapper--trade .main--bottom {height:24% !important; max-height:22% !important;}

下部の変更に併せて上部(チャートと注文ボタン)を大きくする
.wrapper--trade .main--top {height:76% !important; max-height:78% !important;}

デルタの非表示
.pnl__list li.pnl__funds--delta {display:none !important;}

年次損益の表示(要らないと思います)
.pnl__list .pnl__period--ytd {display:block !important;} 

月次損益の表示
.pnl__list .pnl__period--mtd {display:block !important;}

日次損益の表示
.pnl__list .pnl__period--daily {display:block !important;}

売り買いボタンを横幅いっぱいにして縦に並べる
.order .button-group.place__buysell label {width: 100% !important;}

売り買いボタンを丸くする
.order .place__buysell .button-group-item {border-radius: 5px !important;} 

売り買いボタンを少し離す(縦に並べない場合はこれも不要)
.order .place__button--buy {margin-top:6px !important;}

売り買いボタンを縦に大きくする
.order .button-group-item {padding: 0.9em .25em !important;}';

CSSを適用
head[0].appendChild(style);

終わりの言葉
}
)
();

以上です。


=あとがきと注意事項=

有料noteではありますが、上記を結合すると完成です。
有料部分にはそのまま張り付けられるソースがあります。
Stylus用の貼り付けソースも用意しました。
また、Safariでは%で幅や高さを変更することが(技術的に未熟なため)
できなかったので、固定値で対応したソースも置いてあります。

無料部分で全て説明しておりますので、サポートはありません
OSやブラウザによる表示崩れなども予想されますが、基本的にかんたんなHTMLの知識があれば調整できると思います。
自由にカスタマイズして、ご利用ください。

ブックマークレットに関するサポートも行いません。
簡単なサンプルを用意いたしましたので、このサンプルをご自分で導入出来ない方は購入をお控えください。

javascript:(function(){window.alert('Hello!World');})();

※ブックマークレットですので、リロードしたら元に戻ります。
※本noteでは無料部分に方法をすべて記載しています。
 有料部分はあくまで、支援と購入者様の導入時間短縮が目的であり、
 全てのPC環境、OS、ブラウザ、バージョンに対応できるものでは
 ありません。細かな調整は購入者様でお願いします。
※もちろんPCしか対象としていません。

プログラムが分からない方でも15分くらいで使えるとは思います。
本note役に立ったという場合には、ぜひご購入・ご支援ください。

もし売り上げが出たら、botを動かす原資として市場に還元していきます。
みなさまのご購入・ご支援をお待ちしています。

以下、有料部分となります。


=コピペソース(有料note部分)=

ご購入、ご支援ありがとうございます。
※簡単なものではありますが、他への転載や転売はご遠慮ください。
※友人などと共有していただいても問題ありませんので、不明点などは
 ご自身で解決していただければと思います。

■ 説明付き全文

javascript:
(
function()
{
/* 前準備*/
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');

/* CSSの上書き内容を記述*/
style.innerHTML='
section.market-history {display:none !important;} /* 約定履歴とニュースの非表示 */
section.chat {display:none !important;} /* チャットの非表示 */
.main--top .board {display:none !important;} /* ボードの非表示 */

.main--top .chart {width:82% !important;} /* チャートのバランス調整示 */
.main--top .order {width:18% !important;} /* オーダーのバランス調整示 */

.wrapper--trade .main--bottom {height:24% !important; max-height:24% !important;} /* 下部の注文・建玉・取引履歴を狭くする。4件くらい */
.wrapper--trade .main--top {height:76% !important; max-height:76% !important;} /* 下部の変更に併せて上部(チャートと注文ボタン)を大きくする */

.pnl__list li.pnl__funds--delta {display:none !important;} /* デルタの非表示 */
.pnl__list .pnl__period--mtd {display:block !important;} /* 月次損益の表示 */
.pnl__list .pnl__period--daily {display:block !important;} /* 日次損益の表示 */

.order .button-group.place__buysell label {width: 100% !important;} /* 売り買いボタンを横幅いっぱいにする */
.order .place__buysell .button-group-item {border-radius: 5px !important;} /* 売り買いボタンを丸くする */
.order .place__button--buy {margin-top:6px !important;} /* 売り買いボタンを少し離す */
.order .button-group-item {padding: 0.9em .25em !important;} /* 売り買いボタンを縦に大きくする */

';

/* CSSを適用*/
head[0].appendChild(style);
}
)
();


■ コピペ用通常版

javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='section.market-history {display:none !important;} section.chat {display:none !important;} .main--top .board {display:none !important;} .main--top .chart {width:82% !important;} .main--top .order {width:18% !important;} .wrapper--trade .main--bottom {height:24% !important; max-height:24% !important;} .wrapper--trade .main--top {height:76% !important; max-height:76% !important;} .pnl__list li.pnl__funds--delta {display:none !important;} .pnl__list .pnl__period--mtd {display:block !important;} .pnl__list .pnl__period--daily {display:block !important;} .order .button-group.place__buysell label {width: 100% !important;} .order .place__buysell .button-group-item {border-radius: 5px !important;} .order .place__button--buy {margin-top:6px !important;} .order .button-group-item {padding: 0.9em .25em !important;}';head[0].appendChild(style);})();


■コピペ用Safari版(ウインドウの分割が固定値です)

javascript:(function(){var style=document.createElement('style');var head=document.getElementsByTagName('head');style.setAttribute('type','text\/css');style.innerHTML='section.market-history {display:none !important;}section.chat {display:none !important;}.main--top .board {display:none !important;}.main--top .order {width:240px !important;}.main--top .chart {width:auto !important;}.wrapper--trade .main--bottom {height:160px !important; max-height:160px !important; bottom: 0 !important; position: sticky !important; position: -webkit-sticky !important;} .wrapper--trade .main--top {height:inherit !important; max-height:inherit !important; padding-bottom: 160px !important;} .pnl__list li.pnl__funds--delta {display:none !important;}.pnl__list .pnl__period--mtd {display:none !important;}.pnl__list .pnl__period--mtd {display:block !important;}.pnl__list .pnl__period--daily {display:block !important;}.order .button-group.place__buysell label {width: 220px !important;}.order .place__buysell .button-group-item {border-radius: 5px !important;}.order .place__button--buy {margin-top:6px !important;}.order .button-group-item {padding: 0.9em .25em !important;}';head[0].appendChild(style);})();


■Safari版変更点(コメントが入ると動作しません)
 カスタマイズの際に参考にしてください。

右側のオーダー部分の幅を固定値にしました
.main--top .order {width:240px !important;}

左側のチャート部分の幅を自動幅にしました
.main--top .chart {width:auto !important;}

下部の注文と約定部分の高さを固定値で、ポジションをstickyにしました。
.wrapper--trade .main--bottom {height:160px !important; max-height:160px !important; bottom: 0 !important; position: sticky !important; position: -webkit-sticky !important;} 

上部チャートと注文部分の高さから下部の高さを差し引きました
.wrapper--trade .main--top {height:inherit !important; max-height:inherit !important; padding-bottom: 160px !important;
} 

オーダーボタンの横幅を固定値にしました
.order .button-group.place__buysell label {width: 220px !important;}


■Stylus追加版

section.market-history {display:none !important;} /* 約定履歴とニュースの非表示 */
section.chat {display:none !important;} /* チャットの非表示 */
.main--top .board {display:none !important;} /* ボードの非表示 */

.main--top .chart {width:82% !important;} /* チャートのバランス調整示 */
.main--top .order {width:18% !important;} /* オーダーのバランス調整示 */

.wrapper--trade .main--bottom {height:24% !important; max-height:24% !important;} /* 下部の注文・建玉・取引履歴を狭くする。4件くらい */
.wrapper--trade .main--top {height:76% !important; max-height:76% !important;} /* 下部の変更に併せて上部(チャートと注文ボタン)を大きくする */

.pnl__list li.pnl__funds--delta {display:none !important;} /* デルタの非表示 */
.pnl__list .pnl__period--mtd {display:block !important;} /* 月次損益の表示 */
.pnl__list .pnl__period--daily {display:block !important;} /* 日次損益の表示 */

.order .button-group.place__buysell label {width: 100% !important;} /* 売り買いボタンを横幅いっぱいにする */
.order .place__buysell .button-group-item {border-radius: 5px !important;} /* 売り買いボタンを丸くする */
.order .place__button--buy {margin-top:6px !important;} /* 売り買いボタンを少し離す */
.order .button-group-item {padding: 0.9em .25em !important;} /* 売り買いボタンを縦に大きくする */

■小ネタ
Lightning遅いな…と思われる方は、HiDPI/Retina のチェックは外して、Power Save のチェックを入れるのを試してみてください。

画像9

以上です。
ありがとうございました。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

良いと思っていただければ投げ銭をお願いします

36
ノンプログラマー。bot勉強中。 初心者のつまづきポイントをフォローしてbot資金にしたいと考えています。 かんたんなことで1日以上ハマるなら、500円で解決出来たらほうがお互いハッピーという思考。

こちらでもピックアップされています

BOT関連NOTE
BOT関連NOTE
  • 91本

AKAGAMIさんのドテン君を中心にBOT関連のNOTEをまとめてます^^

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。