Web Lukes
📄

📈 lightweight-chartsでPolymarket価格履歴を可視化｜TradingView Proの代替を45KBで作る

公開日: 2026/4/11更新日: 2026/4/11
#Polymarket#lightweight-charts#可視化#TradingView#HTML#フロントエンド

TradingView Pro（月$30）の代わりを、45KBのJSライブラリと20行のHTMLで作ります。

Polymarketの価格履歴を、ブラウザで本物のTradingView風チャートとして表示する手順です。py-clob-client（Polymarket入門記事参照）で取得したデータをそのまま使えます。

lightweight-chartsって何？

tradingview/lightweight-charts はTradingView公式のオープンソース金融チャートライブラリです。

  • 14.8k stars / Apache-2.0
  • 45KB（gzip後）— 本家のTradingViewが使ってる重いやつじゃなくて軽量版
  • ローソク足・ライン・エリア・ヒストグラムなど金融データ向け描画が全部入り
  • CDN経由で読み込めるので、ビルドツール一切不要

普通のChart.jsやPlotlyだと「価格チャート特有の機能」（十字カーソル・スクロール・ズーム・価格ライン）を自分で実装しないといけません。lightweight-chartsはそれらが最初から入ってるのが強み。

事前準備：価格履歴を取得

py-clob-clientの環境で、max期間の価格履歴を取得して可視化しがいのあるデータにします。

Python
# 04_history_max.py
import json, requests


YES_TOKEN = "31650083965282390269113502048883725495895331661148956202621012482964650485070"


url = "https://clob.polymarket.com/prices-history"
params = {"market": YES_TOKEN, "interval": "max", "fidelity": 360}  # 6時間単位


r = requests.get(url, params=params, timeout=20)
history = r.json().get("history", [])


# lightweight-charts の line/area シリーズは {time, value} 形式
out = [{"time": int(pt["t"]), "value": float(pt["p"])} for pt in history]
out.sort(key=lambda x: x["time"])


# 重複時刻を削除（lightweight-charts は重複で怒る）
seen = set()
dedup = []
for pt in out:
    if pt["time"] not in seen:
        seen.add(pt["time"])
        dedup.append(pt)


with open("anthropic_ipo_yes_full.json", "w") as f:
    json.dump(dedup, f)


print(f"points={len(dedup)}")

私の実行結果：

Code
points=78
first={'time': 1773230448, 'value': 0.395}
last ={'time': 1775887666, 'value': 0.495}
min=0.2500  max=0.5350

78ポイント・$0.25〜$0.535のレンジ。Anthropic IPO前にAnthropicがIPOする確率が、この1ヶ月で25%〜54%の間を動いていたってことです。面白いデータ😳

⚠️ つまずきポイント：lightweight-chartsのsetData()は時刻昇順＆重複なしが必須。これを守らないとValue is nullみたいな謎エラーが出ます。上のスクリプトでsort + dedupしてるのはそのため。

HTML本体（20行で全部）

