ブログへ戻る

Trading Tools

マルチタイムフレーム分析のためのデスクトップダッシュボード

MetaTrader 5 のデータを Python、React、pywebview で見やすく整理する個人用デスクトップダッシュボード、Multi Timeframe Analysis について。

MetaTrader 5、Python、Reactでマルチタイムフレーム分析用のデスクトップダッシュボードを作る

Multi Timeframe Analysis は、個人で使うために始めたプロジェクトです。

複数のウィンドウやチャート、メモを行き来せずに、違う時間軸の情報をもう少し見やすく確認したいと思ったのがきっかけでした。自分の分析では、ひとつの時間軸だけを見るだけでは足りません。M1、M5、M15、M30 を並べて見ると、同じ相場でもかなり印象が変わります。

そこで、Windows 上で動き、PC にインストールされている MetaTrader 5 に直接接続するデスクトップダッシュボードを作ることにしました。データまわりは Python、画面は React を使い、分析中の情報を整理して見られるようにしています。

リポジトリ上では、このアプリは FX Strategies という名前になっています。目的はシンプルで、複数のシンボルを 1 つのワークスペースにまとめ、短期足の状態をコンパクトに見られるようにすることです。ターミナル内でいくつものタブを行き来する流れから少し離れたかった、という気持ちもありました。

Multi Timeframe Analysis のダッシュボード

なぜ作ったのか

最初の目的は、商用プロダクトを作ることではありませんでした。自分のために必要なものを作ることでした。

MetaTrader 5 のデータ、相場分析、自分で作るインターフェースをどう組み合わせられるかを試したかったという理由もあります。標準のターミナルだけに頼るのではなく、自分の見方に合わせた流れを作ってみたいと思っていました。

このタイプの開発は、外部システムとの連携、自動化、データ処理、UI、情報整理など、自分が好きな要素がいくつも入っています。

仕組み

アプリケーションは、Windows にインストールされた MetaTrader 5 に直接接続します。そこから Python がデータを取得し、画面で扱いやすい形に整えます。

フロントエンドは React と TypeScript で作りました。画面は pywebview を使ってデスクトップアプリとして表示しているので、ブラウザで開くページというより、インストールして使うアプリに近い感覚になります。Python 側と React 側のやり取りには pywebview の API ブリッジを使っています。Python がデータを整え、React がその情報を受け取って画面を組み立てます。

特に面白かったのは、Electron に近い体験を Python バックエンドで作る部分でした。pywebview はまだよく知らなかったので、モダンなWeb UIとローカルで動く Python の層をどうつなぐかを学ぶ良い機会にもなりました。

ローカル保存には SQLite を使っています。この用途では、外部サーバーを用意するよりも、PC の中で完結する形のほうが自然でした。選択したシンボルはローカルに保存されるので、アプリを開き直しても、前回の状態から分析を続けやすくなります。

最初のバージョンに入れたもの

最初のバージョンでは、複数シンボルの監視、M1、M5、M15、M30 の表示、時間足ごとの概要カード、ライトテーマとダークテーマの切り替えを入れました。

インジケーターや計算ロジックはこれからも変えていく予定ですが、この土台だけでも、自分が一番試したかった部分は確認できました。MetaTrader 5 から来るデータを、見やすく整理されたワークスペースに変えることです。

使用した技術

バックエンドは Python で作り、MetaTrader 5 と連携しています。画面側では React、TypeScript、Vite、Tailwind CSS、TanStack Query を使っています。デスクトップ化には pywebview、Windows の実行ファイル作成には PyInstaller を使いました。

技術選定は、やりたいことから自然に決まりました。Python はデータ処理や MetaTrader との連携に向いています。React は柔軟なUIを作りやすく、SQLite は余計な複雑さを増やさずにローカル保存を扱えます。

作って学んだこと

このプロジェクトで改めて感じたのは、難しいのはデータを取ることや画面を作ることだけではない、ということです。大事なのは、それぞれの部品をうまくつなげることでした。

MetaTrader 5、Python バックエンド、ローカル保存、React の画面が関わるアプリでは、小さな違和感がすぐに表に出ます。データの流れは分かりやすくする必要があります。画面は軽く反応してほしい。構造も、後から変更しやすい形にしておく必要があります。

UI/UX の面でも良い練習になりました。相場分析では、情報が多すぎるとかえって見づらくなります。大事なのは、必要な情報を整理して、迷わず読める状態にすることです。

次にやりたいこと

Multi Timeframe Analysis には、まだ伸ばせる部分がたくさんあります。

まず、インジケーターのパラメーターを画面から設定できるようにしたいです。そうすれば、計算をより動的に変えられ、分析スタイルに合わせやすくなります。

次に、通貨ペア同士の相関計算も追加したいと考えています。まずはロジックを確認しながら実装し、その後で画面からペアを選べるようにしたいです。

さらに先では、通貨ペアの相関やインジケーターのコンフルエンスをもとにした、自動売買ロボットも作りたいと考えています。この部分は慎重な検証とテストが必要ですが、プロジェクトの自然な発展先だと思っています。

プロジェクトのコード

プロジェクトは GitHub で公開しています:

github.com/techlcosta/Multi-Timeframe_Analysis