- webサイトの英語対応（国際化）に必要な、最低限の情報を得たい方向け。
- PythonやHTMLを触ったことがある方向け。
この記事では、Flask-Babelを用いた、webサイトの英語対応(国際化)についてまとめてみました。必要最低限の情報だけを記載したので、とりあえず英語対応させたい方はぜひご覧ください。
内容をある程度理解するためには、HTMLとPythonの基礎知識が必要です。不安がある方は、下記サイトなどおすすめなので、ぜひ目を通してみてください。
必要な構造
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 簡単な解説を表示
コードを書いた後、ターミナルを使って翻訳の準備を行います。その時に参照されるファイルがbabel.cfgです。
#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) 簡単な解説を表示
プログラムの起動を行うファイルです。
下記のように「open_browser」関数を設定するとデバッグに便利です。
import webbrowser
import threading
def open_browser():
#webbrowser.open_new('http://127.0.0.1:5000/?lang=ja')
webbrowser.open_new('http://127.0.0.1:5000/?lang=en')
if __name__ == '__main__':
threading.Timer(1.25, open_browser).start()
#英語版で開く場合は、('http...lang=ja')をコメントアウトするなどの使い方がおすすめです。 #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() }}はそのままでお願いします。 簡単な解説を表示
英語対応（国際化）されたHTMLの一例です。
「<html lang=”{{ get_locale() }}”>」の部分で、ブラウザの言語を確認し対応しています。
翻訳可能なテキストを書きたい場合は、下記のように書きます。
<h1>{{ _('適当な文字列') }}</h1>#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 簡単な解説を表示
ここが最も難しい部分かと思います。
端的に説明すると、Flaskの初期化と「get_locale」の定義を行っています。とりあえずはコピペで問題ないです。
下記のようなコードはFlaskのアップデートによって使えなくなっている可能性があります。注意してください。
@babel.localeselector#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') 簡単な解説を表示
Flaskのroutingと呼ばれる機能を活用しています。やっていることは、HTMLファイルにURLを結びつけています。
下記のようにコードを足していくことで、webサイトのページ数を増やすことが出来ます。
@app.route('/02')
def loading():
return render_template('02.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:6
msgid "タイトル"
msgstr "title"
#: app/templates/01.html:12
msgid "適当な文字列"
msgstr "character string"次にこのファイルを使えるようにするため、コンパイルしていきます。下記をターミナルで実行してください。
pybabel compile -d app/translations 「en/LC_MESSAGES/messages.mo」ファイルが追加されていれば完成です！
新しく翻訳可能テキストを生成した場合は、翻訳ファイルの準備からもう一度行ってくださいね。
というわけで今回の記事は以上になります。