Skip to content
チュートリアル
Streamlit
Streamlitアプリの見た目とテーマを簡単に変更する方法

Streamlitテーマ設定: アプリの背景とテーマの変更方法

Olaf Källström
Name
Olaf Källström

Published on

データ愛好家であれば、Streamlitのことを聞いたことがあるかもしれません。データサイエンスコミュニティでは話題になっており、その理由はなんと言っても優れた性能です。Streamlitはウェブアプリの開発を効率化する革命的なツールです。しかし、Streamlitは単にデータに関するものではありません。見た目にもこだわっています。はい、聞きましたよ！Streamlitを使用して、アプリの見た目とテーマをカスタマイズできます。まるで雪片の中の一つみたいに、ユニークなアプリを作り上げましょう。Streamlitテーマ設定の世界へ、一緒に潜っていきましょう。

Streamlitテーマ設定: 簡単に説明すると

Streamlitは、コーディングの世界での宝石です。これはオープンソースのPythonライブラリであり、ウェブアプリの開発から退屈な作業を取り除きます。Streamlitを使用すると、「Python」と言う前に、対話型でデータに特化したウェブアプリを作成できます。HTML、CSS、JavaScriptの一行も知らなくても大丈夫です。

Streamlitとは？

以下のような状況を想像してみてください：Pythonのスクリプトを書き上げました。それは美しい、傑作です。しかし、今はそれを世界と共有したいと思っています。それをウェブアプリに変えたいのです。過去には、HTML、CSS、JavaScriptを学ばなければなりませんでした。ですが、Streamlitを使えば、Pythonだけで簡単にスクリプトをウェブアプリ化できます。まさに飛びぬけたパフォーマンスです！

Streamlitテーマ設定: アプリをカスタマイズする新しい方法

しかし、Streamlitの利点は、スピードや効率化だけではありません。あなたは、色違いカメレオンのように、アプリの見た目とテーマを簡単に変更することもできます。背景色を変更したいですか？とても簡単です。フォントの種類を変更したいですか？問題ありません。Streamlitを使用すると、制限なしでアプリをカスタマイズできます。

カスタムテーマ、ダークモード、ライトモード

それだけではありません。Streamlitのテーマ設定では、カスタムテーマを作成することもできます。ブランドやスタイル、気分に合わせたテーマを作成できます。ダークで神秘的な雰囲気にしたいですか？ダークモードを試してみましょう。明るくさわやかな雰囲気にしたいですか？ライトモードを試してみましょう。Streamlitなら、あなたが宇宙のマスターです。

Streamlit内でのデータ分析やデータ可視化アプリを無料で作成したいですか？

PyGWalker (opens in a new tab)は、簡単にTableauのようなUIをあなた自身のStreamlitアプリに組み込むためのPythonライブラリです。 この強力なデータ可視化PythonライブラリによるStreamlitアプリの強化手順を詳しく説明した、Sven from Coding is Fun (opens in a new tab)が制作した素晴らしいビデオをチェックしてみてください！


PyGWalkerコミュニティへの大きな貢献に感謝します。Svenさんと彼の素晴らしい貢献 (opens in a new tab)に特別な感謝を表します！

さらに、PyGWalkerの例をもっと見るには、PyGWalker GitHubページ (opens in a new tab)もチェックしてみてください。

Streamlitアプリのカスタマイズ: 背景色からフォントまで

それでは、肝心の話に移りましょう。Streamlitアプリをカスタマイズするには、とても簡単です。

背景色の変更

Streamlitアプリの背景色を変更するには、わずかなコードを追加するだけで大丈夫です。次に示すコードの例をご覧ください：

[theme]
backgroundColor = "#F0F0F0"

このコードは背景色を薄いグレーに変更します。"#F0F0F0"の部分を任意の色に置き換えることができます。選択肢は無限大です！

Streamlitでのフォントのカスタマイズ

フォントはアプリの命です。プロフェッショナル、楽しい、ユニークな見た目を作り出すことができます。Streamlitアプリのフォントをカスタマイズするには、次のコードを使用できます：

[theme]
font = "Helvetica Neue"

このコードはフォントを「Helvetica Neue」に変更します。任意のフォントに「Helvetica Neue」の部分を置き換えることができます。ただし、フォントはGoogle Fontを使用する必要があります。

設定オプションとコマンドラインの使用

Streamlitにはさまざまな設定オプションも用意されています。これらのオプションを使用すると、テーマやレイアウトなど、アプリのさまざまな要素を制御することができます。これらのオプションは、コマンドラインからアクセスできます。たとえば、テーマを設定するには、次のコマンドを使用できます：

streamlit config set [theme]

Streamlitの高度なカスタマイズ: 背景画像とCSS

冒険心がある方は、Streamlitのカスタマイズをさらに進めることもできます。背景画像の追加やCSSファイルの使用によるUIのカスタマイズを行うことができます。どのような方法があるか見てみましょう。

背景画像の追加

Streamlitアプリに背景画像を追加するには、次のコードを使用できます：

