AIに相談しながら改善している株式投資ツールに、チャート上へ手書きで線を引ける機能を追加しました。
これまでのツールでは、移動平均線やピボット水平線のように、自動で計算できる情報をチャートへ表示していました。候補銘柄を見つけるにはそれだけでも助かります。ただ、実際にチャートを見ていると「この高値を超えられるか」「この安値を割ると怖いか」「フィボナッチで見たらどのあたりまで押しているか」を、自分の目で線として残したくなる場面があります。
今回は、AI株式投資ツールのチャートに支持線、抵抗線、トレンドライン、フィボナッチを手書きで残せるようにした改善記録です。
- チャート上に水平線を引き、支持線や抵抗線として残せるようにした
- 2点クリックでトレンドラインとフィボナッチリトレースメントを表示できるようにした
- 描いた線を銘柄別にブラウザへ保存し、リロード後も復元できるようにした
チャート判断をAIに丸投げせず、自分で線を引ける余白がほしかった
AI株式投資ツールを作っていると、つい自動判定を増やしたくなります。買い候補、リスク管理、決算前の確認、バックテスト。画面上にいろいろな情報が出るようになるほど、便利にはなっていきます。
でも、チャートを見る作業まで全部を自動化したいわけではありません。
特に支持線や抵抗線は、同じ価格帯を見ても、人によって線を置く場所が少し変わります。直近高値を重視するのか、何度も止まっている価格帯を見るのか、出来高を合わせて見るのかで、線の意味が変わるからです。
そこで今回は、AIに抵抗線や支持線を判定してもらう前に、まず自分で線を引ける機能を作ることにしました。
投資ツール全体を構築している今までの経緯は以下の記事で参照できます。
チャート上に手書きで線を描くための方針
最初にAIへ相談したのは、チャート上に手書きで線を描けるかどうかでした。私が欲しかったのは、抵抗線、支持線、フィボナッチのような補助線を、チャートを見ながら自分で置ける機能です。
既存のCandleChartには、ローソク足、出来高、移動平均線、ピボット水平線がすでに入っています。ここへ無理に描画処理を混ぜると、今ある表示やテストを壊す可能性があります。
AIにはまず、現在のチャート構成、lightweight-chartsの使い方、状態管理、テスト構成を調べてもらいました。その結果、チャート本体に直接描画ロジックを詰め込むより、SVGのレイヤーを上に重ねる方針がよさそうだと分かりました。
既存のチャート画面の上に透明なシートを置いて、そのシート側へ自分の線を書くようなイメージみたいです。
描画線は投資判断ロジックそのものではなく、画面上の補助メモです。だから最初の一歩では、フロントエンドだけで完結し、銘柄ごとにブラウザへ保存できれば十分だと考えました。
- 最初に作るのは、水平線、トレンドライン、フィボナッチの3つに絞る。
- 描画データは銘柄別に保存し、別銘柄へ切り替えたら線も切り替える。
- 投資判断の自動化ではなく、チャート確認を助ける補助機能として扱う。
手書き線はSVGを重ね、銘柄ごとにブラウザへ保存する形にした
実装方針として選んだのは、SVG overlayという形です。チャートの上にSVGを重ね、クリックした場所をチャート上の時間と価格に変換して、線として保存します。
この仕組みで難しいのは、画面上のピクセル位置と、チャート上の日付や価格を対応させる部分です。たとえば、画面の右上をクリックしただけでは、それが何月何日の何円なのかは分かりません。そこで、lightweight-chartsの座標変換APIを使い、クリック位置を時間と価格へ変換するようになっています。
描いた線は、見た目の位置ではなく「どの日付、どの価格を結んだ線か」として保存する必要があります。そうしておかないと、チャートを拡大したり横に動かしたりした瞬間に、線だけがずれてしまいます。
今回のログでは、panやzoomをしたときも再描画されるようになっています。チャートを動かしたら線も追従する状態です。これは地味ですが、実際に使う上ではかなり大事です。線を引いたあとに少し期間を広げただけで位置がずれると、もうその線を信用できなくなります。
保存先はlocalStorageになっています。キーは銘柄ごとに分け、たとえば7203.Tならその銘柄用の描画データとして保存されます。これで、ページをリロードしても同じ銘柄なら線が戻りますし、別の銘柄へ切り替えたときには、その銘柄の線に切り替えられます。
もちろん、localStorageなので別ブラウザや別端末には同期されません。スマホでも同じ線を見たい、別PCでも共有したい、という段階になればサーバー保存が必要です。ただ、最初からそこまで広げると実装範囲が大きくなります。
水平線、トレンドライン、フィボナッチを最小セットで使えるようにした
今回入れた描画ツールは3つです。水平線、トレンドライン、フィボナッチリトレースメント。どれもチャートを見るときによく使うものですが、最初の追加では欲張りすぎないようにしました。
水平線は1回クリックすると、その価格に線が引かれる形です。支持線や抵抗線として使う想定です。トレンドラインは2点をクリックして、その2点を結ぶ斜め線を引きます。フィボナッチも2点を指定すると、0、23.6、38.2、50、61.8、78.6、100%の水準が自動で表示されます。
操作は、チャート上部のボタンでツールを選び、チャート上をクリックして線を置く流れにしました。同じツールをもう一度押すと選択解除できます。描いた線はクリックで削除でき、全消去ボタンも用意しました。
ここで意識したのは、最初からプロ向けの描画ツールを作ろうとしないことです。線の色、太さ、ラベル、メモ、複製、ロック、スナップなど、追加したい機能はいくらでも出てきます。でも、最初から全部を入れると、何のために作っているのかがぼやけます。
私がまず欲しかったのは、候補銘柄を見たときに「ここを超えたら見方が変わる」「この押し目を割ると弱いかもしれない」という仮説を残せることでした。だから、ツールの数よりも、線を引き、消し、銘柄ごとに残せることを優先しました。
買いタイミングを画面で確認する流れは、以前の実装から続いています。今回の手書き線は、その表示を見ながら、自分の見立てを重ねるための追加機能です。
まとめ
今回は、AIに相談しながら改善している株式投資ツールに、チャート上へ手書きで線を引ける機能を追加しました。
これまでのツールでは、移動平均線やピボット水平線など、自動で計算できる情報を表示していました。これは候補銘柄を探すうえでは便利です。
ただ、実際にチャートを見ていると、自動表示だけでは足りない場面があります。
この高値を超えられるか。
この安値を割ると弱いのか。
フィボナッチで見ると、どこまで押しているのか。
こうした自分なりの見立てを、チャート上に直接残せるようにしたかったのが今回の目的です。
実装としては、チャートの上にSVGの透明なレイヤーを重ね、水平線、トレンドライン、フィボナッチを描けるようにしました。描いた線は銘柄ごとにブラウザへ保存されるため、リロードしても復元できます。
うまくいった点は、チャート判断をAIに丸投げせず、自分で考える余白をツールの中に残せたことです。AIが出した買い候補をそのまま信じるのではなく、自分で支持線や抵抗線を引きながら確認できるようになりました。
一方で、課題もあります。今の保存先はブラウザ内なので、別の端末では同じ線を見られません。また、線の色やメモ、ラベル、複製、ロックといった細かい機能もまだありません。
それでも、最初の実装としては十分です。
今回の追加で、AI株式投資ツールは「候補を自動で出すだけのツール」から、「自分のチャート判断も残せるツール」に少し近づきました。
