Web

[Python] Bottleで表(Table)を表示する方法

2025-04-15更新日: 2025-04-15

Bottleは軽量なPythonのWebフレームワークで、HTMLを生成してクライアントに返すことができます。

表(Table)を表示するには、HTMLの<table>タグを使用してテンプレートを作成し、Bottleのtemplate関数でデータを埋め込みます。

テンプレートエンジンとしてBottleのデフォルトのものを使うか、Jinja2などを利用することも可能です。

データはPythonのリストや辞書で管理し、テンプレート内でループ処理を行って表を生成します。

目次から探す

Bottleとは？簡単な概要
Bottleでの基本的なHTMLレンダリング
表(Table)の基本構造
Bottleで表を表示する手順
動的な表の生成
表のスタイリングとカスタマイズ
応用例：Bottleでの表の活用
まとめ

Bottleとは？簡単な概要

Bottleは、Pythonで書かれたシンプルで軽量なWebアプリケーションフレームワークです。

特に小規模なアプリケーションやプロトタイプの開発に適しており、シンプルなAPIを提供します。

Bottleは、単一のファイルで構成されているため、導入が容易で、すぐに使い始めることができます。

Bottleの特徴

特徴	説明
軽量	Bottleは非常に小さなフレームワークで、依存関係が少ない。
シンプルな構文	簡潔なコードでWebアプリケーションを構築できる。
単一ファイル構成	すべての機能が1つのファイルに収められている。
テンプレートエンジン	HTMLを簡単に生成できるテンプレート機能を持つ。
プラグイン対応	必要に応じて機能を追加できるプラグインが利用可能。

Bottleのインストール方法

BottleはPythonのパッケージ管理ツールであるpipを使用して簡単にインストールできます。

以下のコマンドを実行してください。

pip install bottle

インストールが完了したら、次のようにBottleをインポートして使用できます。

from bottle import Bottle, run
app = Bottle()
@app.route('/')
def index():
    return "Hello, Bottle!"
run(app, host='localhost', port=8080)

このコードを実行すると、http://localhost:8080にアクセスすることで Hello, Bottle! と表示されます。

Bottleを使うメリットとデメリット

メリット	デメリット
学習コストが低い	大規模アプリには不向き
シンプルで直感的なAPI	機能が限られている
迅速なプロトタイピングが可能	スケーラビリティに欠けることがある
依存関係が少ない	コミュニティが小さい

Bottleは、特に小規模なプロジェクトや学習目的での使用に適していますが、大規模なアプリケーションには他のフレームワークを検討することが推奨されます。

Bottleでの基本的なHTMLレンダリング

Bottleでは、HTMLを動的に生成するためのテンプレートエンジンを使用することができます。

これにより、データを埋め込んだり、条件に応じて表示内容を変更したりすることが容易になります。

Bottleのテンプレートエンジンの仕組み

Bottleのテンプレートエンジンは、Pythonの標準ライブラリであるstringモジュールを基にしたシンプルなものです。

テンプレートファイルは、HTMLの中にPythonのコードを埋め込むことができ、動的なコンテンツを生成することが可能です。

テンプレート内では、変数の埋め込みやループ、条件分岐を行うことができます。

template関数の使い方

template関数を使用することで、テンプレートを簡単にレンダリングできます。

以下は、template関数の基本的な使い方の例です。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    name = "ユーザー"
    return template('<b>Hello {{name}}!</b>', name=name)
run(app, host='localhost', port=8080)

このコードを実行すると、http://localhost:8080にアクセスした際に「Hello ユーザー!」と表示されます。

{{name}}の部分が変数nameの値で置き換えられています。

HTMLファイルの配置場所とルーティング

Bottleでは、HTMLテンプレートファイルを特定のディレクトリに配置することが推奨されています。

デフォルトでは、viewsというフォルダにHTMLファイルを置くことが一般的です。

以下のようにディレクトリ構成を作成します。

/myapp
│
├── app.py          # Bottleアプリケーション
└── views
    └── index.tpl  # テンプレートファイル

index.tplファイルの内容は以下のようになります。

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>Hello {{name}}!</h1>
</body>
</html>

