KnowHow

技術的なメモを中心にまとめます。
検索にて調べることができます。

Dash でBootstrapを使いたい（オフライン）

登録日 ：2023/04/12 04:19
カテゴリ ：python dash

デフォルトでは、BootstrapをCDN（オンライン）を参照してしまう。
業務環境によっては、どうしてもオフライン（インターネットに接続出来ない環境）でしようしたいことがある。

そこで、Bootstrapをダウンロードしassetsフォルダに保管
その後、

Force offline usage (also fails to render graph, issue #46)
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
を追記することで、Bootstrapのレイアウトをオフラインでも活用できないだろうか。

フォルダ構成
Root Dir
| app.py
| assets
| main.css
| sub.css
|_ ***

https://github.com/plotly/dash/issues/46

https://qiita.com/Yusuke_Pipipi/items/b74f269d112f180d2131

(結論）この方法でうまくいきそうである
１　Bootstrap 5.2.3のダウンロード
https://getbootstrap.com/docs/5.2/getting-started/download/
＞Compiled CSS and JSからダウンロードしよう。

２　assetsフォルダ保管
ダウンロードしたBootstrap（Zip）ファイルを解凍して得られるcss, jsフォルダ一式を、dashのプログラムがあるディレクトリにassetsフォルダを作成して保管する
Root Dir
| app.py
| assets
| css（フォルダ一式）
| js（フォルダ一式）
|_ ***

３　サンプルコードを以下に記載する
ポイントは、external_stylesheetsオプションは不要であり
app=dash.Dash()
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True
と記述する

（注意）dash_bootstrap_componetsは利用するのでpipインストールしておくこと
「pip install dash-bootstrap-components」
https://dash-bootstrap-components.opensource.faculty.ai/

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

# app = dash.Dash(external_stylesheets=[dbc.themes.FLATLY])
app=dash.Dash()
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

sidebar = html.Div(
    [
        dbc.Row(
            [
                html.P('Sidebar')
            ],
            style={"height": "5vh"}, className='bg-primary text-white'
        ),
        dbc.Row(
            [
                html.P('Categorical and Continuous Variables')
            ],
            style={"height": "50vh"}, className='bg-secondary text-white'
        ),
        dbc.Row(
            [
                html.P('Target Variables')
            ],
            style={"height": "45vh"}, className='bg-dark text-white'
        )
    ]
)
content = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.P('Distribution of Categorical Variable'),
                    ],
                    # className='bg-white'
                ),
                dbc.Col(
                    [
                        html.P('Distribution of Continuous Variable')
                    ],
                    # className='bg-dark text-white'
                )
            ],
            style={"height": "50vh"}
        ),
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.P('Correlation Matrix Heatmap')
                    ],
                    # className='bg-light'
                )
            ],
            style={"height": "50vh"}
        )
    ]
)

app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(sidebar, width=3, className='bg-light'),
                dbc.Col(content, width=9)
            ],
            style={"height": "100vh"}
        ),
    ],
    fluid=True
)


if __name__ == '__main__':
    app.run_server(debug=True, port=1234)

戻る