FX Monitor Pro の作り方 — Flet で主要10通貨ペアを常時モニターするデスクトップ為替アプリ

アプリの作り方

FX Monitor Pro の作り方 — Flet で主要10通貨ペアを常時モニターするデスクトップ為替アプリ

為替を確認するたびに、ブラウザを開いて検索して、目当ての通貨ペアを探す。1日に何度もやると、この数秒がじわじわ効いてくる。欲しいのは、デスクトップの隅に自分の見たい通貨ペアだけが常に並んでいて、数字が勝手に更新される小さなパネルだった。そこで、主要10通貨ペアを3秒ごとに取りにいって2列で並べる為替モニターを、Python の Flet で作った。名前は FX Monitor Pro。円とのレート、簡易チャート、そして「10,000円は今いくらのドルか」をその場で両方向に換算する電卓まで、1画面に詰めてある。この記事では、実際に動かした画面と作り方を、うまくいった所も無料APIの限界も含めて正直に見せる。

目次
  1. このガイドで作るもの
  2. 10通貨ペアを一度に:カード1枚に必要な数字を詰める
  3. 円⇄外貨を、その場で両方向に換算する
  4. 作り方の要点:単一ファイルの Flet と、3秒ポーリング
  5. 実際に動かして見えたこと(無料APIの現実)
  6. 正直なまとめ

このガイドで作るもの

作るのは、USD/JPY・EUR/JPY をはじめ主要10通貨ペアを常時モニターするデスクトップアプリだ。上に換算エリア、その下に通貨ペアのカードが2列で並ぶ。画面は Python だけで書ける GUI フレームワーク Flet(Flutter ベース)で組み、ダークのサイバー調をデフォルトにした。下が実際に動かして撮った画面で、数字はすべて撮影時のライブレートだ。

FX Monitor Pro のメイン画面。上部に換算カード(外貨→円モード・金額100)、その下に USD/JPY 162.390、EUR/JPY 185.222、GBP/JPY 217.669 など10通貨ペアのカードが色分けされた2列グリッドで並び、各カードに価格・Bid/Ask・簡易チャート・「100$ ⇒ 16,239円」の換算結果が表示されている
メイン画面。10通貨ペアが色分けカードで2列に並ぶ。各カードに価格・簡易チャート・換算結果が入り、下の「更新 00:06:25」の時刻が3秒ごとに進む。撮影時は 1ドル=162.390円だった。

設計で狙ったのは「開いた瞬間に、自分の通貨だけが最新の数字で並んでいる」状態だ。全部を1画面に収め、スクロールなしで主要ペアが視界に入るように、カードは大きめの価格表示にした。

10通貨ペアを一度に:カード1枚に必要な数字を詰める

通貨ペアのカードには、ひと目で判断するのに要る数字だけを載せた。上段が大きな現在価格と前日比の矢印、その下に Bid/Ask、さらに下に日中の高値・安値。右側には直近30回ぶんの値動きを棒グラフにした簡易チャートと、換算結果が入る。

FX Monitor Pro 上部のクローズアップ。ヘッダー、換算カード(換算・外貨→円/円→外貨の切替・金額100・スライダー)、USD/JPY と EUR/JPY と GBP/JPY と AUD/JPY のカードが拡大表示され、価格・Bid/Ask・簡易チャートの棒・換算結果が読み取れる
上部の拡大。ヘッダーの右にテーマ切替、換算カードに金額入力とスライダー。各ペアカードは USD が青、EUR が緑、GBP が紫…と色分けして、視線で区別しやすくした。右下の細い棒が値動きの簡易チャート。

色分けは意図的だ。10枚を白いカードで並べると、どれがどの通貨か毎回ラベルを読む羽目になる。ペアごとに固定の色を割り当てておくと、位置と色で「左上が青のドル」と体が覚える。数字を読む前に、見たいカードへ視線が飛ぶ。

上げ下げも色で分かるようにした。前日比がプラスなら価格の右に緑の「▲」、マイナスなら赤の「▼」が付き、簡易チャートの棒もそれに合わせて緑か赤に染まる。前日終値が取れているときは、この矢印とパーセントで「今日はどっちに動いたか」が一目で読める。数字を1つずつ追わなくても、画面全体の色の傾きで相場の空気が掴める、というのが2列に並べた狙いだった。

円⇄外貨を、その場で両方向に換算する

モニターに換算電卓を同居させたのは、レートを見た次にやることがだいたい換算だからだ。上の換算カードで金額を入れると、全カードの換算結果が一斉に切り替わる。「外貨→円」と「円→外貨」はワンタップで反転できる。下は「円→外貨」に切り替えて 10,000 円を入れた状態で、各カードが「10,000円 ⇒ 61.58$」「10,000円 ⇒ 53.99€」と同時に答える。