ここがクライマックス。以下のHTMLをanthropic_ipo_chart.htmlとして保存し、同じフォルダのanthropic_ipo_yes_full.jsonと一緒に置きます。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Anthropic IPO before 2027? — Polymarket Price History</title>
<style>
  body { margin: 0; padding: 20px; font-family: -apple-system, sans-serif;
         background: #0d1117; color: #e6edf3; }
  h1 { font-size: 18px; margin: 0 0 4px; }
  .sub { color: #7d8590; font-size: 13px; margin-bottom: 12px; }
  #chart { width: 100%; height: 420px; }
</style>
</head>
<body>
<h1>"Anthropic IPO before 2027?" — YES price</h1>
<div class="sub">Polymarket / clob.polymarket.com/prices-history</div>
<div id="chart"></div>


<script src="https://unpkg.com/lightweight-charts@5.0.7/dist/lightweight-charts.standalone.production.js"></script>
<script>
  const chart = LightweightCharts.createChart(document.getElementById('chart'), {
    layout: { background: { color: '#0d1117' }, textColor: '#e6edf3' },
    grid: {
      vertLines: { color: '#21262d' },
      horzLines: { color: '#21262d' },
    },
    rightPriceScale: { borderColor: '#30363d' },
    timeScale: { borderColor: '#30363d', timeVisible: true },
  });


  const series = chart.addSeries(LightweightCharts.AreaSeries, {
    lineColor: '#58a6ff',
    topColor: 'rgba(88, 166, 255, 0.35)',
    bottomColor: 'rgba(88, 166, 255, 0.05)',
    priceFormat: { type: 'price', precision: 3, minMove: 0.001 },
  });


  // 0.5（五分五分ライン）を点線で引く
  series.createPriceLine({
    price: 0.5,
    color: '#f85149',
    lineWidth: 1,
    lineStyle: LightweightCharts.LineStyle.Dashed,
    axisLabelVisible: true,
    title: 'coin flip',
  });


  fetch('anthropic_ipo_yes_full.json')
    .then(r => r.json())
    .then(data => {
      series.setData(data);
      chart.timeScale().fitContent();
    });
</script>
</body>
</html>

これだけです。bundler要らず。npm要らず。CDNから読み込むだけ。

動作確認（ローカルHTTPサーバー）

file://で直接開くとfetchがCORSで動かないので、Python標準のHTTPサーバーを使います。

Bash
cd poly_demo
python -m http.server 8765

ブラウザで http://localhost:8765/anthropic_ipo_chart.html を開くと：

  • ダークテーマのチャート
  • 青いエリア塗りでYES価格の推移
  • $0.5に赤い点線（coin flipライン）
  • 十字カーソル・ズーム・スクロール全部動く

私の環境で動作確認済みです。curlで各ファイルの配信を確認した結果：

Code
html:200  json:200  (CDN) HTTP/2 200

全部200で、lightweight-chartsのコードもcreateChart/addSeries/setDataが期待通り呼ばれています。

APIバージョンの落とし穴（v4 → v5）

重要：2025年の後半にlightweight-chartsのv5が出て、APIが変わりました。古い記事のコピペが動かないことが多いです。主な変更：

JavaScript
// ❌ v4以前の書き方（動かない）
const series = chart.addAreaSeries({ ... });


// ✅ v5の書き方（今回のコード）
const series = chart.addSeries(LightweightCharts.AreaSeries, { ... });

v5ではシリーズの種類を第1引数で指定するようになりました。addCandlestickSeries()なども同様にaddSeries(LightweightCharts.CandlestickSeries, ...)です。エラーで動かない時は、まずここを疑ってください。

ローソク足にする（発展）

「YES価格の推移をOHLCローソク足で見たい」という場合。prices-historyは中値しか返さないので、fidelityを細かくして自分でOHLC集計する必要があります：

Python
import pandas as pd


df = pd.DataFrame(history)
df["dt"] = pd.to_datetime(df["t"], unit="s")
df = df.set_index("dt")


# 1日単位でOHLC集計
ohlc = df["p"].resample("1D").ohlc().dropna()
ohlc.columns = ["open", "high", "low", "close"]
ohlc["time"] = (ohlc.index.astype("int64") // 10**9).astype(int)


out = ohlc[["time", "open", "high", "low", "close"]].to_dict("records")

HTMLでは：

JavaScript
const series = chart.addSeries(LightweightCharts.CandlestickSeries, {
  upColor: '#26a69a', downColor: '#ef5350',
  borderVisible: false,
  wickUpColor: '#26a69a', wickDownColor: '#ef5350',
});

これでPolymarketのローソク足チャートが完成します。TradingView Proが月$30、これは$0。30倍×∞の節約。

つまずきポイント集

症状原因対処
Value is null時刻重複 or 昇順じゃないsort + dedup
チャートが真っ白file://で開いたpython -m http.server
addAreaSeries is not a functionv5 API変更addSeries(LightweightCharts.AreaSeries, ...)
時刻がズレるunix秒 vs ミリ秒秒を渡す（int(pt["t"])）
CDNが読み込まれないブロッカー / 社内ネットnpm i lightweight-charts でローカル配置

何に使える？

  • Polymarket価格履歴をブログ記事に埋め込む：Remix/Next.js製ブログなら同じ方法でMDX内にインタラクティブチャートを置けます
  • トップウォレットの取引タイミング可視化：ウォレットの履歴を取って、価格チャートにマーカーを重ねる
  • バックテスト結果の可視化：損益曲線をlightweight-chartsで見せる
  • FREDマクロデータとの重ね合わせ：fredapiから引いたFed金利推移と政治系確率を同じチャート上に

まとめ

  • lightweight-charts + Polymarket CLOB API + 20行のHTML でTradingView Pro代替が完成
  • v5のAPI変更（addSeries(Type, ...)）だけ注意
  • $0/月で、本物のTradingViewチャート実装が手に入る
  • file://で開くとfetchが動かないので**python -m http.server必須**

チャート自体はTradingView公式のライブラリなので、見た目もインタラクションも本家譲りです。本物を無料で使い倒しましょう🔥

参考リンク

🎁おすすめツール・サービス

FX自動売買VPSなら50%OFF

キャンペーンで月1,790円〜。MT4/MT5プリインストール済み、自動復旧機能付き。14日間無料お試し。

シンクラウドデスクトップ for FX
ゴトー日EAを探しているならソースコード付

4年で資金4.7倍のバックテスト実績。ソースコード付きで自由にカスタマイズ可能。

ゴトー日EA Ultimate版（3,980円）

※上記リンクにはプロモーション（広告）が含まれています

🔮
MEMBERSHIP

量子相場謀略｜ホソノP

ブログでは書けない本音のトレード戦略とEA開発の裏側を公開。 データに基づいた検証で、再現性のある手法だけをお届けします。

✓EAソースコード公開
✓バックテスト生データ共有
✓リアルタイム相場分析
✓メンバー限定記事
メンバーシップに参加する※ noteアカウントで簡単登録
ポストする@hosono_p をフォロー

📚あわせて読みたい

📄

🏦 fredapi × Polymarket で Bloomberg Terminal（$2,000/月）を置き換える｜Fed過去データ＋市場の未来予想を1記事で

fredapiでFRB公開マクロデータを取得し、Polymarketで次回FOMC会合の市場予想確率を取得して重ねるワークフロー。無料APIキーの取り方、実コード、2026年4月Fed会合の実データを使った初心者向けチュートリアル。Bloomberg Terminal代替スタックの決定版。

予測市場2026/4/11
📄

📊『5分BTC市場で1日$100稼ぐ』3戦略を手数料の数式で全部検証してみた｜Polymarketスカルプ・リバーサル・MM

SNSで回ってくる『Polymarket 5分BTC Up/Down市場で1日$100稼ぐ3戦略』を数式で検証。Polymarket公式の手数料公式 C×feeRate×p×(1-p) を使って、スカルプ／リバーサル／マーケットメイクそれぞれの本当の期待値を計算。初心者向け。

予測市場2026/4/11
📄

🎯 Polymarket 初心者入門｜予測市場・CLOB・公式Python SDKを無料で触ってみる

予測市場Polymarketの仕組みを初心者向けに解説し、公式Python SDK py-clob-clientで実際に市場一覧と板情報を取得する実コード付きチュートリアル。認証不要、秘密鍵不要、Python 3.9以上だけあればOK。

予測市場2026/4/11
📄

📚 Polymarketクオンツ研究まとめ｜学術論文が見つけた『取れるエッジ』と自分で検証してみた結果

Polymarketに関する学術研究（favorite-longshot bias, NegRisk裁定, top 1%が84%を取る）を初心者向けに整理し、公開APIを使って自分でバイアスを実測してみた結果。arXiv論文・SSRN論文・実コード・実測データ付き。

予測市場2026/4/11
📄

🚨 Polymarket『AIで爆益』バズ投稿の見分け方｜本物のデータと作り話を切り分ける6つのテスト

X（旧Twitter）で繰り返し流れてくる『Claudeに$20渡したら寝てる間に+$102』『$600を1週間で$20,400に』系の投稿を、Polymarket公式APIの実データと数学で検証する方法。初心者が騙されないための6つのチェックリスト、Telegram bot $230K盗難事件、GitHubマルウェアハニーポット対策まで解説。

予測市場2026/4/11
📄

🐳 Polymarketのクジラ追跡・インサイダー検知はあてになる？コピー可能？｜実データで3つのよくある勘違いを検証

polytermなどのCLIツールやTelegram botで『クジラ追跡』『インサイダー検知』ができると謳う情報が溢れていますが、実際にあてになるか／一般ユーザーがコピーできるかを、Columbia大学のwash trading研究とPolymarketリーダーボード上位3ウォレットの実取引ログで検証。認証不要のpublic APIだけで再現可能。

予測市場2026/4/11