Streamlit入門 – テーマの変更, ページの設定

streamlit入門

さて、前回はこちらの記事でフォームの作成方法を見てきました。

これで主要なコンポーネントは大体ご紹介しましたので、今回は見た目を変更する方法をご紹介したいと思います。

公式のドキュメントはこちら(テーマの変更)こちら(ページの設定)です。

では見ていきましょう。

Twitterで新規記事などについて発信し始めたのでフォローしていただけると励みになります!!↓
フォローする

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_conffig()を呼び出し、以下の引数を設定することで設定を変えることができます。

  • 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の機能を精一杯使って、オシャレな見た目にしていただければと思います。

では、また!!

mm_0824

システム開発会社や銀行・証券会社で統計や金融工学を使ったクオンツ・分析業務を長く担当してきました。

現在はコンサルティング会社のデータ・サイエンティストとして機械学習、自然言語処理技術を使ったモデル構築・データ分析を担当しています。

このサイトでは論文や本、Udemyなどの学習ツールについての情報発信をしていきます。

皆様の業務や勉強のお役に立てれば嬉しいです。

Twitterでも新規記事についての発信をし始めたので是非フォローしていただけると嬉しいです!↓

フォローする
streamlit入門 データ可視化
フォローする
楽しみながら理解するAI・機械学習入門

コメント

タイトルとURLをコピーしました