さて、前回はこちらの記事でフォームの作成方法を見てきました。
これで主要なコンポーネントは大体ご紹介しましたので、今回は見た目を変更する方法をご紹介したいと思います。
公式のドキュメントはこちら(テーマの変更)とこちら(ページの設定)です。
では見ていきましょう。
Webアプリの見た目を変更する
StreamlitではCSSは使わないため、それほど細かく見た目を設定することはできません。
ただ、一部については簡単に設定できますので、それらを見ていきたいと思います。
特にあとで説紹介する表示画面の幅の設定はダッシュボードを作成する際には必要になる場合も多いと思いますので覚えていただければと思います。
まずは、テーマ色の変更からです。
設定ファイルを使ったテーマの変更
背景色や文字の色・フォントを変更することができます。
例えばダッシュボードをダークモードにしたいといったこともあるかと思います。
一般的にはCSSを使って色を設定しますが、streamlitでは設定ファイルで簡単に設定することができます。
動かしたいpyファイルのあるフォルダに“.streamlit”というフォルダを作成し、その中に“config.toml”というファイルを作成します。
このconfig.tomlファイルに設定を書いていきます。
config.tomlファイルでは他にもいくつか設定できますが、ここではテーマの変更方法のみご紹介します。
テーマの変更で設定できるのは以下の5つです。
- primaryColor
チェックボックスをチェックしたときやスライダーの点の色 - backgroundColor
メインの背景 - secndaryBackgroundColor
インプットボックスやサイドバーなどの背景 - textColor
テキストの色 - font
フォント
書き方は以下のようになります。
[theme] primaryColor="#ff0000" # 赤 backgroundColor="#000000" # 黒 secondaryBackgroundColor="#696969" # ダークグレー textColor="#FFFFFF" # 白 font="sans serif"
まず、テーマを設定するという意味の[theme]をはじめに書きます。
その下に各設定を書いていきます。
では、config.tomlファイルに上記の設定をして、pyファイルの方には次のような適当な画面を作成して見てみましょう。
st.header('Configuration： Theme')
st.checkbox(label='Check')
st.slider(label='Slider')
st.selectbox(label='Choose Your Favourite', options=['Snowpeak', 'Rakuten', 'Toyota Motors'])
このようにダークモードっぽい感じの画面になります。
与えたい印象によってデフォルト設定から変えるのも良いですね。
ページの設定：set_page_config
次に、ファビコンを付けたり、表示する幅を設定したりする方法について見ていきます。
ファビコンやページタイトルは世に出すのであれば必ず設定したいですね。
st.set_page_config()を呼び出し、以下の引数を設定することで設定を変えることができます。
- page_title
タブに表示されるページのタイトルを設定することができます。
デフォルトは“ファイル名・Streamlit”になっています。 - page_icon
タブに表示されるアイコン(ファビコン)を設定します。
画像を設定することができます。 - layout
centeredを指定すると幅が小さめ、wideを指定すると幅が広くなります。
デフォルトはcenteredです。
ダッシュボードを作成する際はwideの方がよいと思います。 - initial_sidebar_state
画面を表示したときのサイドバーの表示方法を設定します。
expandedを指定するとサイドバーが開いていて、collapsedを指定すると閉じています。
autoを指定すると基本的は開いていますが、スマホ画面などのような幅が小さい画面だと閉じています。
デフォルトはautoです。 - menu_items
メニュー欄にある“Get Help”、“Report a bug"を押したときに飛んでいくURLを設定したり、”About”メニューを押したときの説明を設定します。
{“Get Help”: "...", “Report a bug": "...", "About": "..."}というようなディクショナリ形式で設定します。
"About"はマークダウン形式で書くことができます。
実際に見た方がわかりやすいので、見ていきましょう。
以下では、ページタイトル、ファビコンを設定し、レイアウトはwide、ステータスバーはautoとし、menu_itemを設定しています。
import streamlit as st
import time
from PIL import Image
image = Image.open('スライム.jpg')
st.set_page_config(
page_title="Slime Creator",
page_icon=image,
layout="wide",
initial_sidebar_state="auto",
menu_items={
'Get Help': 'https://www.google.com',
'Report a bug': "https://www.google.com",
'About': """
# 画像生成風アプリ
このアプリは画像生成風アプリで、実際にはキングスライムしか表示しません。
"""
})
まず、ページタイトルとファビコンですが以下のように表示されます。
続いて、レイアウトをwideにした結果です。
以下のように横に広くなっています。
wideではなくcenteredを指定したりデフォルト設定の場合は以下のように幅が狭くなっています。
続いて、menu_itemのAboutの部分を見てみましょう。
下の画像の右側のハンバーガーメニューをクリックして、赤枠で囲ったAboutをクリックします。
すると、以下のようにマークダウン形式で設定した説明書きが表示されます。
まとめ
以上が設定のご紹介でした。
Webアプリ、ダッシュボードのテクニカルな部分ではありませんが、世に出す際には設定しておきたいですね。
私には苦手が、みなさんはStreamlitの機能を精一杯使って、オシャレな見た目にしていただければと思います。
では、また！！