Web

[Python] Bottleでボタンを使用する方法

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

Bottleは軽量なPythonのWebフレームワークで、ボタンを使用するにはHTMLフォームを作成し、Bottleのルートでそのリクエストを処理します。

まず、HTMLで<form>タグと<button>タグを作成し、POSTまたはGETメソッドでサーバーにデータを送信します。

Bottle側では、@routeデコレータを使ってそのリクエストを受け取り、request.formsやrequest.queryでデータを取得します。

この記事を参考に、実際のWebアプリケーションにボタン機能を組み込んでみることをお勧めします

目次から探す

Bottleフレームワークの基本設定
HTMLフォームとボタンの作成
Bottleでボタンのリクエストを処理する
ボタンの応用例
Bottleとテンプレートエンジンの連携
セキュリティとバリデーション
まとめ

Bottleフレームワークの基本設定

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

ここでは、Bottleを使用するための基本的な設定方法を解説します。

まずは、Bottleをインストールする方法から始めましょう。

Bottleのインストール方法

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

以下のコマンドをターミナルまたはコマンドプロンプトで実行してください。

pip install bottle

このコマンドを実行すると、Bottleがインストールされます。

インストールが完了したら、次のようにBottleをインポートして、基本的なWebアプリケーションを作成することができます。

サンプルコード

以下は、Bottleを使った簡単なWebアプリケーションのサンプルコードです。

from bottle import Bottle, run
# アプリケーションのインスタンスを作成
app = Bottle()
# ルートURLにアクセスしたときの処理
@app.route('/')
def home():
    return "こんにちは、Bottleの世界へようこそ！"
# アプリケーションを実行
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行すると、ローカルホストの8080ポートでBottleアプリケーションが起動します。

ブラウザでhttp://localhost:8080にアクセスすると、「こんにちは、Bottleの世界へようこそ！」というメッセージが表示されます。

出力結果

ブラウザで表示される内容は以下の通りです。

こんにちは、Bottleの世界へようこそ！

Bottleを使うことで、シンプルなWebアプリケーションを迅速に構築することができます。

次のセクションでは、HTMLフォームとボタンの作成について詳しく解説します。

HTMLフォームとボタンの作成

Webアプリケーションにおいて、ユーザーからの入力を受け取るためにはHTMLフォームが必要です。

ここでは、HTMLフォームの基本構造やボタンの使い方について解説します。

HTMLフォームの基本構造

HTMLフォームは、ユーザーがデータを入力し、サーバーに送信するための要素です。

基本的な構造は以下のようになります。

<form action="送信先URL" method="POST">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <button type="submit">送信</button>
</form>

このコードでは、<form>タグでフォームを定義し、<input>タグでテキストボックスを作成しています。

<button>タグは、送信ボタンを作成します。

<button>タグの使い方

<button>タグは、ボタンを作成するためのHTML要素です。

以下のように使用します。

<button type="button">クリックしてね</button>

このボタンは、クリックしても何も起こりません。

ボタンに機能を持たせるためには、JavaScriptなどでイベントを設定する必要があります。

<input type=”submit”>と<button>の違い

<input type="submit">と<button>は、どちらもフォームの送信ボタンとして使用できますが、いくつかの違いがあります。

以下の表で比較します。

特徴	`<input type="submit">`	`<button>`
タグの種類	単一の要素	開始タグと終了タグが必要
内容のカスタマイズ	属性で指定	自由にHTMLを記述可能
スタイルのカスタマイズ	限定的	CSSで自由にスタイル可能

フォームのmethod属性とaction属性の設定

フォームには、method属性とaction属性があります。

これらの属性は、フォームの送信方法と送信先を指定します。

method属性: フォームデータを送信する方法を指定します。

主にGETとPOSTの2つがあります。

GET: URLにデータを付加して送信します。

データがURLに表示されるため、セキュリティが低いです。

POST: データをリクエストボディに含めて送信します。

データがURLに表示されないため、セキュリティが高いです。

action属性: フォームデータを送信する先のURLを指定します。

指定しない場合、現在のURLにデータが送信されます。

以下は、methodとactionを設定したフォームの例です。

<form action="/submit" method="POST">
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="送信">
</form>

