Streamlitの基本操作: 色々なテキスト（文字列）を表示させる

StreamlitはPythonベースのWebアプリ開発フレームワークです。その特徴は、Webアプリに関する開発経験や知識が不要で、numpy、pandas、matplotlibといったPythonの基本的なライブラリが利用できれば、ブラウザベースの簡易的なダッシュボードを作ることができます。

Streamlit ではPythonコードに直接表示するコンポーネントを書いていきます。ここでは、よく使う基本的なコンポーネントのうち、文字列を表示させるためのコンポーネントの紹介と使用例を紹介します。

テキスト表示

テキストを表示するための方法はいくつかあります。以下の表に代表的なものを挙げます。詳細は公式ドキュメントを参照してください。

上記の中でst.writeは実は特殊な関数で、後述するデータフレームやグラフなどもwriteを利用することで表示できるようになります。

他にも、ヘッダースタイルの文字列の表示をするst.headerなどがありますが、st.markdownなどで賄うことができます。気になる方は、API referenceを参照してください（英語ですが、簡潔ですし、利用例と合わせて書かれているのでわかりやすいです）。

利用例

上記の関数を使った例は以下のようになります。

import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

st.title("Streamlit Text Example")

st.markdown("""
## 概要
このページは、テキスト表示機能の具体例を記述するものです。

### 構成
- [st.write](https://docs.streamlit.io/library/api-reference/write-magic/st.write): 色々表示できる
- [st.code](https://docs.streamlit.io/library/api-reference/text/st.code): シンタックスハイライトしたコードを表示できる
""")

st.write("数値: ", 2)
st.write("配列も表示可能: ", np.random.normal(size=5))

body = """
import numpy as np
a = np.random.normal(0, 1, size=500)
"""
st.code(body, language="python")

上記のコードを実行すると以下のようなWebアプリが作成できます。

streamlit run src/streamlit/app_text.py

解説

主なポイントを解説します。

import streamlit as st

streamlitをインポートします。これで、Streamlitの機能が使えるようになります。

st.title("Streamlit Text Example")

タイトルスタイルでテキストを表示します。引数に文字列を指定すれば、そのまま文字列が表示されます。anchorオプションを指定することで、アンカーを指定できます（デフォルトでは入力テキストがアンカーになる）。

st.markdown("""
## 概要
このページは、テキスト表示機能の具体例を記述するものです。

### 構成
- [st.write](https://docs.streamlit.io/library/api-reference/write-magic/st.write): 色々表示できる
- [st.code](https://docs.streamlit.io/library/api-reference/text/st.code): シンタックスハイライトしたコードを表示できる
""")

Markdown形式（GitHub Flavored Markdown）でドキュメントを記載します。見出しレベルの指定や箇条書きなども対応しています。基本的には、Markdown形式でドキュメントを書いていくと楽なのではないかと思います。

st.write("数値: ", 2)
st.write("配列も表示可能: ", np.random.normal(size=5))

st.writeで文字列を表示しています。カンマ区切りで文字列を繋げていくこともできます。テキストだけでなく、数値も入力できます。また、辞書(dict)、配列やリストなどもst.writeで表示することができます。

body = """
import numpy as np
a = np.random.normal(0, 1, size=500)
"""
st.code(body, language="python")

st.codeでシンタックスハイライトされたソースコードを表示することができます。languageオプションで言語を指定できます（デフォルトでPython）。指定できる言語はドキュメントを参照してください。

まとめ

ここでは、Streamlitに文字列などを表示する例を解説しました。

関数を呼び出して、テキストを直接記入するだけで、Webアプリに表示されることが確認できました。Streamlitは、関数を呼び出した箇所にそのままテキストが表示されるので、とてもわかりやすいですね。その分、レイアウトをカスタマイズすることは難しいですが、簡易的なダッシュボードを作成するという点では、

参考

• データ可視化のためのプラットフォームの基礎: Streamlit