Dash のチュートリアルを触ってみる．

#本日は　

Python だけでWebアプリが作れちゃうというのがウリの
[Dash by plotly](https://plot.ly/products/dash/)

を触ってみます． サンプルコードの写経がだるかったので簡易版を作ってみました．

# install

公式ページから抜粋　

- https://plot.ly/dash/getting-started#installation

```shell-session
$ pip install dash==0.19.0  # The core dash backend
$ pip install dash-renderer==0.11.1  # The dash front-end
$ pip install dash-html-components==0.8.0  # HTML components
$ pip install dash-core-components==0.14.0  # Supercharged components
$ pip install plotly --upgrade  # Latest Plotly graphing library
```

# Sample Code

- https://plot.ly/dash/getting-started#dash-app-layout

のCoreComponentsのセクションを参考にシンプルにしました．

```py3:example.py

"""
The dash_core_components include a set a higher-level components
like dropdowns, graphs, markdown blocks, and more...
Like all Dash components, they are described entirely declaratively.
Every option that is configurable is available as a keyword argument of the
component.
"""

import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash()

dropdown = [html.Label('Dropdown'),
            dcc.Dropdown(options=[
                {'label': 'A', 'value': 'a'},
                {'label': 'B', 'value': 'b'},
                {'label': 'C', 'value': 'c'}],
            value='b')]

multi_select_dropdown = [html.Label('Multi-Select Dropdown'),
                         dcc.Dropdown(options=[
                             {'label': 'P', 'value': 'p'},
                             {'label': 'Q', 'value': 'q'},
                             {'label': 'R', 'value': 'r'}],
                         value=['q', 'r'],
                         multi=True)]

radio_item = [html.Label('Radio Items'),
              dcc.RadioItems(options=[
                  {'label': 'X', 'value': 'x'},
                  {'label': 'Y', 'value': 'y'},
                  {'label': 'Z', 'value': 'z'}],
              value='z')]

check_box = [html.Label('Checkbox'),
             dcc.Checklist(options=[
                 {'label': 'S', 'value': 's'},
                 {'label': 'T', 'value': 't'},
                 {'label': 'U', 'value': 'u'}],
             values=['s', 'u'])]

slider = [html.Label('Slider'),
          dcc.Slider(min=0,
                     max=5,
                     marks={i:i for i in range(5)},
                     value=3)]

text_input=html.Div([html.Label('Text input'),
                    html.Br(),
                    dcc.Input(value='input here',type='text'),
                    html.Br()])

app.layout = html.Div([
    *dropdown,
    *multi_select_dropdown,
    *radio_item,
    *check_box,
    text_input,
    *slider,
], style={'columnCount': 2})


def main():
    app.run_server(debug=True, port=8800)

if __name__ == '__main__':
    main()
```

コードの量が多いのですが，　

1. 各モジュールをインポート．
2. `app=dash.Dash()` でインスタンスを作成
3. HTMLのタグ，　要素を入れたいときは　`html.<HTMLのタグ，要素>`　というようにインスタンスを作る．
4. UI部品（コンポーネント）が欲しいときは dcc.<コンポーネント名>　といったようにインスタンスを作る．
5. UI全体の構成を `app.layout` で指定する
6. `app.run_server()` を呼び出す．

というようにコードを書いていきます．

# 実行例

```shell-session
$ python example.py
```
を実行したのちブラウザを立ち上げて `１２７．０．０．１:8800` にアクセスする．

<img width="634" alt="スクリーンショット 0029-11-28 午後8.03.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/135978/4a531b29-3699-807a-20ec-05cc3b370df2.png">

上図のようなものが出力されればOKです．
PythonとおぼろげなHTMLのタグの知識があればリッチなUIが作れちゃう．
これで可視化ツールを作ってみたいですね．

今日はこんなところでおしまい．