【自動更新】Microsoft 365 Personal AI機能搭載 1年版サブスクリプション | Win/Mac/iPad|インストール台数無制限(同時使用可能台数5台)

(537405)

￥21,300 (2025-07-17 16:40 GMT +09:00 時点 - )

ESET HOME セキュリティプレミアム| 5台3年 |カード版|ウイルス対策|Win/Mac/Android/iOS対応

(542141)

￥14,980 (2025-07-17 16:40 GMT +09:00 時点 - )

TIME OFF 働き方に“生産性”と“創造性”を取り戻す戦略的休息術

(543131)

￥2,310 (2025-07-17 16:40 GMT +09:00 時点 - )

考えすぎない練習

(541641)

￥1,725 (2025-07-17 16:40 GMT +09:00 時点 - )

Anker 675 USB-C ドッキングステーション (12-in-1, Monitor Stand, Wireless) モニタースタンドワイヤレス充電 100W USB PD対応 4K HDMIポート microSD＆SDカードスロット 3.5mmオーディオジャックイーサネットポート 10Gbps USB-C USB-Aポート搭載高速データ転送

(542390)

￥32,990 (2025-07-17 16:40 GMT +09:00 時点 - )

「PythonでWebアプリを作りたいけど、HTMLやJavaScriptは難しそう…」と思っていませんか？Streamlitなら、Pythonだけで簡単にWebアプリが作れます！今回は、仮想通貨の価格を表示するアプリを作りながら、Streamlitの基本を学びましょう。

0.1 Streamlitとは？なぜ初心者におすすめ？
- 0.1.1 従来のWebアプリ開発の大変さ
- 0.1.2 Streamlitなら超簡単！
0.2 環境準備：必要なライブラリをインストール
- 0.2.1 各ライブラリの役割
- 0.2.2 インストール確認
0.3 最初のアプリ：Hello Streamlit
- 0.3.1 実行してみよう
0.4 仮想通貨価格取得の基本
0.5 複数通貨の価格表示アプリ
0.6 実行とカスタマイズ
- 0.6.1 アプリを実行
- 0.6.2 カスタマイズのポイント

1 5秒ごとに自動更新

Streamlitとは？なぜ初心者におすすめ？

従来のWebアプリ開発の大変さ

普通、Webアプリを作るには以下の知識が必要でした：

HTML：ページの構造を作る
CSS：デザインを整える
JavaScript：動的な機能を追加
サーバー：バックエンドの処理

例えば、シンプルな価格表示でも：

<!DOCTYPE html>
<html>
<head>
    <style>
        .price-card { 
            background: #f0f0f0; 
            padding: 20px; 
            margin: 10px; 
        }
    </style>
</head>
<body>
    <div class="price-card">
        <h3>ビットコイン</h3>
        <p id="btc-price">読み込み中...</p>
    </div>
    <script>
        // JavaScriptで価格を取得
        fetch('/api/price')
            .then(response => response.json())
            .then(data => {
                document.getElementById('btc-price').textContent = data.price;
            });
    </script>
</body>
</html>

Streamlitなら超簡単！

同じことがStreamlitならたった数行：

import streamlit as st

st.title("仮想通貨価格")
st.write("ビットコイン: $45,000")

これだけで立派なWebアプリになります！

環境準備：必要なライブラリをインストール

まず、必要なライブラリをインストールしましょう：

pip install streamlit ccxt pandas

各ライブラリの役割

streamlit：Webアプリフレームワーク
ccxt：仮想通貨取引所API（価格取得用）
pandas：データ処理ライブラリ

インストール確認

正しくインストールできているか確認しましょう：

# test_streamlit.py として保存
import streamlit as st

st.title("🎉 Streamlit動作テスト")
st.write("正常に動作しています！")
st.balloons()  # お祝いのバルーンアニメーション

ターミナルで実行：

streamlit run test_streamlit.py

ブラウザで http://localhost:8501 が開けば成功です！

最初のアプリ：Hello Streamlit

Streamlitの基本的な機能を体験してみましょう：

# hello_streamlit.py
import streamlit as st
from datetime import datetime

# ページタイトル
st.title("🚀 Streamlit入門")

# 見出し
st.header("基本的な表示要素")

