Flaskでフォームラベルやバリデーションメッセージを翻訳する方法！多言語対応の基本

Flaskでフォームラベルやバリデーションメッセージを翻訳する方法

先生と生徒の会話形式で理解しよう

生徒

「Flaskで作ったWebサイトの入力フォームを、英語や日本語に切り替えることってできますか？」

先生

「もちろんです。Flask-Babelという拡張機能を使えば、項目の名前（ラベル）や、エラーが起きたときのメッセージを簡単に翻訳できますよ。」

生徒

「プログラミングが初めてでも、設定は難しいでしょうか？」

先生

「手順を一つずつ追えば大丈夫です。まずは仕組みから一緒に見ていきましょう！」

1. Webサイトの翻訳機能「多言語対応」とは？

私たちが普段使っているWebサイトの中には、ボタン一つで日本語から英語に切り替わるものがありますよね。これをプログラミングの世界では「国際化（i18n）」や「多言語対応」と呼びます。

Python（パイソン）というプログラミング言語で作られたWebアプリの枠組みである「Flask（フラスク）」では、この翻訳作業を助けてくれる便利な道具があります。それが「Flask-Babel（フラスク・バベル）」です。これを使うと、例えば「お名前」というラベルを「Name」に変えたり、「入力してください」という注意書きを「Please fill out this field」に変えたりすることが自動でできるようになります。

パソコンの操作に慣れていない方でも、まずは「言葉を置き換えるための辞書をプログラムに持たせるんだな」というイメージを持っていただければ十分です。

2. Flask-Babelのインストールと準備

まずは、翻訳機能を使うための道具をパソコンに取り込む必要があります。これを「インストール」と言います。スマートフォンのアプリをダウンロードするような感覚だと思ってください。

パソコンにある「ターミナル」や「コマンドプロンプト」という、文字で命令を出す画面を開いて、以下の魔法の言葉を入力して実行します。


pip install Flask-Babel

これで、あなたのパソコンで翻訳機能が使えるようになりました。次に、Pythonのプログラムの中で「これから翻訳機能を使いますよ」と宣言する必要があります。以下のように、プログラムの最初のほうに設定を書き込みます。


from flask import Flask, render_template, request
from flask_babel import Babel, _

app = Flask(__name__)

# 翻訳の設定を管理するBabelを読み込みます
babel = Babel(app)

# どの言語を使うかを決める関数です
@babel.localeselector
def get_locale():
    # ユーザーが使っているブラウザの設定に合わせて言語を選びます
    return request.accept_languages.best_match(['ja', 'en'])

@app.route('/')
def index():
    return render_template('index.html')

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

このコードの中にある _() という不思議な記号が、翻訳の鍵になります。この括弧の中に書いた言葉が、後で別の言語に置き換わる対象になります。

3. フォームのラベルを翻訳できるようにする

Webサイトには、名前やメールアドレスを入力するための「フォーム」があります。このフォームの項目名（ラベル）を翻訳してみましょう。Flaskでは「WTForms」という道具を組み合わせてフォームを作ることが多いので、その例を見てみます。

ここでは、ユーザーがログインするためのフォームを想定します。プログラムの中で、ラベルの名前を _() で囲むのがポイントです。こうすることで、システムが「あ、この言葉は翻訳が必要なんだな」と判断してくれます。


from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from flask_babel import lazy_gettext as _l

class LoginForm(FlaskForm):
    # ラベル名を翻訳対象として登録します
    username = StringField(_l('ユーザー名'))
    password = PasswordField(_l('パスワード'))

ここで出てきた _l() は「後で翻訳する」という意味の命令です。プログラムが動く瞬間に、その時の設定に合わせた言語へと自動的に変換されます。例えば、英語の設定で見ている人には「Username」、日本語で見ている人には「ユーザー名」と表示されるようになります。非常にスマートな仕組みですね。

4. バリデーションメッセージの多言語化

「バリデーション」という難しい言葉が出てきましたが、これは「入力内容のチェック」のことです。例えば、パスワードが短すぎるときに「もっと長く入力してください」と赤文字で警告が出ることがありますよね。これがバリデーションメッセージです。

このエラーメッセージも、日本人には日本語で、海外の人には英語で見せてあげたいところです。やり方はフォームのラベルと同じで、メッセージの内容を翻訳用の記号で囲むだけです。


from wtforms.validators import DataRequired, Length

class RegisterForm(FlaskForm):
    # 必須入力チェックのメッセージを翻訳します
    nickname = StringField(_l('ニックネーム'), validators=[
        DataRequired(message=_l('この項目は必ず入力してください'))
    ])
    
    # 文字数制限のメッセージも翻訳します
    secure_code = StringField(_l('暗証番号'), validators=[
        Length(min=4, max=4, message=_l('4ケタの数字で入力してください'))
    ])

