plotly/Dash/Flaskメモ

　Webアプリケーションは、CGI (Common Gate Interface) と呼ばれるプログラムをHTTPサーバから呼び出して実行されます。
CGIプログラムはどの言語で書いても構いませんが、以下のインターフェースを持ちます。

HTMLヘッダーを含むHTMLを標準出力に出力する
入力をHTTP GETあるいはPOSTで受け取る
必要に応じてデータベースサーバなどのバックエンドを利用する

また、HTML出力に、HTML5やCSS5、Javascriptを使うことで、動的・インターラクティブなアプリケーションを作成することが可能です。

　しかしながら、上記のようなプログラムをHTML/CSS/Javascriptを使って作成するには多くの知識とプログラムコードが必要となり、現在では、単純なWebアプリを除き、CGI形式が使われることは少なくなりました。上記の機能は、"フレームワーク"と呼ばれるWebアプリ用ライブラリにまとめられ、複雑なHTML/CSS/Javasciptのコードを隠ぺいし、簡単にプログラムを作成できるようなっています。

　本ページでは、pythonを使ってWebアプリを作る際のメモをまとめます。pythonのフレームワークとしてはDjangoが有名ですが、多機能である一方、習得に必要な学習コストが大きいという問題があります。一方で、Flaskは軽量で比較的簡単に習得可能であり、データ解析などのダッシュボードとして利用されるDashはFlaskで動いています。Plotlyはpythonの可視化ライブラリの一つで、matplotlibよりもインタラクティブなグラフを描くことができますが、Flask/Dash上で稼働するWebアプリとして利用さるように作られています。一方、FastAPIは最新のフレームワークの一部であり、軽量・高速という特長があり、今後は主流になっていくものと考えられます。

　上記のことを考え、本ページでは以下の項目を扱います。

Plotlyをつかったpythonプログラムの作成法。明示的にHTTPサーバを起動しなくてもWeb browserを利用して可視化する
Plotly Dashを使ったpythonプログラムの作成法。
・ callback関数
・ decolator
Flaskを使ったWebアプリの作成法。
上記アプリのデプロイ (インターネット環境で実運用に必要なセットアップ) 方法

Plotlyをつかったpythonプログラムの作成法

　一般的なWebフレームワークでは、フレームワークライブラリにHTTPサーバが用意されており、まずHTTPサーバを起動し、表示されたURLにアクセスすることでアプリを実行します。

　Plotlyでは、plotly.graph_objects を利用して .show() を実行することにより、Plotly内部でHTTPサーバの立ち上げとアプリの実行を行ってくれるため、matplotlibと同様の使い方をすることができます。

　以下のプログラム plotly_demo1.py を実行すると、http://127.0.0.1:53763/ を起動してグラフを表示します。

ここをクリックして展開

import numpy as np
import plotly.graph_objects as go

xs = np.linspace(0, 10, 100)
sins = np.sin(xs)
randoms = np.random.rand(100)

fig = go.Figure(data=[
    go.Scatter(x=xs, y=sins, name="sin"),
    go.Scatter(x=xs, y=randoms, name="random"),
    ])
fig.show()

Plotly Dashをつかったpythonプログラムの作成法

次の例では、pythonプログラムは .run_server()を呼び出し、アクセスURLを表示したうえでHTTPサーバを起動します。

ここをクリックして展開

from dash import Dash, dcc, html, Input, Output
import plotly_express as px

app = Dash(__name__)

app.layout = html.Div([
html.H4('Analysis of Iris data using scatter matrix'),
dcc.Dropdown(
    id="dropdown",
    options=['sepal_length', 'sepal_width', 'petal_length', 'petal_width'],
    value=['sepal_length', 'sepal_width'],
    multi=True
    ),
    dcc.Graph(id="graph"),
    ])

@app.callback(
    Output("graph", "figure"),
    Input("dropdown", "value"))
    def update_bar_chart(dims):
    df = px.data.iris() # replace with your own data source
    fig = px.scatter_matrix(df, dimensions=dims, color="species")
    return fig

app.run_server(debug=True)

このプログラムを実行すると、コンソールに以下の表示が出ます。

PS D:\> python .\plotly2.py
Dash is running on http://127.0.0.1:8050/

* Serving Flask app 'plotly2'
* Debug mode: on

Webブラウザを起動してhttp://127.0.0.1:8050/ にアクセスすると、以下のようなページが表示されます

Dashのcallback

上記のPlotly Dashアプリでは、上段のドロップボックスを変更することで、グラフの表示を変えることができます。
ドロップボックスの選択を変更した場合、callback関数を呼び出しますが、Dashではcallback関数の定義が高度にカプセル化されています。
また、Flask/Dashでは、callback関数の定義では、decolatorが使われています。

ここをクリックして展開

@app.callback(
    Output("graph", "figure"),
    Input("dropdown", "value"))
    def update_bar_chart(dims):
        df = px.data.iris()
        fig = px.scatter_matrix(df, dimensions=dims, color="species")
        return fig

@app.callbackでdecolateされた関数はcallbackとして認識されます。
引数には Output(), Input(), Status()の3種類を受け取ります。
Input()の第一引数のId "dropdown" に対応するWebコンポーネントの "value" (第二引数) の値が変更されると、
@app.callback() update_bar_chart(dims) が呼び出されます。
@app.callback() update_bar_chart() はIput()、Status()の値を引数として受け取り、Output()に渡す値を戻します
update_bar_chart()からの返り値は、Output()の第一引数のId "graph" に対応するWebコンポーネントの "figure" (第二引数) 属性に設定され、Webページが更新されます

plotly/Dash/Flaskメモ

Plotlyをつかったpythonプログラムの作成法

Plotly Dashをつかったpythonプログラムの作成法

Dashのcallback

pythonのデコレータ