円→外貨モードの画面。換算カードで「円」側が選択され金額10000、各通貨ペアカードの換算結果が「10,000円 ⇒ 61.58$」「10,000円 ⇒ 53.99€」「10,000円 ⇒ 45.94£」「10,000円 ⇒ 88.19A$」などに一斉に変わっている
「円→外貨」モード。金額を10,000円にすると、10通貨ぶんの換算が同時に出る。「1万円が今いくらのドルか」を、10通貨まとめて即座に見られる。金額スライダーは外貨側で10万・円側で1000万まで自動で上限が変わる。

換算の内部では、Bid/Ask が取れているときは方向に応じて売値・買値を使い分ける。円へ替えるなら Bid、外貨を買うなら Ask、という具合だ。取れないときは仲値で計算する。実務の両替に近い感覚で、10通貨を横並びで比べられる。

作り方の要点:単一ファイルの Flet と、3秒ポーリング

本体は fx.py 一枚だ。監視する通貨ペアは、シンボルと表示名と通貨記号を組にした PAIRS という一つのリストにまとめてある。ここに1行足せば監視対象が増える設計にした。UI 部品(価格テキスト・チャート・換算欄)はこのリストから内包表記で一気に生成しているので、11通貨目を足したくなってもリストを1行編集するだけで済む。

レート取得は httpx の非同期クライアントで行う。Flet の page.run_task にポーリングのループを載せ、3秒ごとに全ペアをまとめて1回のリクエストで取ってくる。取得のたびに価格・前日比・チャートを描き直し、フッターの更新時刻を書き換える。UI を止めないために取得を別タスクに逃がしてあるので、通信が数百ミリ秒かかっても画面はカクつかない。簡易チャートは、各ペアの直近30個の価格を deque に貯めて棒の高さに変換しているだけで、外部のチャートライブラリは使っていない。

データ元は Yahoo Finance の為替クォート(APIキー不要)にした。もし Yahoo が価格を返さないときのために、Frankfurter という無料の為替APIをフォールバックに置いてある。配布は PyInstaller の fx.spec で単一 exe に固めていて、Python が入っていないPCでも fx.exe をダブルクリックすれば動く。Flet は Python だけで Flutter 品質の画面が出るので、グラデーションのカードやスライダーのような「それっぽい見た目」を CSS 抜きで書けたのが大きかった。

実際に動かして見えたこと(無料APIの現実)

スクリーンショットの数字は、撮影時の本物のライブレートだ。USD/JPY 162.390、GBP/JPY 217.669。3秒ごとに更新される感覚は、狙いどおり「開きっぱなしにしておく道具」になった。

正直に書くと、無料・非公式のデータ元には限界もある。撮影時の Yahoo のレスポンスは価格こそ返すものの、Bid/Ask・日中高安・前日終値が空だった。画面では Bid と Ask が同じ値に並び、高安の欄は空、前日比の矢印も出ていない。アプリはこの欠けを想定していて、取れない項目は仕様どおり空欄のまま表示し、価格と換算とチャートで機能を保つように作ってある。欠けた数字があっても動き続ける。ここは設計で救われた部分だ。例えば早朝や週末で市場が薄いときほど、返ってこない項目が増える。そういう時間帯に「アプリが固まった」と勘違いしないよう、欠損はそのまま空欄で見せ、価格だけは更新し続ける方針にした。

他にも、頼っている Yahoo のエンドポイントは公式に公開されたものではないので、いつ仕様が変わって取れなくなってもおかしくない。取得は Yahoo の利用規約の範囲で各自の責任において行い、個人利用に留めてデータの再配布や商用転用はしないこと。取得間隔を3秒にしたのも、短くしすぎて先方に弾かれるのを避けたい気持ちからで、体感の即時性と負荷のバランスでこの数字に落ち着いた。簡易チャートはメモリ上の30点だけで、アプリを閉じれば消える。起動してからの短い値動きを掴むための、その場かぎりの折れ線と割り切っている。監視できるのも「対円」の10ペアに限っている。個人が自分のデスクトップに常駐させる道具としては十分だが、業務の相場ツールとして売るには、この辺りを有料の正規データに差し替える必要がある。単一 exe は約11MBに収まり、USB に入れて別のPCへ持ち運んでも同じ画面がすぐ立ち上がった。

常に見えている、というだけで、為替との距離は少し縮む。

