Dash⑭（コールバック／ボタン）

コールバック

コールバックは、インタラクティブなDashアプリケーションを作成するときに重要な機能です。

ユーザによるスライダーなどでの選択や、グラフ上でのマウスの動きをもとに、コールバックを利用することでインタラクティブなアプリケーションを構築できます。

ボタンクリック

ボタンをクリックするとテキストエリアへ入力された文字を見出しに反映するDashアプリケーションを作成します。

コールバックを実装するためには下記の設定を行います。

  1. レイアウトの作成で、各コンポーネントにIDを設定。（10行目、12行目、15行目）
  2. コールバック関数を定義。（19～25行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1(id='head-title'),
        dcc.Textarea(
            id='text-content',
            value='初期値',
        ),
        html.Button(id='btn1', n_clicks=0, children='submit')
    ]
)

@app.callback(
    Output('head-title', 'children'),
    Input('btn1', 'n_clicks'),
    State('text-content', 'value')
)
def update_title(n_clicks, text_value):
    return text_value

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数は次のように動作します。

  1. コールバック関数の引数に、InputインスタンスとStateインスタンスに指定された属性が割り当てられる。
  2. コールバック関数はInputインスタンスで指定した属性が更新されると呼び出され、その返り値をOutputインスタンスで指定した属性で渡す。

コールバック関数の関数名と引数名は任意です。(24行目)

上記ソースを実行すると、コンソールにURLが表示されるのでブラウザで表示します。

[ブラウザで表示]

テキストエリアに文字を入力してボタンを押すと、上部のテキストを変更されます。