app.pyのコードは次のように変更します。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    name = "ユーザー"
    return template('index', name=name)
run(app, host='localhost', port=8080)

このようにすることで、index.tplファイルを使用してHTMLをレンダリングすることができます。

ルーティングは@app.route('/')で設定されており、/にアクセスするとindex関数が呼び出されます。

表(Table)の基本構造

Webページでデータを整理して表示するために、表(Table)は非常に有用な要素です。

HTMLでは、表を作成するための特定のタグが用意されています。

ここでは、表の基本構造とそのスタイリング方法について解説します。

HTMLの<table>タグの基本

HTMLで表を作成するためには、<table>タグを使用します。

このタグは、表全体を囲む要素であり、内部に行<tr>やセル<td>、<th>を含むことができます。

基本的な構造は以下の通りです。

<table>
    <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

このコードでは、1行目にヘッダーがあり、2行目にデータが表示される表が作成されます。

<tr>, <td>, <th>タグの役割

<tr>: 表の行を定義します。

各行は、<td>または<th>タグを含むことができます。

<td>: 表のデータセルを定義します。

通常のデータを表示するために使用されます。

<th>: 表のヘッダーセルを定義します。

通常は太字で中央揃えになり、列のタイトルや説明を表示するために使用されます。

以下は、これらのタグを使った表の例です。

<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    <tr>
        <td>山田太郎</td>
        <td>30</td>
    </tr>
    <tr>
        <td>鈴木花子</td>
        <td>25</td>
    </tr>
</table>

この表では、名前と年齢の情報が整理されています。

CSSを使った表のスタイリング

表をより見やすくするために、CSSを使ってスタイリングを行うことができます。

以下は、基本的なスタイルを適用する例です。

<style>
    table {
        width: 100%;
        border-collapse: collapse; /* セルの境界を重ねる */
    }
    th, td {
        border: 1px solid #000; /* セルの境界線 */
        padding: 8px; /* セル内の余白 */
        text-align: left; /* テキストの左揃え */
    }
    th {
        background-color: #f2f2f2; /* ヘッダーの背景色 */
    }
</style>

このCSSを適用すると、表は次のようにスタイリングされます。

表全体の幅を100%に設定
セルの境界線を1pxの黒色に設定
ヘッダーセルの背景色を薄いグレーに設定

これにより、表が視覚的に整理され、データが見やすくなります。

CSSを使ってさらにカスタマイズすることも可能です。

Bottleで表を表示する手順

Bottleを使用して表を表示するためには、データの準備からテンプレートの作成、ルーティング設定までの一連の手順が必要です。

以下にその手順を詳しく解説します。

表示するデータの準備(リストや辞書)

まず、表示するデータを準備します。

ここでは、リストや辞書を使ってデータを構造化します。

例えば、ユーザーの名前と年齢を含むリストを作成します。

data = [
    {"name": "山田太郎", "age": 30},
    {"name": "鈴木花子", "age": 25},
    {"name": "佐藤次郎", "age": 28}
]

このように、各ユーザーの情報を辞書形式でリストに格納します。

テンプレートファイルの作成

次に、HTMLテンプレートファイルを作成します。

viewsフォルダ内にtable.tplという名前のファイルを作成し、以下の内容を記述します。

<!DOCTYPE html>
<html>
<head>
    <title>ユーザー一覧</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>ユーザー一覧</h1>
    <table>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        % for user in users:
        <tr>
            <td>{{user['name']}}</td>
            <td>{{user['age']}}</td>
        </tr>
        % end
    </table>
</body>
</html>

このテンプレートでは、usersという変数を使って、ユーザーの名前と年齢を表に表示します。

テンプレート内でのループ処理

テンプレート内では、% for構文を使用してリストをループ処理し、各ユーザーの情報を表に追加します。

{{user['name']}}や{{user['age']}}を使って、リスト内の各辞書からデータを取得します。

Bottleアプリケーションでのルーティング設定

最後に、Bottleアプリケーションを設定し、ルーティングを行います。

以下のようにapp.pyを作成します。