このように設定しておけば、入力ミスがあったときに、その人の言語に合わせた優しいメッセージを表示することができます。ユーザーへの「おもてなし」の心をプログラムで表現できるわけです。難しい専門用語を使わずに、親切な案内を出すことができるようになります。

5. 翻訳辞書ファイル（メッセージカタログ）の作成

プログラムの中で _() を使って言葉を登録したら、次は「日本語のときはこれ、英語のときはこれ」という対応表を作る作業が必要です。これを「メッセージカタログ」と呼びます。料理で例えるなら、レシピに書いてある材料を、実際の食材に置き換えるためのリストを作るようなものです。

この作業には3つのステップがあります。一つ目は「抽出」。プログラムの中から _() で囲まれた言葉を全部探し出します。二つ目は「初期化」。特定の言語（例えば日本語）用のファイルを作成します。三つ目は「翻訳」。作成されたファイルを開いて、実際に翻訳後の言葉を書き込みます。

これらの作業は、パソコンのコマンド画面で行います。初心者の方には少し難しく感じるかもしれませんが、決まった命令を入力するだけなので怖がる必要はありません。翻訳ファイルは「.po」という特殊な形式のファイルで、メモ帳などで開いて編集することができます。msgid（元の言葉）に対して、msgstr（翻訳後の言葉）を書き込むシンプルな構造です。

6. 翻訳を反映させる「コンパイル」という作業

翻訳ファイルに言葉を書き込んだだけでは、まだWebサイトには反映されません。最後に「コンパイル」という作業が必要です。これは、人間が書いた翻訳ファイルを、コンピュータが素早く読み取れる専用のデータ形式（.moファイル）に変換する作業です。

翻訳ファイルの中身を書き換えるたびに、このコンパイルの命令を実行する必要があります。これを忘れてしまうと、「せっかく翻訳を書いたのに、画面に反映されない！」というトラブルが起きてしまいます。もし表示が変わらないときは、まずはこの作業を忘れていないか確認しましょう。

ここまでの流れを整理すると、プログラムで翻訳箇所を指定し、辞書を作り、中身を書き、最後にコンピュータ用に変換する、という手順になります。一度覚えてしまえば、どんなに言葉が増えても同じ手順で対応できるようになります。

7. HTMLテンプレートでの表示方法

最後に、実際の画面（HTML）でどのように翻訳を表示するかを確認しましょう。Flaskでは「Jinja2（ジンジャーツー）」という仕組みを使って画面を作りますが、ここでも _() を使うことができます。プログラム側で設定したラベルをそのまま表示させることもできますし、HTMLの中に直接、翻訳したい文章を書くこともできます。


<form method="POST">
    <!-- フォームのラベルを自動で表示します -->
    <div>
        {{ form.username.label }} <br>
        {{ form.username() }}
    </div>
    
    <!-- HTML内に直接書いたメッセージを翻訳します -->
    <p>{{ _('ご不明な点はお問い合わせください') }}</p>
    
    <button type="submit">{{ _('送信する') }}</button>
</form>

このように書くと、ブラウザの言語設定が英語の人には「Submit」ボタンに見え、日本語の人には「送信する」ボタンに見えるようになります。一つのHTMLファイルで世界中の人に対応できるなんて、とても効率的ですよね。初心者の方は、まずこの {{ _('...') }} という書き方を覚えるだけでも、多言語対応の第一歩を踏み出せたと言えます。

8. 多言語対応でよくあるエラーと解決策

初めて多言語対応に挑戦すると、いくつか壁にぶつかることがあります。最も多いのは、翻訳したはずなのに文字化けしてしまったり、英語のまま変わらなかったりするケースです。

原因の多くは、翻訳ファイルの保存形式が「UTF-8」という世界基準の文字形式になっていないことや、先ほど説明した「コンパイル」をし忘れていることです。また、Flask-Babelのバージョンによって、少しだけ書き方が違うこともあります。もしエラーが出て止まってしまったら、エラーメッセージをコピーして検索してみるのも、プログラミング学習の大切なステップです。

また、翻訳辞書を作るコマンドを打つときに、ファイルが保存されている場所（フォルダ）が間違っているとうまく動きません。自分のいる場所を確認しながら作業を進めることが、パソコン操作上達の近道になります。一つずつ丁寧に確認していけば、必ず解決できるので安心してください。

公的機関での指導実績【Flask Web開発実践セミナー】