💷

簡単にWebサイトを英語対応する方法(Flask-Babel、初心者向け)

2024/04/17に公開

Flask

<概要>

この記事では、Flask-Babelを用いた、webサイトの英語対応(国際化)についてまとめてみました。必要最低限の情報だけを記載したので、とりあえず英語対応させたい方はぜひご覧ください。

<必要な構造>

webサイトを多言語化するために、Flaskというフレームワークを活用します。簡単に説明すると、HTMLとPythonを結びつけるイメージです。
ここでポイントになるのが、プログラムフォルダの構造です。プログラムがしっかり書けていても、フォルダ構造が間違っているとうまく動きません。
下に最低限のフォルダ構造を示したので、対応したいプログラムフォルダに加えてみてください。

"サイト名"/
        babel.cfg
	config.py
	main.py
	app/
		static/
			01.css
		templates/
			01.html
		__init__.py
		routes.py

<各ファイルのコード>

各ファイルのコードは以下の通りです。他の機能をすでに実装している方は、追記する形で書いてください。

babel.cfg

[python: **.py]
[jinja2: app/templates/**.html]
jinja2_extensions = jinja2.ext.autoescape,jinja2.ext.with_,jinja2.ext.i18n

config.py

import secrets

class Config:
    SECRET_KEY = secrets.token_hex(16)
    LANGUAGES = {
    'en': 'English',
    'ja': '日本語'
    }
    BABEL_DEFAULT_LOCALE = 'ja'
    BABEL_TRANSLATION_DIRECTORIES = './translations'

main.py

from app import create_app

app = create_app()

if __name__ == '__main__':
    app.run(debug=True,use_reloader=False)

app/templates/01.html

<!DOCTYPE html>
<html lang="{{ get_locale() }}">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{{ _('タイトル') }}</title>
        <!--<link rel="stylesheet" href="01.css">-->
    </head>
    <body>
         <header>
             <div>
                 <h1>{{ _('適当な文字列') }}</h1>
             </div>
         </header>
    </body>
</html>

#'タイトル'と'適当な文字列'は、個人でカスタマイズしてください。{{ get_locale() }}はそのままでお願いします。

app/__init__.py

from flask import Flask, request, g
from flask_babel import Babel
from config import Config

def create_app():
    app = Flask(__name__)
    app.config.from_object(Config)

    def get_locale():
        return request.args.get('lang', app.config['BABEL_DEFAULT_LOCALE'])

    babel = Babel(app, locale_selector=get_locale)

    @app.context_processor
    def context_processor():
        return dict(get_locale=get_locale)

    from . import routes
    routes.init_app(app)
    
    return app

app/routes.py

from flask import render_template
from flask import current_app as app

def init_app(app):
    @app.route('/')
    def home():
        return render_template('01.html')

<翻訳ファイルの準備>

これでプログラムは完成です。いよいよ翻訳を設定するフォルダを作成していきます。
下記のコマンドをターミナルで実行してください。

pybabel extract -F babel.cfg -k lazy_gettext -o messages.pot .

コマンドの実行後、「messages.pot」が作成されるはずです。続けて打ち込んでいきます。

pybabel init -i messages.pot -d app/translations -l en

「app/translations/en/LC_MESSAGES/messages.po」が作成される事を確認してください。
ここまで来たら、おめでとうございます。準備完了です。

<翻訳の書き方>

最後にこのプログラムフォルダの使い方を解説します。
先ほど作成した「translations/en/LC_MESSAGES/messages.po」ファイルを見ると、下記のようになっているかと思います。

...
...
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Generated-By: Babel 2.14.0\n"

#: app/templates/01.html:6
msgid "タイトル"
msgstr ""

#: app/templates/01.html:12
msgid "適当な文字列"
msgstr ""

#01.htmlをカスタマイズした場合、"タイトル"と"適当な文字列"は他の文章になっています。

この「タイトル」と「適当な文字列」に英語版での表記を追記していきます。下記のようにファイルに書き込んでください。

app/templates/01.html

msgid "タイトル"
msgstr "title"

#: app/templates/01.html:12
msgid "適当な文字列"
msgstr "character string"

次にこのファイルを使えるようにするため、コンパイルしていきます。下記をターミナルで実行してください。

pybabel compile -d app/translations

「en/LC_MESSAGES/messages.mo」ファイルが追加されていれば完成です！

まとめ

新しく翻訳可能テキストを生成した場合は、翻訳ファイルの準備からもう一度行ってくださいね。
もっと詳細が知りたい方は、下記のブログをぜひご覧ください！

というわけで今回の記事は以上になります。