このフォームでは、メールアドレスを入力し、/submitにPOSTリクエストを送信します。

次のセクションでは、Bottleでボタンのリクエストを処理する方法について解説します。

Bottleでボタンのリクエストを処理する

Bottleを使用すると、ボタンのクリックイベントやフォームの送信を簡単に処理できます。

ここでは、POSTリクエストやGETリクエストを受け取る方法、ボタンのクリックイベントの処理方法について解説します。

BottleでPOSTリクエストを受け取る方法

Bottleでは、POSTリクエストを受け取るために、@app.routeデコレーターを使用してエンドポイントを定義します。

以下のサンプルコードでは、フォームからのPOSTリクエストを受け取る方法を示します。

from bottle import Bottle, run, request
app = Bottle()
@app.route('/submit', method='POST')
def submit():
    return "データが送信されました！"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードでは、/submitエンドポイントにPOSTリクエストが送信されると、「データが送信されました！」というメッセージが表示されます。

request.formsでフォームデータを取得する

フォームから送信されたデータは、request.formsを使用して取得できます。

以下のサンプルコードでは、フォームから送信された名前を取得して表示します。

from bottle import Bottle, run, request
app = Bottle()
@app.route('/submit', method='POST')
def submit():
    name = request.forms.get('name')  # フォームデータから名前を取得
    return f"こんにちは、{name}さん！"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行し、フォームから名前を送信すると、「こんにちは、[名前]さん！」というメッセージが表示されます。

ボタンのクリックイベントを処理する

ボタンのクリックイベントを処理するには、フォームの送信先を指定し、ボタンをクリックしたときにPOSTリクエストを送信します。

以下のサンプルコードでは、ボタンをクリックしたときに特定の処理を行います。

<form action="/submit" method="POST">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <button type="submit">送信</button>
</form>

このフォームを使用すると、ボタンをクリックしたときに/submitにPOSTリクエストが送信され、submit関数が呼び出されます。

GETリクエストでボタンを処理する方法

GETリクエストを使用してボタンを処理することも可能です。

以下のサンプルコードでは、GETリクエストを受け取る方法を示します。

from bottle import Bottle, run
app = Bottle()
@app.route('/submit', method='GET')
def submit():
    return "GETリクエストが送信されました！"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードでは、ボタンをクリックしてGETリクエストを送信すると、「GETリクエストが送信されました！」というメッセージが表示されます。

複数のボタンを処理する方法

複数のボタンを持つフォームを作成し、それぞれのボタンに異なる処理を割り当てることもできます。

以下のサンプルコードでは、2つのボタンを持つフォームを示します。

<form action="/submit" method="POST">
    <button name="action" value="button1">ボタン1</button>
    <button name="action" value="button2">ボタン2</button>
</form>

このフォームでは、どちらのボタンがクリックされたかをrequest.formsで確認できます。

以下のサンプルコードで処理を実装します。

from bottle import Bottle, run, request
app = Bottle()
@app.route('/submit', method='POST')
def submit():
    action = request.forms.get('action')
    if action == 'button1':
        return "ボタン1がクリックされました！"
    elif action == 'button2':
        return "ボタン2がクリックされました！"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行し、ボタン1またはボタン2をクリックすると、それぞれのメッセージが表示されます。

次のセクションでは、ボタンの応用例について解説します。

ボタンの応用例

ボタンは、Webアプリケーションにおいてさまざまな機能を実現するために使用されます。

ここでは、ボタンを使ったいくつかの応用例を紹介します。

ボタンでページ遷移を行う

ボタンをクリックすることで、別のページに遷移させることができます。

以下のサンプルコードでは、ボタンをクリックすると指定したURLに遷移します。

<form action="/next_page" method="GET">
    <button type="submit">次のページへ</button>
</form>

このフォームを使用すると、ボタンをクリックしたときに/next_pageにGETリクエストが送信され、次のページに遷移します。

ボタンでデータを送信して表示する

ボタンを使ってデータを送信し、その結果を表示することも可能です。

以下のサンプルコードでは、ユーザーが入力した名前を送信し、結果を表示します。

<form action="/submit" method="POST">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <button type="submit">送信</button>
</form>