正直なまとめ

為替モニターは探せばいくらでもある。それでも自作した理由は、私は「見たい10通貨だけを、自分の画面の定位置に、換算電卓ごと置いておきたかった」からだ。既製サービスを毎回開いて目的のペアを探すより、起動しっぱなしの自作パネルに視線を送るほうが速い。使った道具は Python と Flet と httpx だけ。監視ペアはリスト1行、取得は3秒ポーリング、配布は単一 exe。データ元の限界は正規APIへの差し替えで越えられるが、まずは無料の範囲で「常に見えている」を成立させた。次はあなたの見たい数字(株価でも天気でも)で、同じ常駐パネルを作ってみてほしい。


👉 関連: 開発実例ギャラリー:FX Monitor Proほかのアプリの作り方バイブコーディング入門

Transcription Studio の作り方 — Whisper をローカルで走らせ、エンジンを切り替えて文字起こしするTranscription Studio の作り方 — Whisper をローカルで走らせ、エンジンを切り替えて文字起こしする前のページ

都市開発シミュを作る④|4度つまずいて座標系ごと作り直した話 — 真のアイソメグリッド移行【Aurum City制作】次のページ都市開発シミュを作る④|4度つまずいて座標系ごと作り直した話 — 真のアイソメグリッド移行【Aurum City制作】

ピックアップ記事

  1. Claude Mission Control の作り方 — Tauri+Pyth…

  2. New Eden Intelligence Hub の作り方 — EVE Onl…

  3. 高精度OCRデスクトップアプリの作り方 — PaddleOCR-VLとPyIns…

  4. 競艇予想AIの作り方 — LightGBMで「当たる順位」を学習させる実装ガイド…

関連記事

  1. AIアセットでゲームマップを作る — 生成スケッチの透過切り出しからレベルセレクトまで
  2. 背景除去アプリを作る⑥|QGraphicsViewズーム・スポイト・QThread非同期・D&D一括処理【背景除去Studio制作】
  3. 都市開発シミュを作る④|4度つまずいて座標系ごと作り直した話 — 真のアイソメグリッド移行【Aurum City制作】
  4. JavaScriptでRPGを作る④|ワールドマップ・シーン遷移・セーブ(localStorage)【Archipelago Saga制作】

    アプリの作り方

    JavaScriptでRPGを作る④|ワールドマップ・シーン遷移・セーブ(localStorage)…

    ステージデータから蛇行するワールドマップを描き、クリアでロックを解放し…

  5. アプリの作り方

    Claude Codeのトークンを削るOSS 11本 — ライセンス本文まで確かめた一覧

    GitHubで「Claude Codeのトークンを削る」と名の付くリポ…

  6. 都市開発シミュを作る⑤|「面白くない」を目標・施設・イベント・音の4軸で解消【Aurum City制作】

    アプリの作り方

    都市開発シミュを作る⑤|「面白くない」を目標・施設・イベント・音の4軸で解消【Aurum City制…

    「面白くない」を4軸(目標・打ち手・変化・音)で解消する。都市ランクと…

注目

AIで、ここまで作れる

AIで作った2D RPGを、ブラウザでそのまま遊べます。その「作り方=最後まで完成させる進め方」も実例つきで公開中。

▶ ゲームを遊ぶやり方を読む

PR

お名前.com 独自ドメイン取得(PR)

独自ドメイン:お名前.com(本サイトで使用・PR)

  1. 背景除去アプリを作る④|BiRefNetをONNXでローカル推論する — モデル別前処理とDirectML→CPUフォールバック【背景除去Studio制作】

    アプリの作り方

    背景除去アプリを作る④|BiRefNetをONNXでローカル推論する — モデル…
  2. WorkSpace Explorer の作り方 — 増えた自作アプリを一画面で束ねる Electron 製の開発司令塔

    アプリの作り方

    WorkSpace Explorer の作り方 — 増えた自作アプリを一画面で束…
  3. MCP 2026-07-28 の Beta SDK — ステートレス化の破壊的変更を本番前に通す

    AI・テック動向

    MCP 2026-07-28 の Beta SDK — ステートレス化の破壊的変…
  4. Claude Sonnet 5 が Claude Code の既定モデルに — 1Mコンテキストと月コスト激減を実額で検証

    AI・テック動向

    Claude Sonnet 5 が Claude Code の既定モデルに — …
  5. AI・テック動向

    2026年8月に並ぶ5つの廃止期限 — grep 2本で自分のリポジトリを監査す…
PAGE TOP

TAG CLOUD

ドラッグで回転・クリックでそのタグの記事一覧へ