⛩️

Flaskでアプリ開発に入門する

2024/06/10に公開2

やること

アヤメデータの動的なグラフを表示するWEBアプリを開発する

参考文献

今回アプリを開発するにあたり、以下の文献を参考にしました。
https://www.shoeisha.co.jp/book/detail/9784798175164

前提

Flaskとは

FlaskはDjangoと並んで用いられるPythonのフレームワークで、Djangoと比較して軽量、高速、学習コストが低いという利点があるため、近年台頭してきているようです。

MVTとは

DjangoやFlaskを用いたアプリのアーキテクチャとしてはMVCやMVTがありますが、今回はMVTで全体の構成を考えてみました。MVTはModel,View,Templateをそれぞれ表し、以下の役割を果たします。
Model :ビジネスロジックを担当する
View :入力を受け取り、ModelとTemplateを制御する
Template :入出力を担当する

Pythonの環境構築

以下の記事を参考にpyenvを用いて環境構築しました。
https://zenn.dev/sion_pn/articles/4418eeda7c62d0

依存ライブラリ

pip install Flask
pip install plotly
pip install pandas

Views

ViewsはModelsとTemplateをつなぐエージェントの役割を果たし、後述するTemplateを用いてホーム画面とグラフの画面を表示します。

from flask import render_template
from models import get_plot_html

def home():
    return render_template('home.html')

def plot():
    plot_html = get_plot_html()
    return render_template('plot.html', plot_html=plot_html)

Models

Modelsでは、plotlyというライブラリで動的なグラフを作成し、HTMLに変換します。

import plotly.express as px
import plotly.io as pio

def get_plot_html():
    # アヤメデータを用いてグラフを作成
    df = px.data.iris()  
    fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species",
                     title="Iris Dataset - Sepal Width vs Sepal Length")

    # グラフをHTML形式に変換
    plot_html = pio.to_html(fig, full_html=False)
    return plot_html

Template

Templateはホーム画面とグラフを表示するためのHTMLファイルです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    <h1>Welcome to the Flask App</h1>
    <p><a href="/plot">Go to Interactive Plot</a></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Plot</title>
</head>
<body>
    <div>
        {{ plot_html|safe }}
    </div>
    <p><a href="/">Back to Home</a></p>
</body>
</html>

結果表示

python main.pyを実行して http://127.0.0.1:5000にアクセスするとアプリが起動しました。

main.py
from flask import Flask
from views import plot, home

app = Flask(__name__)

# URLルーティング
app.add_url_rule('/', 'home', home)
app.add_url_rule('/plot', 'plot', plot)

if __name__ == '__main__':
    app.run(debug=True

ホーム画面

グラフ

コメントなど

そんなに難しくないだろうと思って始めたら動的なグラフを作成するのにjavascriptが必要ということに途中で気づき、慌ててそれを回避する方法を探すという初心者ムーブ全開でした。また、Pythonの環境構築ではこれまでJupyterを主戦場としてきた自分にとっては一苦労で、pyenvを使う知恵を授けて下さった先輩にはこの場を借りてお礼申し上げます。
ということで引き続き精進していかねばと感じたので、今後はLLMまわりの機能を追加したりを試していきたいと思います。

ヘッドウォータース

Discussion

jemiyajemiya

見た感じ、簡単に実装できそうですね!