from bottle import Bottle, run, request
app = Bottle()
@app.route('/submit', method='POST')
def submit():
    name = request.forms.get('name')
    return f"こんにちは、{name}さん！"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行し、名前を入力して送信すると、入力した名前が表示されます。

ボタンでファイルをダウンロードさせる

ボタンをクリックすることで、ファイルをダウンロードさせることもできます。

以下のサンプルコードでは、ボタンをクリックすると指定したファイルがダウンロードされます。

<form action="/download" method="GET">
    <button type="submit">ファイルをダウンロード</button>
</form>

from bottle import Bottle, run, response
app = Bottle()
@app.route('/download', method='GET')
def download():
    response.set_header('Content-Disposition', 'attachment; filename="example.txt"')
    return "このファイルはダウンロードされます。"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行し、ボタンをクリックすると、example.txtというファイルがダウンロードされます。

ボタンで非同期処理を行う(Ajaxの導入)

ボタンをクリックしたときに非同期で処理を行うためには、Ajaxを使用します。

以下のサンプルコードでは、ボタンをクリックするとサーバーにリクエストを送信し、結果を表示します。

<button id="ajaxButton">データを取得</button>
<div id="result"></div>
<script>
    document.getElementById("ajaxButton").onclick = function() {
        fetch('/ajax_endpoint')
            .then(response => response.text())
            .then(data => {
                document.getElementById("result").innerText = data;
            });
    };
</script>

from bottle import Bottle, run
app = Bottle()
@app.route('/ajax_endpoint', method='GET')
def ajax_endpoint():
    return "非同期で取得したデータです！"
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行し、ボタンをクリックすると、非同期でデータが取得され、結果が表示されます。

ボタンでAPIを呼び出す

ボタンを使って外部APIを呼び出すこともできます。

以下のサンプルコードでは、ボタンをクリックするとAPIからデータを取得し、表示します。

<button id="apiButton">APIを呼び出す</button>
<div id="apiResult"></div>
<script>
    document.getElementById("apiButton").onclick = function() {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => {
                document.getElementById("apiResult").innerText = JSON.stringify(data);
            });
    };
</script>

このコードでは、ボタンをクリックすると指定したAPIからデータを取得し、結果を表示します。

APIのURLは適宜変更してください。

これらの応用例を参考にして、ボタンを活用したさまざまな機能を実装してみてください。

次のセクションでは、Bottleとテンプレートエンジンの連携について解説します。

Bottleとテンプレートエンジンの連携

Bottleは、SimpleTemplateというシンプルなテンプレートエンジンを内蔵しており、HTMLを動的に生成することができます。

ここでは、Bottleのテンプレートエンジンを使ったボタンやフォームの動的生成について解説します。

BottleのテンプレートエンジンSimpleTemplateの使い方

SimpleTemplateを使用することで、Pythonの変数をHTMLに埋め込むことができます。

以下のサンプルコードでは、テンプレートを使って簡単なHTMLを生成します。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    return template('<b>こんにちは、{{name}}さん！</b>', name='ユーザー')
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行すると、ブラウザに「こんにちは、ユーザーさん！」と表示されます。

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

テンプレートでボタンを動的に生成する

テンプレートを使用してボタンを動的に生成することも可能です。

以下のサンプルコードでは、ボタンのラベルを変数で指定しています。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    button_label = "クリックしてね"
    return template('<form action="/submit" method="POST"><button type="submit">{{label}}</button></form>', label=button_label)
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行すると、ボタンのラベルが「クリックしてね」と表示されます。

ボタンをクリックすると、/submitにPOSTリクエストが送信されます。

テンプレートでフォームの値を動的に表示する

フォームの値を動的に表示することもできます。

以下のサンプルコードでは、フォームから送信された名前を表示します。

from bottle import Bottle, run, request, template
app = Bottle()
@app.route('/', method='GET')
def index():
    return template('''
        <form action="/" method="POST">
            <label for="name">名前:</label>
            <input type="text" id="name" name="name">
            <button type="submit">送信</button>
        </form>
    ''')
@app.route('/', method='POST')
def submit():
    name = request.forms.get('name')
    return template('<b>こんにちは、{{name}}さん！</b>', name=name)
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行し、名前を入力して送信すると、「こんにちは、[入力した名前]さん！」と表示されます。

フォームの値が動的に表示されています。

