Babelの国際化について、web上で翻訳が適用されない。

実現したいこと

htmlにおいて、lang='ja'の時、

<h1>{{ _('home') }}</h1>について、

「ホーム」と翻訳して表示したい。

発生している問題・分からないこと

langの指定を変えても、翻訳が適用されない。

エラーメッセージ

error
1#ターミナルやコンソールではエラーを確認できませんでした。

該当のソースコード

py
1#main.py
2from app import create_app
3import webbrowser
4import threading
5
6def open_browser():
7      webbrowser.open_new('http://127.0.0.1:5000/?lang=ja')
8      #webbrowser.open_new('http://127.0.0.1:5000/?lang=en')
9
10app = create_app()
11
12if __name__ == '__main__':
13    threading.Timer(1.25, open_browser).start()
14    app.run(debug=True)
15
16#config.py
17class Config:
18#秘密鍵は設定しています。
19    SECRET_KEY = ""
20    LANGUAGES = {
21    'en': 'English',
22    'ja': '日本語'
23    }
24    BABEL_DEFAULT_LOCALE = 'en'
25    BABEL_TRANSLATION_DIRECTORIES = './locale'

app/.py
1#app/__init__.py
2from flask import Flask, request, g
3from flask_babel import Babel
4from config import Config
5
6def create_app():
7    app = Flask(__name__)
8    app.config.from_object(Config)
9
10    # get_locale関数を定義
11    def get_locale():
12        # リクエストの引数から言語設定を取得し、なければデフォルトの言語設定を使用
13        return request.args.get('lang', app.config['BABEL_DEFAULT_LOCALE'])
14
15    # Babelインスタンスを作成し、locale_selectorパラメータにget_locale関数を渡す
16    babel = Babel(app, locale_selector=get_locale)
17
18    # get_locale関数をテンプレートのグローバル関数として登録
19    @app.context_processor
20    def context_processor():
21        return dict(get_locale=get_locale)
22
23    from . import routes
24    routes.init_app(app)
25    
26    return app
27
28#app/routes.py
29from flask import render_template
30from flask import current_app as app
31
32def init_app(app):
33    @app.route('/')
34    def home():
35        return render_template('01_home.html')
36
37    @app.route('/loading')
38    def loading():
39        return render_template('02_loading.html')
40
41    @app.route('/select')
42    def select():
43        return render_template('03_select.html')
44
45    @app.route('/answer')
46    def answer():
47        return render_template('04_answer.html')

babel.cfg
1[python: **.py]
2[jinja2: app/templates/**.html]
3jinja2_extensions = jinja2.ext.autoescape,jinja2.ext.with_,jinja2.ext.i18n

messages.po
1# Japanese translations for PROJECT.
2# Copyright (C) 2024 ORGANIZATION
3# This file is distributed under the same license as the PROJECT project.
4# FIRST AUTHOR <EMAIL@ADDRESS>, 2024.
5#
6msgid ""
7msgstr ""
8"Project-Id-Version: PROJECT VERSION\n"
9"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
10"POT-Creation-Date: 2024-03-16 15:07+0900\n"
11"PO-Revision-Date: 2024-03-16 10:24+0900\n"
12"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
13"Language: ja\n"
14"Language-Team: ja <LL@li.org>\n"
15"Plural-Forms: nplurals=1; plural=0;\n"
16"MIME-Version: 1.0\n"
17"Content-Type: text/plain; charset=utf-8\n"
18"Content-Transfer-Encoding: 8bit\n"
19"Generated-By: Babel 2.14.0\n"
20
21#: app/templates/00_base.html:6 app/templates/00_base.html:13
22#: app/templates/01_home.html:3
23msgid "title"
24msgstr "タイトル"
25
26#: app/templates/01_home.html:3 app/templates/01_home.html:6
27msgid "home"
28msgstr "ホーム"
29

html
100_base.html
2<!DOCTYPE html>
3<html lang="{{ get_locale() }}">
4    <head>
5        <meta charset="UTF-8" />
6        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7        <title>{% block title %}{{ _('title') }}{% endblock %}</title>
8        <!--<link rel="stylesheet" href="00_base.css">-->
9    </head>
10    <body>
11        {% block content %}
12            <header>
13                <div>
14                    <h1>{{ _('title') }}</h1>
15                </div>
16            </header>
17        {% endblock %}
18    </body>
19</html>
20
2101_home.html
22{% extends '00_base.html' %}
23
24{% block title %}{{ _('home') }} | {{ _('title') }}{% endblock %}
25
26{% block content %}
27    <h1>{{ _('home') }}</h1>
28{% endblock %}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

<html lang="{{ get_locale() }}">がうまくいっていないのかと思い、コンソールを確認しましたが、正常に機能していました。 localeを消してみても何の変化も見られなかったので、loceleフォルダの参照が上手くできていないのかもしれません。

補足

構造は下記のようになっています。
・config.py
・babel.cfg
・main.py
・messages.pot
・locale/ja/LC_MESSAGES/messages.po, messages.mo
・app/models.py, init.py, routes.py, static/, templates/

行動規範の内容に同意します

回答2件

翻訳は正常に機能しました。

翻訳ファイル (*.mo) は何処に配置されてますか？

原因は、プログラムを実行したときのカレントパスと、
アプリケーション内での基準とするパスの相違だと思われます。

解決策（どちらか）

BABEL_TRANSLATION_DIRECTORIES の指定を /app 内から相対的なものに "../locale"
もしくは、"./locale" で指定するなら、locale ファイルを app 配下に設置してみてください。

diff
1-    BABEL_TRANSLATION_DIRECTORIES = './locale'
2+    BABEL_TRANSLATION_DIRECTORIES = '../locale'

もしくは locale/ を app/ 下に配置

diff
1-  locale/ja/LC_MESSAGES/messages.po, messages.mo
2+ app/locale/ja/LC_MESSAGES/messages.po, messages.mo

投稿2024/03/18 05:07

teamikl

総合スコア8681

自己解決

フォルダ構造において、appフォルダ内にtranslationsフォルダを入れていなかったことが原因でした。
検討頂いた皆様、ありがとうございました。

投稿2024/03/18 02:20

Hirotsune

総合スコア5

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！