やること
アヤメデータの動的なグラフを表示するWEBアプリを開発する
参考文献
今回アプリを開発するにあたり、以下の文献を参考にしました。
前提
Flaskとは
FlaskはDjangoと並んで用いられるPythonのフレームワークで、Djangoと比較して軽量、高速、学習コストが低いという利点があるため、近年台頭してきているようです。
MVTとは
DjangoやFlaskを用いたアプリのアーキテクチャとしてはMVCやMVTがありますが、今回はMVTで全体の構成を考えてみました。MVTはModel,View,Templateをそれぞれ表し、以下の役割を果たします。
Model :ビジネスロジックを担当する
View :入力を受け取り、ModelとTemplateを制御する
Template :入出力を担当する
Pythonの環境構築
以下の記事を参考にpyenvを用いて環境構築しました。
依存ライブラリ
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にアクセスするとアプリが起動しました。
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
見た感じ、簡単に実装できそうですね！
Flaskは色んな機能があるので使いこなしていきたいです！