テンプレートで条件に応じたボタンの表示

条件に応じてボタンを表示することもできます。

以下のサンプルコードでは、ユーザーの状態に応じて異なるボタンを表示します。

from bottle import Bottle, run, template
app = Bottle()
@app.route('/')
def index():
    is_logged_in = True  # ユーザーのログイン状態
    return template('''
        {{if is_logged_in}}
            <button type="button">ログアウト</button>
        {{else}}
            <button type="button">ログイン</button>
        {{/if}}
    ''', is_logged_in=is_logged_in)
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードを実行すると、is_logged_inがTrueの場合は「ログアウト」ボタンが表示され、Falseの場合は「ログイン」ボタンが表示されます。

条件に応じたボタンの表示が可能です。

これらの機能を活用することで、Bottleを使ったWebアプリケーションのインターフェースをより動的に、かつユーザーにとって使いやすくすることができます。

次のセクションでは、セキュリティとバリデーションについて解説します。

セキュリティとバリデーション

Webアプリケーションにおいて、セキュリティとデータのバリデーションは非常に重要です。

ここでは、Bottleを使用したフォームデータのバリデーションやCSRF対策、入力チェックの方法について解説します。

フォームデータのバリデーション

フォームから送信されたデータは、必ずバリデーションを行う必要があります。

以下のサンプルコードでは、名前の入力が必須であることを確認し、バリデーションを行います。

from bottle import Bottle, run, request, template
app = Bottle()
@app.route('/', method='GET')
def index():
    return template('''
        <form action="/" method="POST">
            <label for="name">名前:</label>
            <input type="text" id="name" name="name">
            <button type="submit">送信</button>
        </form>
    ''')
@app.route('/', method='POST')
def submit():
    name = request.forms.get('name')
    if not name:
        return template('<b>名前は必須です！</b>')
    return template('<b>こんにちは、{{name}}さん！</b>', name=name)
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードでは、名前が入力されていない場合にエラーメッセージを表示します。

バリデーションを行うことで、無効なデータの処理を防ぎます。

CSRF対策の実装方法

CSRF(Cross-Site Request Forgery)攻撃を防ぐためには、トークンを使用した対策が有効です。

以下のサンプルコードでは、CSRFトークンを生成し、フォームに埋め込む方法を示します。

import os
from bottle import Bottle, run, request, template
app = Bottle()
# CSRFトークンを生成する関数
def generate_csrf_token():
    return os.urandom(16).hex()
@app.route('/', method='GET')
def index():
    csrf_token = generate_csrf_token()
    return template('''
        <form action="/" method="POST">
            <input type="hidden" name="csrf_token" value="{{token}}">
            <label for="name">名前:</label>
            <input type="text" id="name" name="name">
            <button type="submit">送信</button>
        </form>
    ''', token=csrf_token)
@app.route('/', method='POST')
def submit():
    csrf_token = request.forms.get('csrf_token')
    # CSRFトークンの検証(ここでは簡略化のため省略)
    name = request.forms.get('name')
    return template('<b>こんにちは、{{name}}さん！</b>', name=name)
if __name__ == '__main__':
    run(app, host='localhost', port=8080)

このコードでは、CSRFトークンを生成し、フォームに埋め込んでいます。

実際のアプリケーションでは、トークンの検証を行う必要があります。

フォームの入力チェックとエラーメッセージの表示

ユーザーが入力したデータに対して、さらに詳細なチェックを行い、エラーメッセージを表示することが重要です。

以下のサンプルコードでは、名前の長さをチェックし、エラーメッセージを表示します。

from bottle import Bottle, run, request, template
app = Bottle()
@app.route('/', method='GET')
def index():
    return template('''
        <form action="/" method="POST">
            <label for="name">名前:</label>
            <input type="text" id="name" name="name">
            <button type="submit">送信</button>
        </form>
    ''')
@app.route('/', method='POST')
def submit():
    name = request.forms.get('name')
    if not name:
        return template('<b>名前は必須です！</b>')
    elif len(name) < 3:
        return template('<b>名前は3文字以上で入力してください。</b>')
    return template('<b>こんにちは、{{name}}さん！</b>', name=name)
if __name__ == '__main__':
    run(app, host='localhost', port=8080)