# テキスト表示
st.write("これは普通のテキストです")
st.text("これは等幅フォントのテキストです")

# マークダウン
st.markdown("**太字**や*斜体*も使えます")
st.markdown("- リスト1n- リスト2n- リスト3")

# 数値表示
st.metric(
    label="現在時刻",
    value=datetime.now().strftime("%H:%M:%S")
)

# カラム分割
col1, col2 = st.columns(2)

with col1:
    st.write("左側のカラム")

with col2:
    st.write("右側のカラム")

# サイドバー
st.sidebar.title("サイドバー")
st.sidebar.write("ここにメニューを配置")

# ボタン
if st.button("クリックしてね"):
    st.write("ボタンが押されました！")
    st.success("成功メッセージ")

実行してみよう

streamlit run hello_streamlit.py

いろいろな表示要素が確認できましたか？

仮想通貨価格取得の基本

次に、実際の仮想通貨価格を取得してみましょう：

# crypto_price_basic.py
import streamlit as st
import ccxt
from datetime import datetime

st.title("💰 仮想通貨価格取得")

# 価格取得関数
def get_bitcoin_price():
    """ビットコインの価格を取得する関数"""
    try:
        # Binance取引所に接続
        exchange = ccxt.binance()

        # BTC/USDTの価格情報を取得
        ticker = exchange.fetch_ticker('BTC/USDT')

        return {
            'price': ticker['last'],        # 最新価格
            'change': ticker['percentage'], # 24時間変動率
            'volume': ticker['volume']      # 出来高
        }
    except Exception as e:
        st.error(f"価格取得エラー: {e}")
        return None

# メインの処理
st.write("ビットコインの現在価格を取得します...")

# スピナー（読み込み中表示）
with st.spinner('価格を取得中...'):
    btc_data = get_bitcoin_price()

if btc_data:
    # 価格表示
    st.success("価格取得完了！")

    price = btc_data['price']
    change = btc_data['change']
    volume = btc_data['volume']

    # メトリック表示
    st.metric(
        label="🪙 Bitcoin (BTC)",
        value=f"${price:,.2f}",
        delta=f"{change:+.2f}%"
    )

    # 詳細情報
    st.write(f"📊 24時間出来高: {volume:,.0f} BTC")
    st.caption(f"最終更新: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")

else:
    st.error("価格を取得できませんでした")

複数通貨の価格表示アプリ

より実用的なアプリを作ってみましょう：

# multi_crypto_app.py
import streamlit as st
import ccxt
import pandas as pd
from datetime import datetime

# ページ設定
st.set_page_config(
    page_title="仮想通貨価格ダッシュボード",
    page_icon="💰",
    layout="wide"  # 画面を広く使う
)

st.title("💰 仮想通貨価格ダッシュボード")
st.markdown("---")  # 区切り線

# 複数通貨の価格取得関数
@st.cache_data(ttl=60)  # 60秒間結果をキャッシュ
def get_multiple_prices():
    """複数の仮想通貨価格を取得"""
    exchange = ccxt.binance()

    # 取得したい通貨のリスト
    symbols = [
        'BTC/USDT',  # ビットコイン
        'ETH/USDT',  # イーサリアム
        'XRP/USDT',  # リップル
        'ADA/USDT'   # カルダノ
    ]

    prices = {}

    for symbol in symbols:
        try:
            ticker = exchange.fetch_ticker(symbol)
            prices[symbol] = {
                'price': ticker['last'],
                'change': ticker['percentage'],
                'volume': ticker['baseVolume']
            }
        except Exception as e:
            st.error(f"エラー {symbol}: {e}")
            # エラーの場合はダミーデータ
            prices[symbol] = {
                'price': 0,
                'change': 0,
                'volume': 0
            }

    return prices

# 価格データを取得
prices = get_multiple_prices()

# 4つのカラムに分けて表示
col1, col2, col3, col4 = st.columns(4)

# 通貨情報リスト
currencies = [
    {
        'symbol': 'BTC/USDT',
        'name': 'Bitcoin',
        'emoji': '🪙',
        'column': col1
    },
    {
        'symbol': 'ETH/USDT', 
        'name': 'Ethereum',
        'emoji': '💎',
        'column': col2
    },
    {
        'symbol': 'XRP/USDT',
        'name': 'Ripple', 
        'emoji': '🌊',
        'column': col3
    },
    {
        'symbol': 'ADA/USDT',
        'name': 'Cardano',
        'emoji': '🔺',
        'column': col4
    }
]

