python(flask)+bootstrapでcsv表示/ダウンロード機能を作る

こんにちは、こちょすです。

今回はpythonのフレームワークであるflaskを使って、csvファイルを読み込み、その結果を表示・ファイルダウンロードをする機能を構築したいと思います！

画面表示ではcssのフレームワークであるbootstrapも少し使っていますので、pythonを勉強している方だけでなく、フロント側の勉強を始めたい方にもおすすめの記事となっておりますので、最後までみていただけると嬉しいです！

こんな方におすすめ

flaskを使ったことがないけど使ってみたい人
pythonを使ったcsvファイルの処理を実装したい人
flaskを使ってWEBサービスを構築してみたい人

では今回も張り切っていきましょう！💪

python(flask)+bootstrapを使ったWEBサービスの概要説明

今回はflaskを使って初めてWEBアプリを作ってみたい方向けということで、かなりシンプルな構成にしています。

flaskはもちろんデータベースなども扱うことができますが、実装が複雑になってしまうので、今回はcsvファイルを読み込んで画面に描画する仕組みにしたいと思います！

flaskを使ってcsvを読み込むための処理をpythonで書く

ではアプリの全体像が掴めたところで、早速csvファイルを読み込む部分を作っていきます！

※flaskの環境構築については今回は省略しますので、もしわからない方はネットで調べてみてください！（Djangoに比べるとflaskの環境構築は断然楽ちんです！）

今回はサンプルcsvとして、日付と、その日に食べた果物がずらっと並んでいるようなものにしましょう！

ファイル名	date_fruit.csv
文字コード	UTF-8

ファイルイメージ：

inputファイルを配置する

まずは今回のflaskアプリ用のフォルダ（以降ディレクトリといいます）を作成します。
ディレクトリ名はなんでもよいですが、僕は「flask_csv_display」という名前にしました。
このディレクトリの配下に、inputというサブディレクトリを作成し、その中に先ほど定義したcsvファイルを配置します。

構成は以下のようになります。

flaskの処理を書いていく

次に、flask用のpythonファイル（今回は「csv_display.py」とします）を作成し、その中に以下のように記述します。

from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)

@app.route('/')
def csv_display(): 
    date_fruit_list = pd.read_csv("./input/date_fruit.csv").values.tolist()
    print(date_fruit_list)
    return render_template('date_fruit.html', title='食べた果物記録', date_fruit_list=date_fruit_list)
## おまじない
if __name__ == "__main__":
    app.run(debug=True)

短いですが、たったこれだけです！

処理結果の描画にboostrapを使うことで見た目を整える

次はhtmlファイルを書いていきます。先ほど上で書いたコードの最後に、return render_template('date_fruit.html'・・・・）という記載がありますが、この「date_fruit.html」を書いていきます。

まずはtemplatesディレクトリを作成し、その中にdate_fruit.htmlとlayout.htmlを作ります。

構成は以下のようになります。

date_fruit.htmlの中には以下のように記述をしてください。

{% extends "layout.html" %}
{% block content %}
<h3>食べた果物記録</h3>
こんにちは。こちょすさん。

    <table class="table">
        <thead class="thead-light">
        <tr>
            <th>日付</th>
            <th>果物</th>
        </tr>
        </thead>
        <tbody>
        {% for list in date_fruit_list %}
            <tr>
                <td>{{ list[0] }}</td>
                <td>{{ list[1] }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

次にlayout.htmlの中には以下のように記述をしてください。

結構ごちゃごちゃ書いていますが、これはbootstrapを使って綺麗に描画するための記述です。最初は慣れないかもしれませんが、おまじないだと思って毎回書くようにしておくと良いと思います！

<!doctype html>
<html>

    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
        <title>{{ title }}</title>
      </head>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
<body>
{% block content %}
<!-- ここにメインコンテンツを書く -->
{% endblock %}
</body>
</html>

ここまでできたら、最後に、consoleから以下のコマンドを打ってflaskアプリを起動します。

python csv_display.py

テスト環境であれば、「http://127.0.0.1:5000/」にアクセスすれば以下のように表示されていることが確認できると思います。

描画した画面の内容をcsvファイルとしてダウンロードできるようにする

では最後に、画面のダウンロードボタンを設置し、そこからcsvファイルとしてダウンロードできるようにしましょう！

まず、htmlのほうにダウンロードボタンを配置します。
以下をtableタグの前に貼り付けましょう。

<a href='/export'>csvダウンロード<button type="button" class="btn btn-primary" >Download</button></a>
<table class="table">
    <thead class="thead-light">
    <tr>
        <th>日付</th>
        <th>果物</th>
・・・

次にpythonファイルのほうで、このボタンが押された時の処理を記述していきます。
「@app.route("/export")」以降をおまじないの前に追記しています

@app.route('/')
def csv_display(): 
・・・
    return render_template('date_fruit.html', title='食べた果物記録', date_fruit_list=date_fruit_list)


@app.route("/export")
def export_action():
    # 現在のディレクトリを取得
    path = os.path.abspath(__file__)[:-14]
    print(path)
    return send_from_directory(
        directory=path + '/input',
        filename='date_fruit.csv',
        as_attachment=True,
        attachment_filename='date_fruit.csv',
    )
## おまじない
・・・

これでコーディングとしては完了です。アプリを起動して、画面をみてみると、以下のようにダウンロードボタンが追加されているはずです。