はじめに
最近Djangoを使った案件で画面の翻訳を行うことがあったので備忘録としてまとめます。
やること
Djangoのテンプレート(HTML)内のメッセージを日本語から英語(指定した翻訳)に切り替える
必要な環境等
・Visual Studio Code
・Python
・Django(環境構築がされている前提)
手順
1.「setting.py」の設定
下記設定を「setting.py」に行う。
①MIDDLEWAREに「django.middleware.locale.LocaleMiddleware」を追加する(追加する場所には注意!)
②LANGUAGE_CODE(デフォルトの言語)を設定する
③翻訳とロケールの日付のフォーマットを設定する
④LANGUAGESパラメータを設定する(ここで翻訳に使用する言語を指定する)
⑤翻訳ファイルのディレクトリパスを設定する(LOCALE_PATHS)
2.「urls.py」でルーティングの設定
・「urls.py」に「i18n_patterns」をインポートする
・ルーティングの中に「prefix_default_language=False」を追記しデフォルトの言語設定が使用されるようにする
from django.conf.urls.i18n import i18n_patterns
urlpatterns = i18n_patterns(
path("admin/", admin.site.urls),
#以下略
prefix_default_language=False
) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
3.HTML内の翻訳対象へのマークアップ(マーキング)
マークアップはHTMLの場合以下のように書く
{% load i18n %}
<h1>{% trans "翻訳したい対象テキスト" %}</h1>
翻訳対象のテキストを「{% trans %}」で囲む!!
※囲んだらテキストを引用符で囲むことを忘れずに!!
4.翻訳ファイルの作成
以下のコマンドを実行し翻訳対象HTMLの翻訳ファイル(.poファイル)を作成する
python manage.py makemessages -l <ロケール名>
上記のコマンドでマーキング対象になっている全てのファイルのロケール名の翻訳ファイルを作成できる
(ロケール名:ja=日本語、en=英語、zh_Hans=簡体字中国語)
5.翻訳後のテキストの指定
作成した翻訳ファイルの「msgstr」に翻訳後HTMLに表示したいものを""で囲んで書く
※「msgstr」が空文字の場合「msgid」に書かれているものが表示される
#上記省略
#: .\admin.py:2
msgid "翻訳前テキスト(日本語)"
msgstr "翻訳後テキスト(英語)"
6.翻訳ファイルのコンパイル
以下のコマンドを実行し翻訳ファイルをコンパイルする
python manage.py compilemessages
※翻訳ファイルをコンパイルしないと実際に画面で翻訳結果が反映されない!!
おまけ
翻訳ファイルの作成、コンパイルについてはコマンド実行で行っていましたが、vsCodeを使用している場合タスクで実行することも可能です。
※下記のタスクを実行する場合仮想環境(venv)で実装を行うことを前提としている
{
"version": "2.0.0",
"tasks": [
{
"label": "Run makemessages",
"detail": "翻訳ファイルを生成します。",
"type": "shell",
"command": "\"${workspaceFolder}\\translation\\venv\\Scripts\\python.exe\"",
"args": [
"manage.py",
"makemessages",
"-l",
"ja",
"-l",
"en",
],
"options": {
"cwd": "${workspaceFolder}\\translation",
"env": {
"TRAMPOLINE_CI": "TRUE"
}
},
"group": {
"kind": "locale"
}
},
{
"label": "Run compilemessages",
"detail": "翻訳ファイルをコンパイルします。",
"type": "shell",
"command": "\"${workspaceFolder}\\translation\\venv\\Scripts\\python.exe\"",
"args": [
"manage.py",
"compilemessages",
],
"options": {
"cwd": "${workspaceFolder}\\translation",
"env": {
"TRAMPOLINE_CI": "TRUE"
}
},
"group": {
"kind": "locale"
}
}
あとがき
前回の投稿から久々の投稿にはなりましたが、3年目でもまだまだ知らないことが多いですね。。。
今回はAIに教えてもらったことを参考に自分なりにまとめた内容になりますので簡単に「i18n」を使って多言語対応を実現してみたい方は参考にしてみてください!!
参考ドキュメント