🔧

【ブラウザの翻訳ポップアップ抑制】StreamlitアプリにおけるHTML lang属性の設定方法

2025/03/14に公開

Python

Streamlit

tech

はじめに

こんにちは或いはこんばんは。Ryuzakiです。

私は業務でプロトタイプを実装する際などに、PythonのウェブアプリケーションフレームワークであるStreamlitをよく使用しています。シンプルな記述で動くアプリケーションが作れるため、ちょっとしたデータ分析ツールの作成やアイデア検証に重宝しています。

しかし、最近私が作成したツールの利用者から「Streamlitで作成したアプリを開くたびに『このページを日本語に翻訳しますか？』というポップアップが表示されて煩わしい」という問い合わせがありました。調査したところ、Streamlitのデフォルトの設定として<html>タグのlang属性に"en"（英語）が設定されているために発生している問題だとわかりました。

このlang属性を変更するのに思った以上に苦戦したため、半分備忘録として変更方法を共有させていただきます。

言語設定する方法

執筆時点では、Streamlitの<html>タグのlang属性はハードコードされており、Streamlitの設定ファイル（config.toml）で変更することはできません。そのため、変更するには以下の2つの方法を検討する必要があります。

Streamlitのテンプレートファイルの内容を書き換える方法
JavaScriptを用いてlang属性を書き換える方法

以降では、それぞれの方法について具体的に説明していきます。

1. Streamlitのテンプレートファイルの内容を書き換える方法

この方法では、Streamlitのテンプレートファイル（site-packages/streamlit/static/index.html）の内容を直接変更します。

特にDockerを利用している場合は、以下のコマンドをDockerfileに記述することで比較的簡単に実現できます。

Dockerfile

# <html>のlang属性を"ja"に書き換え
# パス中の「python3.XX」は利用しているPythonのバージョンに合わせて設定
RUN sed -i 's/<html[^>]*>/<html lang="ja">/' /usr/local/lib/python3.XX/site-packages/streamlit/static/index.html

Dockerを使わない場合の手順

ローカル環境で直接テンプレートファイルを編集する場合は、以下の手順で行います。

Streamlitがインストールされているパスを確認

python -c "import streamlit; print(streamlit.__path__[0])"

出力されたパスの /static/index.html ファイルをテキストエディタで開く
<html lang="en"> を <html lang="ja"> に変更して保存

この方法のメリットは、lang属性の変更だけでなく、SEO対策やOpen Graph Tagを設定する場合にも応用できる点です。例えば、以下のような設定をすることで、特定のメタタグを追加することができます。

Dockerfile

# http-equivの設定を行う<meta>を<head>の直下に配置
# パス中の「python3.XX」は利用しているPythonのバージョンに合わせて設定
RUN sed -i 's/<head>/<head>\n<meta http-equiv="content-language" content="ja">/' /usr/local/lib/python3.XX/site-packages/streamlit/static/index.html

2. JavaScriptを用いて`lang`属性を書き換える方法

もう一つの方法は、JavaScriptを使用して動的にlang属性を変更する方法です。

ここで注意すべき点として、StreamlitでHTML要素の追加やCSS変更方法としてよく紹介されているst.html()やst.markdown()では、JavaScriptコードを実行することができません。これは恐らくクロスサイトスクリプティング（XSS）などのセキュリティリスクを低減させるための仕様です。

代わりに、streamlit.components.v1.html()を利用する必要があります。以下のようにコードを記述することで、JavaScriptを実行しlang属性を変更できます。

app.py

import streamlit.components.v1 as components

# lang属性を日本語に変更するスクリプト
lang_edit_script = """
    <script>
        window.top.document.documentElement.lang = "ja";
    </script>
"""
components.html(lang_edit_script)

# ここから通常のStreamlitアプリケーションのコード

この方法のメリットは、アプリケーションのコード内だけで完結するため、環境に依存せず適用できる点です。また、Streamlitのライブラリ自体を変更しないため、バージョンアップ時の影響も受けにくいです。

おわりに

今回は、Streamlitの<html>タグのlang属性を変更して「日本語に翻訳しますか？」というブラウザポップアップを抑制する方法について共有させていただきました。

2つの方法を紹介しましたが、個人的には2つ目のstreamlit.components.v1.html()を使用する方法が、コードベースで管理できる点と環境依存が少ない点で優れていると感じています。ただし、プロジェクトの状況や要件によって最適な方法は異なるかもしれません。

この記事が、同じような課題に直面している方の参考になれば幸いです。もし他にも効率的な方法をご存知の方がいらっしゃいましたら、ぜひコメント欄でシェアしていただけると嬉しいです。

ここまでお読みいただき、ありがとうございました。