Flaskで右から左(RTL)言語をサポートする設定例!アラビア語対応の基本
生徒
「Flaskで多言語サイトを作りたいのですが、アラビア語のように『右から左に読む言葉』はどうやって表示すればいいですか?」
先生
「それはRTL(ライト・トゥ・レフト)対応ですね。PythonのFlask側で今の言語がどちら向きかを判定し、HTMLの表示設定を切り替える仕組みを作れば解決しますよ。」
生徒
「文字の向きまでプログラムで制御できるんですね!具体的に何を準備すればいいんでしょうか?」
先生
「それでは、初心者の方でも分かりやすいように、基本的な設定手順を見ていきましょう!」
1. RTLと言語の向きについて知ろう
世界には、私たちが普段使っている日本語や英語のように「左から右(LTR:Left-To-Right)」に書く言葉だけでなく、アラビア語やヘブライ語のように「右から左(RTL:Right-To-Left)」に書く言葉があります。
Webサイトでこれらの言語を表示する場合、単に文字を翻訳するだけでは不十分です。文章の始まりが右端になり、メニューの位置やボタンの並び順も左右反転させる必要があります。これをプログラミングで実現することを「RTLサポート」と呼びます。Pythonの人気フレームワークであるFlask(フラスク)を使えば、現在の言語設定に合わせて自動的にレイアウトを切り替える賢い仕組みが作れます。
2. 言語の向きを判定するプログラムの作成
まずは、現在選択されている言語が「右から左」に書くものかどうかを判定する機能を作ります。プログラミング未経験の方でも安心してください。これは「もし、今の言葉がアラビア語だったら、右向きにする」という簡単なルールを決める作業です。
from flask import Flask, g
from flask_babel import Babel, get_locale
app = Flask(__name__)
babel = Babel(app)
# 言語の向きを判定する便利な道具を登録します
@app.context_processor
def inject_conf_var():
# 現在の言語(ja, en, ar など)を取得します
locale = str(get_locale())
# アラビア語(ar)やヘブライ語(he)なら右から左(rtl)と判定します
direction = 'rtl' if locale in ['ar', 'he', 'fa'] else 'ltr'
return dict(lang_direction=direction)
このコードの中にある context_processor というのは、作成した「向きの情報(direction)」を、画面を作るためのファイル(HTML)でいつでも使えるようにする魔法の合図です。これにより、一箇所設定するだけで全てのページで言葉の向きが自動調整されるようになります。
3. HTMLテンプレートでのdir属性の設定
次に、実際に画面を表示するHTMLというファイルに設定を追加します。HTMLには dir(ディレクション)という、文字の向きを指定するための専用の命令があります。ここに先ほどPython側で作った判定結果を流し込みます。
<!-- base.html という土台になるファイルです -->
<html lang="{{ get_locale() }}" dir="{{ lang_direction }}">
<head>
<meta charset="UTF-8">
<title>多言語対応サイト</title>
</head>
<body>
<h1>{{ _('こんにちは') }}</h1>
<p>{{ _('この文章は言語に合わせて向きが変わります。') }}</p>
</body>
</html>
この設定を行うと、アラビア語が選ばれたときには自動的に dir="rtl" となり、ブラウザが気を利かせて文章全体を右側に寄せてくれます。パソコンに詳しくない方でも、この dir という言葉が「ハンドルの向き」を変えるような役割だと考えるとイメージしやすいかもしれません。
4. 言語を切り替えるスイッチを設置する
ユーザーが自分で「日本語で見たい」「アラビア語で見たい」と選べるように、切り替えボタンを作りましょう。プログラミングでは、URLの中に言語の情報を混ぜることで、表示を切り替えるのが一般的です。
from flask import session, redirect, url_for
@app.route('/language/<language>')
def set_language(language):
# 選ばれた言語を記憶します(セッションといいます)
session['language'] = language
# 前のページに戻ります
return redirect(request.referrer or url_for('index'))
@babel.localeselector
def get_locale():
# 記憶している言語があればそれを使い、なければブラウザ設定に合わせます
return session.get('language', request.accept_languages.best_match(['ja', 'en', 'ar']))
この「セッション」という言葉は、ブラウザが一時的に持っている「メモ帳」のようなものです。そこに「今はアラビア語」と書いておけば、ページを移動してもずっと右から左の向きを維持してくれます。これで、使う人に寄り添った親切なサイトになりますね。
5. デザイン(CSS)をRTLに対応させる方法
文字の向きだけでなく、余白(マージン)や線の位置も調整が必要な場合があります。例えば、左側にだけ線を引きたいとき、RTL言語では右側に線を引きたいはずです。これを解決するために、最近のWebデザインでは「左・右」という言葉を使わずに「開始・終了(start・end)」という言葉を使います。
例えば、以下のようなCSS(デザインの設計図)の書き方があります。
/* 昔の書き方(言語が変わっても左側のまま) */
.menu { margin-left: 20px; }
/* 今風の書き方(RTLなら自動で右側になります) */
.menu { margin-inline-start: 20px; }
このように inline-start という言葉を使うと、左から右に書く言語なら「左」になり、右から左に書く言語なら「右」として扱われます。プログラミングの世界も、どんどん便利になっていて、初心者の方でもこうした新しいルールを知っておくだけで、世界基準のサイトが作れるようになります。
6. アラビア語のフォントと表示の確認
最後に大切なのが、文字が綺麗に見えるかどうかです。アラビア語などは特有の美しい曲線を持っていますが、フォント(文字のデザイン)が適切でないと、読みにくくなってしまうことがあります。多言語対応をする際は、その言葉に合ったフォントを読み込む設定も忘れないようにしましょう。
Google Fontsなどのサービスを使えば、無料で高品質な多言語フォントをサイトに取り入れることができます。プログラム側で「今はアラビア語だ」とわかっているので、その時だけ特別なフォントを適用するような指示も出せます。これで、見た目も完璧な多言語対応サイトの完成です。
実際に自分のパソコンでアラビア語に切り替えてみて、画面がガラッと左右反転する様子を見るのは、パズルのピースがはまったような快感があります。難しい単語が多い分野ですが、基本は「向きを教えてあげる」こと。これさえ守れば、世界中の人にあなたのメッセージを届けることができます。