この記事を読む目安時間：約4,800文字 10分
自動売買でも「見る画面（GUI）」って重要だよね、という話です。
自動売買のシステム自体はPCの裏側で動いているので、ターミナルやDiscord（Hermes Agent経由）で株価や状況確認が可能です。しかし、いま相場がどうなっているのか、どの銘柄が動いているのかは、やっぱり自分の目で見たいですよね。個人的にチャートやスクリーナーを見ているときはやる気にもなりテンションが上がります。ただ、チャートをイチから自分で描くのは大変。。。
そこで頼ったのが、TradingViewが無料で配布している「ウィジェット」です。
結論から言うと、無料プランのまま、ここまでの管理画面が作れました。
使いたいウィジェットを探して、AIエージェントに「これを入れて」と頼んで、画面を見ながら自分好みに手直ししていく。
それを繰り返すだけで、本家TradingViewの様な見た目と使い勝手が構築されていきます。（本物だもん、そりゃそうだw）
システム全体の仕組みなどは、こちらの記事にまとめています。
TradingViewのウィジェットって何?
TradingViewは、世界中の投資家が使っているチャートのサービスです。そのTradingViewが、自分のサイトやアプリに貼り付けられる部品として配っているのがウィジェットです。
表示したいウィジェットを選択して、好みの設定で貼り付け用のコードを作成します。それを自分の画面に貼るだけで、TradingViewのチャートやニュースがそのまま表示されます。データはTradingView側が用意してくれるので、自分で株価を集める必要もありません。
一部英語のみのウィジェットもありますが、主要なものは日本語にも対応しています。
無料で使用できますが、ウィジェットに付いているTradingViewのロゴやリンクを、元の形のまま残しておくことが条件のようです。詳しくは公式サイトもご覧ください。
使っているウィジェット
今の管理画面には、TradingViewのウィジェットが10種類(タイルにして11枚)入っています。
ここからは、実際の管理画面からよく見るものをピックアップして紹介します。
チャート(Advanced Chart)
銘柄を切り替えながら、ローソク足や移動平均線を確認しています。好みに合わせてオプション機能の表示/非表示の切り替えも可能です。インジケーターの種類が豊富で、どれにするか迷ってしまうのですが、ウィジェットでは上限2個までの表示となっているのでご注意ください。
銘柄の概要(Symbol Overview)
いま見ている銘柄の株価と、1日〜1年の値動きをコンパクトに表示します。チャートほど細かくなくていいときに便利です。
ヒートマップ(Stock Heatmap)
S&P500の銘柄が、時価総額の大きさと値動きの色で一覧になります。今日どの業種が強いのかが一目でわかります。俯瞰して業種・業界の動きを見たいときに便利ですね！
テクニカル分析(Technical Analysis)
複数の指標をまとめて「買い寄り」「売り寄り」のように表示してくれます。気になる銘柄を設定して目に入るようにしています。
スクリーナー・経済カレンダー・ニュース
スクリーナーで条件に合う銘柄を探し、経済カレンダーで重要な発表の日程を確認し、ニュース(Top Stories)で市場全体の話題を追っています。
ほかにも、複数銘柄の株価一覧(Market Quotes)、流れる株価表示(Ticker)、銘柄情報(Symbol Info)も入っています。Market Quotesは、株・暗号資産・指数に分けた「市場のまとめ」用にもう1枚置いています。
これとは別に、moomooから取ったデータで描くチャートも1枚あります。こちらはTradingViewが公開している「Lightweight Charts」というオープンソースの部品を使っています。
AIエージェントへの頼み方
作るときに主に使ったのは、Hermes AgentとClaude Codeです。システム全体では、これにCodexを加えた3つのエージェントを用途によって使い分けています。
AIエージェントへの頼み方はシンプルで、公式のウィジェットページのURL(と貼り付け用のコード)を「これを入れて」とお願いします。出来上がったページをブラウザで確認して、気になったところを短く指摘する、この繰り返しです。
リアルに最初に依頼したのはこんな感じでした。
GUIをダークモードにして、下記のチャートとウィジットを導入できますか?
この一文に、TradingViewのウィジェットのページのURL(と貼り付け用のコード)を添えただけです。画面ができてきたら、見た目の注文を出します。
TradingViewチャートとLightweight Chartは別々のタイルにしてほしい。
うまく表示されないときも、見たままを伝えます。
TradingView参考評価が表示されないのと、ダークモードになっていない。
細かい技術の言葉はいりません。「どう見えていて、どうしたいか」が伝われば、原因はAIが調べてくれます。会話が長くなったときは、AIに引き継ぎのメモを書かせて、新しい会話の最初に読ませてから続けていました。
実際にハマったこと
AIに頼めば一発で完成！！そう上手くはいかなかったので、実際にハマったところを紹介します。
1. 銘柄コードの書き方が違う
moomooでは銘柄を US.PLTR のように書きますが、TradingViewでは PLTR や NASDAQ:PLTR です。US. を付けたまま渡すと、一部のウィジェットで「存在しません」と表示されました。銘柄と市場を別々に入力する形に変えて、TradingViewには銘柄コードだけを渡すようにしています。
2. 「読み込み中」の文字が消えない
読み込み中に出す「TradingView応答待ちです…」という表示が、チャートが出た後も残っていました。そのせいで、TradingViewが2つ並んでいるように見えていたんです。チャートの枠が表示されたことを検知して、文字を消すようにしました。
3. ダークにならない、中身が出ない
一部のウィジェットだけ背景が白いまま、ニュースは中身が空っぽ、という状態がありました。暗い背景の指定に加えて、背景色をはっきり固定することで解決。ニュースは銘柄を指定すると空になりやすかったので、市場全体のニュースに切り替えました。
4. ヒートマップの赤と緑を入れ替えたい
日本では値上がりを赤で表すことが多いので、ヒートマップもそうしたかったのですが、ウィジェットにその設定がありません。ウィジェットの中身はTradingViewのサイトから読み込まれているので、こちらから手を入れることもできない。結局、ウィジェットの枠ごと色のフィルターをかけて、赤と緑を入れ替えるという力技で対応しました。
Stock Heatmapの赤と緑を反転できないの?
その時も、上記の一言から、対応策を見つけてここまでやってくれました。
5. 日本株はウィジェットで表示できない
日本株を表示しようとすると、チャートの代わりに「このシンボルはTradingView上でのみ利用可能です」という通知が出ました。東証の銘柄は、埋め込みのウィジェットでは表示できず、TradingViewのサイト上でしか見られないようです。
今回は米国株専用にしたので問題ないですが、日本株を対象にする場合は注意が必要です。
6. テーマを切り替えても、ウィジェットの色が変わらない
最近、画面を白と黒で切り替えられるようにしたのですが、ウィジェットの色だけが変わりませんでした。ウィジェットの中までは、こちらの画面の色指定が届かないためです。テーマを切り替えたら、ウィジェットを作り直す方式にしました。
7. 画面全体が動かなくなる(これはウィジェットのせいではない)
ある日突然、タイルのドラッグも高さの調整もウィジェットの読み込みも、全部止まりました。原因は、AIが書いたプログラムの中の、引用符の書き方の崩れ。たった1か所の文法エラーで、画面の動き全体が止まっていました。それ以降は、AIが書いたコードを動かす前に、文法のチェックを必ず通すようにしています。
いちばん大事な線引き:チャートは「見るだけ」
この管理画面で、最初から決めていたことがあります。TradingViewは表示専用。売買の判断には一切使わない、という線引きです。
AIに渡した仕様書で、次の3つを禁止していました。
- ウィジェットの中身を読み取ること
- TradingViewの指標の値を、売買の判断に使うこと
- ウィジェットに表示されたニュースを、AIに読ませること
理由は3つあります。
1つ目は、ウィジェットはあくまで「表示するための部品」だからです。TradingViewの規約でも、データは「表示専用」とされていて、自動売買などに使うことははっきり禁止されています。実際、ウィジェットの中身は自分の画面からは触れない作りになっていて、スクリーナーで選んだ銘柄を、こちらで受け取ることもできません(ウォッチリストへの追加は、手で入力する方式にしています)。
2つ目は、表示される株価に遅れがあるものもあるからです。銘柄の概要などには、遅延していることを示す表示が出ています。見る分には十分ですが、売買の判断に使うには向きません。
3つ目は、判断を一か所にまとめておきたいからです。売買の判断は、moomooから取ったデータと自前のルールで行っています。判断材料が一か所にあれば、「なぜこのタイミングで買ったのか」を後から必ず説明できます。
見るのはTradingView、判断は自前という分け方にしています。
表示専用なら本家のTradingViewアプリを使えばよかったのに、という意見も聞こえてきそうですが、
AIと自分専用のトレーディングコンソールとして、一つの画面にまとめて表示できることにロマンがあるので、そこはご勘弁くださいw
無料プランでどこまでできる?
ここまでの管理画面は、すべてTradingViewの無料プランのままで作っています。ウィジェットの埋め込みは無料ですし、TradingViewのサイトでチャートを見るのも、無料プランで十分です。
有料プランが必要になるのは、たとえばTradingViewで作ったアラートを、自分のシステムに直接送りたいときです。この仕組み(webhook)は有料プラン限定で、無料プランでは使えません。
私のシステムは売買の判断を自前で行っているので、今のところ無料プランで困っていません。将来、TradingViewのアラートとシステムをつなぎたくなったら、有料プランを検討するつもりです。
TradingViewをまだ使ったことがない方は、まずは無料プランで、チャートやヒートマップを触ってみるところから始めてみてください。
まとめ
- TradingViewの無料ウィジェットを使えば、自作のシステムにも本格的な管理画面が作れる
- AIエージェントには、公式ページのURL(と貼り付け用のコード)を貼って、見たままを伝えるだけでいい
- ただし、ウィジェットは「見るだけ」。売買の判断は自前のデータとルールで
チャートを自分で描くのは大変ですが、見せ方はTradingViewに任せて、自分は中身のシステムづくりに集中する。こんな感じでAIと一緒に自分専用のトレーディングコンソールを構築してみてはいかがでしょうか？
それではまた。
出典：チャートとウィジェット TradingView
※本記事は個人の開発記録であり、特定の金融商品の売買や投資行動を推奨するものではありません。投資の最終判断はご自身の責任でお願いします。
コメント