Python Webスクレイピング Streamlit GUI

Streamlit入門 第1部：初心者でも30分で作れる仮想通貨価格表示アプリ

約17分で読めます by ぽんたぬき
Streamlit入門 第1部：初心者でも30分で作れる仮想通貨価格表示アプリ

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

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("- リスト1\n- リスト2\n- リスト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

カスタマイズのポイント

  1. 通貨を追加したい場合
symbols = [
    'BTC/USDT',
    'ETH/USDT', 
    'XRP/USDT',
    'ADA/USDT',
    'DOT/USDT',  # ← 新しい通貨を追加
    'LINK/USDT'  # ← 新しい通貨を追加
]
  1. デザインを変更したい場合
# カスタムCSS
st.markdown("""
<style>
.metric-container {
    background-color: #f0f2f6;
    padding: 1rem;
    border-radius: 0.5rem;
}
</style>
""", unsafe_allow_html=True)
  1. 自動更新を追加したい場合
import time

# 5秒ごとに自動更新
time.sleep(5)
st.experimental_rerun()

まとめ

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

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

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

次回予告

第2部：インタラクティブなチャートと可視化機能では、以下の機能を追加します：

関連記事

Streamlit入門 第3部：ポートフォリオ管理とアラート機能で完全な投資ツールを構築
Python

Streamlit入門 第3部：ポートフォリオ管理とアラート機能で完全な投資ツールを構築

これまでの記事で価格表示とチャート分析ができるようになりました。今回は最終回として、自分の保有している仮想通貨を管理するポートフォリオ機能と、価格変動を知らせるアラート機能を追加します。これで本格的な投資管理ツールの完成です！ ポートフォリオ管理とは？なぜ重要なのか ...

Streamlit
Streamlit入門 第2部：美しいチャートと可視化で仮想通貨を分析しよう
Python

Streamlit入門 第2部：美しいチャートと可視化で仮想通貨を分析しよう

前回の記事で基本的な価格表示ができるようになりました。今回は、プロのトレーダーが使うような美しいチャートを追加して、本格的な分析ツールに仕上げていきます。難しそうに見えますが、実は数行のコードで驚くほど高機能なチャートが作れるんです！ Plotlyとは？なぜグラフライブラリの中で最強なのか ...

Streamlit Plotly
Python Webスクレイピング 2025 第3部：実践プロジェクトとデータ管理
Python

Python Webスクレイピング 2025 第3部：実践プロジェクトとデータ管理

はじめに シリーズ最終回となる第3部では、実際のプロジェクトで使える実践的なスクレイピングシステムの構築について解説します。検出回避技術、データの永続化、監視システムの構築など、プロダクション環境で必要となる高度な技術を学びます。 また、法的・倫理的配慮についても詳しく説明し、責任あるスクレイピング...

Webスクレイピング Python
Python Webスクレイピング 2025 第2部：非同期処理と高度なデータ抽出
Python

Python Webスクレイピング 2025 第2部：非同期処理と高度なデータ抽出

はじめに 第1部ではPlaywrightの基本的な使い方と環境構築について学びました。第2部では、並行処理によるパフォーマンス向上と高度なデータ抽出テクニックについて詳しく解説します。 大規模なスクレイピングプロジェクトでは、単一ページずつの処理では時間がかかりすぎるため、複数のページを同時に処理す...

Webスクレイピング Python

コメント

0/2000