from bottle import Bottle, run, template
app = Bottle()
# 表示するデータの準備
data = [
    {"name": "山田太郎", "age": 30},
    {"name": "鈴木花子", "age": 25},
    {"name": "佐藤次郎", "age": 28}
]
@app.route('/')
def index():
    return template('table', users=data)
run(app, host='localhost', port=8080)

このコードでは、/にアクセスした際にindex関数が呼び出され、table.tplテンプレートがレンダリングされます。

users変数には、先ほど準備したデータが渡されます。

これで、http://localhost:8080にアクセスすると、ユーザーの名前と年齢が表示された表が表示されます。

動的な表の生成

Bottleを使用すると、動的に表を生成することができます。

ここでは、Pythonのリストや辞書を使った表の生成、データベースからのデータを表示する方法、フォーム入力からのデータを表に反映する方法について解説します。

Pythonのリストや辞書を使った動的な表の生成

Pythonのリストや辞書を使用して、動的に表を生成することができます。

以下の例では、ユーザーの情報をリストに格納し、それを表として表示します。

from bottle import Bottle, run, template
app = Bottle()
# 動的に生成するデータ
users = [
    {"name": "山田太郎", "age": 30},
    {"name": "鈴木花子", "age": 25},
    {"name": "佐藤次郎", "age": 28}
]
@app.route('/')
def index():
    return template('table', users=users)
run(app, host='localhost', port=8080)

このコードでは、usersリストにユーザー情報を格納し、table.tplテンプレートで表示します。

テンプレート内でループ処理を行い、各ユーザーの情報を表に追加します。

データベースからのデータを表に表示する方法

データベースからデータを取得して表に表示することも可能です。

以下は、SQLiteデータベースを使用した例です。

import sqlite3
from bottle import Bottle, run, template
app = Bottle()
# SQLiteデータベースの接続
def get_db_connection():
    conn = sqlite3.connect('users.db')
    conn.row_factory = sqlite3.Row
    return conn
@app.route('/')
def index():
    conn = get_db_connection()
    users = conn.execute('SELECT name, age FROM users').fetchall()
    conn.close()
    return template('table', users=users)
run(app, host='localhost', port=8080)

このコードでは、SQLiteデータベースに接続し、usersテーブルから名前と年齢を取得しています。

取得したデータは、table.tplテンプレートで表示されます。

フォーム入力からのデータを表に反映する方法

ユーザーからのフォーム入力を受け取り、そのデータを表に反映することもできます。

以下は、フォームを作成し、入力されたデータを表に追加する例です。

from bottle import Bottle, run, template, request, redirect
app = Bottle()
# 初期データ
users = []
@app.route('/')
def index():
    return template('table', users=users)
@app.route('/add', method='POST')
def add_user():
    name = request.forms.get('name')
    age = request.forms.get('age')
    users.append({"name": name, "age": age})  # 新しいユーザーを追加
    redirect('/')  # 表示ページにリダイレクト
@app.route('/form')
def form():
    return '''
        <form action="/add" method="post">
            名前: <input name="name" type="text" />
            年齢: <input name="age" type="text" />
            <input value="追加" type="submit" />
        </form>
    '''
run(app, host='localhost', port=8080)

このコードでは、/formエンドポイントでフォームを表示し、ユーザーが名前と年齢を入力して送信すると、/addエンドポイントが呼び出されます。

新しいユーザー情報はusersリストに追加され、/にリダイレクトされて表が更新されます。

これにより、ユーザーがフォームから入力したデータが動的に表に反映されます。

表のスタイリングとカスタマイズ

表を見やすくするためには、スタイリングやカスタマイズが重要です。

ここでは、CSSを使った表のデザイン、Bootstrapを使ったスタイリング、テンプレート内での条件分岐によるカスタマイズについて解説します。

CSSを使った表のデザイン

CSSを使用して、表のデザインをカスタマイズすることができます。

以下は、基本的なスタイルを適用した例です。

<style>
    table {
        width: 100%;
        border-collapse: collapse; /* セルの境界を重ねる */
    }
    th, td {
        border: 1px solid #ccc; /* セルの境界線 */
        padding: 10px; /* セル内の余白 */
        text-align: left; /* テキストの左揃え */
    }
    th {
        background-color: #4CAF50; /* ヘッダーの背景色 */
        color: white; /* ヘッダーの文字色 */
    }
    tr:nth-child(even) {
        background-color: #f2f2f2; /* 偶数行の背景色 */
    }
    tr:hover {
        background-color: #ddd; /* マウスオーバー時の背景色 */
    }