# 各通貨の価格を表示
for currency in currencies:
    symbol = currency['symbol']
    name = currency['name']
    emoji = currency['emoji']
    col = currency['column']

    with col:
        price = prices[symbol]['price']
        change = prices[symbol]['change']

        # 変動率に応じて矢印を変更
        if change > 0:
            arrow = "📈"
            delta_color = "normal"
        else:
            arrow = "📉" 
            delta_color = "normal"

        # メトリック表示
        st.metric(
            label=f"{emoji} {name}",
            value=f"${price:,.2f}",
            delta=f"{change:+.2f}%"
        )

# 詳細データをテーブル表示
st.subheader("📊 詳細データ")

# データフレーム作成
df_data = []
for symbol, data in prices.items():
    currency_name = symbol.split('/')[0]  # 'BTC/USDT' → 'BTC'
    df_data.append({
        '通貨': currency_name,
        '価格 ($)': data['price'],
        '24h変動 (%)': data['change'],
        '出来高': data['volume']
    })

df = pd.DataFrame(df_data)

# テーブル表示（フォーマット付き）
st.dataframe(
    df.style.format({
        '価格 ($)': '{:,.2f}',
        '24h変動 (%)': '{:+.2f}',
        '出来高': '{:,.0f}'
    }),
    use_container_width=True
)

# 更新時間と更新ボタン
col_time, col_button = st.columns([3, 1])

with col_time:
    st.caption(f"⏰ 最終更新: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")

with col_button:
    if st.button("🔄 更新"):
        # キャッシュをクリアして再実行
        st.cache_data.clear()
        st.experimental_rerun()

# 使い方説明
with st.expander("ℹ️ 使い方"):
    st.write("""
    **このアプリの使い方：**

    1. **価格確認**: 主要4通貨の現在価格を確認できます
    2. **変動率**: 24時間の価格変動率を確認できます
    3. **更新**: 🔄ボタンで最新価格に更新できます
    4. **詳細**: 下部の表で数値の詳細を確認できます

    **注意事項：**
    - 価格は60秒間キャッシュされます
    - Binance取引所の価格を表示しています
    - 投資は自己責任で行ってください
    """)

実行とカスタマイズ

アプリを実行

streamlit run multi_crypto_app.py

カスタマイズのポイント

通貨を追加したい場合

symbols = [
'BTC/USDT',
'ETH/USDT', 
'XRP/USDT',
'ADA/USDT',
'DOT/USDT',  # ← 新しい通貨を追加
'LINK/USDT'  # ← 新しい通貨を追加
]

デザインを変更したい場合

# カスタムCSS
st.markdown("""
<style>
.metric-container {
background-color: #f0f2f6;
padding: 1rem;
border-radius: 0.5rem;
}
</style>
""", unsafe_allow_html=True)

自動更新を追加したい場合
```
import time
```

5秒ごとに自動更新

time.sleep(5)
st.experimental_rerun()



## まとめ

この記事では以下を学びました：

1. **Streamlitの基本概念**：なぜ初心者に優しいか
2. **環境構築**：必要なライブラリのインストール
3. **基本的な表示要素**：テキスト、メトリック、カラム
4. **データ取得**：CCXTを使った価格取得
5. **実用的なアプリ**：複数通貨の価格表示

次回の第2部では、これをベースにグラフやチャート機能を追加していきます。

## 次回予告

[第2部：インタラクティブなチャートと可視化機能](/streamlit-crypto-dashboard-part2)では、以下の機能を追加します：

- 📈 ローソク足チャートの表示
- 📊 取引量のバーチャート
- 🔄 リアルタイム更新機能
- 🎛️ インタラクティブな操作

## 関連記事

- [Python環境構築ガイド](/setup-python-environment)
- [CCXTで仮想通貨データAPIを作る](/ccxt-ohlcv-data-api-with-fastapi)
- [Python非同期処理入門 第2部](/python-asyncio-ccxt-part2)