st.markdown(
    """
    <style>
    .reportview-container {
        background: url("https://www.example.com/image.jpg");
    }
   </style>
    """,
    unsafe_allow_html=True
)

このコードはアプリに背景画像を追加します。"https://www.example.com/image.jpg"の部分を自分の画像のURLに置き換えることができます。 (opens in a new tab)

CSSファイルの使用

さらに進んで、UIのカスタマイズにCSSファイルを使用することもできます。レイアウトの変更、アニメーションの追加など、さまざまなカスタマイズが可能です。次のようにすれば、CSSファイルを使用できます：

st.markdown(
    """
    <link rel="stylesheet" type="text/css" href="https://www.example.com/style.css">
    """,
    unsafe_allow_html=True
)

このコードはアプリにCSSファイルをリンクします。"https://www.example.com/style.css"の部分を自分のCSSファイルのURLに置き換えることができます。 (opens in a new tab)

Streamlitテーマ設定: さらに深く掘り下げる

Streamlit テーピング

基本的な内容をカバーしたので、Streamlitのテーマ設定について深く掘り下げてみましょう。メインのカラーや一般的な設定オプションから、より視覚的に魅力的なアプリにするための少しのコントラストの追加まで、さまざまな要素について調査していきます。

メインカラー、セカンダリー背景カラー、およびテキストカラー

Streamlitでは、アプリのメインカラー、セカンダリー背景カラー、およびテキストカラーを変更することができます。これにより、ブランドや個人のスタイルに完璧にマッチするカラースキームを作成することができます。たとえば、プライマリカラーを青、セカンダリー背景カラーを白、テキストカラーを黒に設定したい場合は、以下のコードを使用できます。

[theme]
primaryColor = "#0000FF"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F0F0"
textColor = "#000000"

ページ要素とコントラストの追加

Streamlitでは、サイドバーやカード、ボタンなど、さまざまなページ要素をカスタマイズすることもできます。さらに、これらの要素にコントラストを追加して、視覚的に魅力的なアプリを作成することもできます。たとえば、サイドバーに対してコントラストを追加したい場合は、以下のコードを使用できます。

[theme]
sidebar = { "backgroundColor": "#FFFFFF", "contrast": 1.2 }

一般的な設定オプション

テーマ設定に加えて、Streamlitは一般的な設定オプションも提供しています。これらのオプションを使用すると、サーバーポート、ブラウザー、共有モードなど、アプリのさまざまな側面を制御することができます。これらのオプションは、.streamlit/config.tomlファイルまたはコマンドラインを介してアクセスできます。

StreamlitアプリをTableauのように変換する、素晴らしいデータ分析およびデータビジュアライゼーションツールをご存知ですか？

PyGWalker (opens in a new tab)は、自分自身のStreamlitアプリに簡単にTableauのようなUIを埋め込むことをサポートするPythonライブラリです。

PyGWalkerを使用したStreamlitでのデータビジュアライゼーション (opens in a new tab)

結論

Streamlitのテーマ設定は、Streamlitアプリの外観と感触をカスタマイズする強力な機能です。テーマ設定により、背景色を変更したり、背景画像を追加したり、フォントをカスタマイズしたり、さまざまなカスタマイズが可能です。経験豊富な開発者であっても初心者であっても、Streamlitのテーマ設定はさまざまな可能性を提供しています。だから、ぜひ試してみてください。創造力を解き放ち、自分自身のStreamlitアプリを本当に自分のものにしてください。

FAQ

Streamlitは強力なツールですが、初心者には少し困惑することもあります。そのため、起動時によく聞かれる質問のリストを作成しました。

Streamlitのテーマはどのように設定しますか？

Streamlitのテーマを設定するのは非常に簡単です。単に .streamlit/config.tomlファイルに [theme] セクションを追加し、希望するカラーやフォントなどを指定するだけです。

Streamlitのデフォルトのテーマは何ですか？

Streamlitのデフォルトのテーマは、白い背景と黒いテキストを持つライトテーマです。ただし、独自のテーマやダークテーマに簡単に変更することもできます。これは、.streamlit/config.tomlファイルの [theme] セクションを使用して行います。

Streamlitのデメリットは何ですか？

Streamlitは強力なツールですが、いくつかの欠点もあります。まず、従来のWeb開発フレームワークほど柔軟ではありません。また、複数のページを持つアプリをそのままサポートしていませんが、これには回避策があります。最後に、StreamlitはシンプルでインタラクティブなWebアプリを作成するのに適していますが、より複雑なプロジェクトにはあまり適していないかもしれません。

Streamlitとは何で、なぜ使用されるのですか？

StreamlitはオープンソースのPythonライブラリであり、インタラクティブでデータ中心のWebアプリを迅速かつ簡単に作成することができます。データサイエンティストや開発者は、HTML、CSS、JavaScriptなどのフロントエンド言語を学ぶことなく、自分の作業を共有し、データを可視化し、インタラクティブなツールを構築するために使用しています。

Streamlitアプリの簡単なデプロイとクラウド上でのホスティング方法Streamlitコンポーネントについて知っておくべきすべて