</style>

このスタイルを適用すると、以下のような効果があります。

ヘッダーの背景色を緑色に設定し、文字色を白にする。
偶数行の背景色を薄いグレーに設定。
行にマウスオーバーした際に背景色が変わる。

Bootstrapを使った表のスタイリング

Bootstrapを使用すると、簡単に美しい表を作成できます。

BootstrapのCSSをプロジェクトに追加し、クラスを使用して表をスタイリングします。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<table class="table table-striped">
    <thead>
        <tr>
            <th>名前</th>
            <th>年齢</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>山田太郎</td>
            <td>30</td>
        </tr>
        <tr>
            <td>鈴木花子</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

このコードでは、Bootstrapのtableクラスとtable-stripedクラスを使用しています。

これにより、以下のようなスタイリングが適用されます。

表全体にBootstrapのスタイルが適用され、見た目が整う。
偶数行にストライプ(縞模様)が適用され、視認性が向上する。

テンプレート内での条件分岐によるカスタマイズ

テンプレート内で条件分岐を使用することで、特定の条件に基づいて表の内容をカスタマイズすることができます。

以下は、年齢が30歳以上のユーザーに特別なスタイルを適用する例です。

<table>
    <tr>
        <th>名前</th>
        <th>年齢</th>
    </tr>
    % for user in users:
    <tr style="background-color: {{ 'lightcoral' if user['age'] >= 30 else 'white' }};">
        <td>{{ user['name'] }}</td>
        <td>{{ user['age'] }}</td>
    </tr>
    % end
</table>

このコードでは、年齢が30歳以上のユーザーの行にlightcoralの背景色を適用し、それ以外の行は白色の背景になります。

これにより、特定の条件に基づいて表のスタイルを動的に変更することができます。

これらの方法を組み合わせることで、表をより魅力的で使いやすくカスタマイズすることが可能です。

応用例：Bottleでの表の活用

Bottleを使用して、表にさまざまな機能を追加することができます。

ここでは、ページネーション、ソート機能、フィルタリング機能を持つ表の作成方法について解説します。

ページネーション付きの表の作成

ページネーションを実装することで、大量のデータを複数のページに分けて表示することができます。

以下は、簡単なページネーションの例です。

from bottle import Bottle, run, template, request
app = Bottle()
# サンプルデータ
users = [{"name": f"ユーザー{i}", "age": 20 + (i % 10)} for i in range(1, 101)]  # 100人のユーザー
@app.route('/')
def index():
    page = int(request.query.page or 1)
    per_page = 10
    total = len(users)
    start = (page - 1) * per_page
    end = start + per_page
    paginated_users = users[start:end]
    
    return template('table', users=paginated_users, page=page, total=total, per_page=per_page)
run(app, host='localhost', port=8080)

このコードでは、pageクエリパラメータを使用して現在のページを取得し、表示するユーザーをページごとに分けています。

テンプレート内でページネーションのリンクを作成することができます。

ソート機能付きの表の作成

表にソート機能を追加することで、ユーザーが列をクリックしてデータを並べ替えることができます。

以下は、名前でソートする例です。

@app.route('/')
def index():
    sort = request.query.sort or 'name'  # デフォルトは名前でソート
    sorted_users = sorted(users, key=lambda x: x[sort])
    
    return template('table', users=sorted_users)

このコードでは、sortクエリパラメータを使用して、ユーザーを指定されたキーでソートします。

テンプレート内で、列のヘッダーをクリックすることでソートをトリガーするリンクを作成します。

フィルタリング機能付きの表の作成

フィルタリング機能を追加することで、特定の条件に基づいてデータを表示することができます。

以下は、年齢でフィルタリングする例です。

@app.route('/')
def index():
    age_filter = request.query.age or ''
    filtered_users = [user for user in users if age_filter in str(user['age'])]
    
    return template('table', users=filtered_users)