CodeIgniterで多言語対応(Language)を徹底解説!言語切り替え機能を実装
生徒
「世界中の人が使うWebサイトを作りたいのですが、日本語以外も表示させるにはどうすればいいですか?」
先生
「それならCodeIgniterの多言語対応(Language)という仕組みを使えば、日本語、英語、中国語などを簡単に切り替えられますよ。」
生徒
「難しそうですね…。プログラミング初心者でもできますか?」
先生
「大丈夫です。仕組みを理解すれば、ボタン一つで表示を切り替える機能が作れます。一緒に見ていきましょう!」
1. 多言語対応(Language)とは何か?
Webサイトを見ているとき、右上の方に「English」や「日本語」と書かれたボタンを見かけたことはありませんか?ボタンを押すと、サイト内の文章がパッと一瞬でその国の言葉に変わりますよね。これが多言語対応、あるいは国際化(i18n)と呼ばれる機能です。
通常、HTMLに直接「こんにちは」と書いてしまうと、そのサイトは日本語でしか表示されません。しかし、CodeIgniterというPHPの便利な道具箱(フレームワーク)を使うと、「挨拶の言葉」というラベルを用意しておき、設定によって中身を「こんにちは」にしたり「Hello」にしたりと、柔軟に変更できるようになります。
パソコンを初めて触る方にとって「変数」や「フレームワーク」といった言葉は難しく感じるかもしれませんが、要は「言葉の入れ替え用フォルダ」を用意して、状況に応じて中身を差し替えるというイメージを持っておけば大丈夫です。
2. 言語ファイルの準備:言葉の辞書を作ろう
まず最初に、CodeIgniterの中で「この言葉は日本語だとこう、英語だとこう」という定義をするための辞書ファイルを作成する必要があります。CodeIgniter4では、app/Languageという場所にフォルダを作って管理します。
例えば、日本語用のフォルダ「ja」と、英語用のフォルダ「en」を作り、その中に同じ名前のファイルを作ります。ここでは、サイト全体の共通メッセージを管理するMessage.phpというファイルを作ってみましょう。
日本語用ファイル(app/Language/ja/Message.php)
return [
'welcome' => 'ようこそ、私たちのサイトへ!',
'greeting' => 'こんにちは、ゲストさん。',
'change_lang' => '言語を切り替える',
];
英語用ファイル(app/Language/en/Message.php)
return [
'welcome' => 'Welcome to our website!',
'greeting' => 'Hello, Guest.',
'change_lang' => 'Switch Language',
];
このように、左側に「welcome」というキー(見出し)を書き、右側に実際の文章を書きます。これで、システムが「welcomeを表示して!」と言われたときに、設定が日本語なら日本語を、英語なら英語を表示できるようになります。
3. 言語を呼び出す方法:lang関数を使ってみよう
辞書ファイルができたら、今度はそれを画面(ビュー)に表示させる必要があります。CodeIgniterには、特定の言語を呼び出すためのlang()という専用の魔法の言葉(関数)が用意されています。
使い方は非常にシンプルです。lang('ファイル名.キー名')という形で記述します。例えば、先ほど作った「Message.php」の「welcome」を表示させたい場合は、次のように書きます。
<div class="container mt-5">
<h1><?= lang('Message.welcome') ?></h1>
<p><?= lang('Message.greeting') ?></p>
<button class="btn btn-primary"><?= lang('Message.change_lang') ?></button>
</div>
このコードをブラウザで実行すると、設定されている言語に応じて適切な文章が表示されます。直接文章を書かないことで、後から「やっぱりこの挨拶を変えたいな」と思ったときも、辞書ファイルを書き換えるだけでサイト全体の修正が完了するのです。これは保守性(メンテナンスのしやすさ)が高い状態と言えます。
4. 現在の言語を切り替える仕組み:コントローラーの設定
次に、ユーザーが「英語で見たい!」と言ったときに、プログラム側で言語の設定を書き換える仕組みを作ります。これにはコントローラーという、プログラムの「司令塔」の役割をするファイルを使います。
コントローラーの中で、現在のセッション(ユーザーの今の接続状態)に対して「この人は英語を希望しています」という情報を保存するように命令します。以下のコードは、URLの末尾に「ja」や「en」を付けてアクセスしたときに言語を保存する簡単な仕組みの例です。
namespace App\Controllers;
class Language extends BaseController
{
public function switchLanguage($locale)
{
// 使える言語のリストを確認
$supportedLocales = ['en', 'ja'];
if (in_array($locale, $supportedLocales)) {
// セッションという場所に、選んだ言語を覚えさせる
session()->set('user_lang', $locale);
}
// 前のページに戻る
return redirect()->back();
}
}
ここで出てくる「セッション」とは、ブラウザを閉じたり一定時間が経過したりするまで、サーバー側でユーザーの情報を一時的に預かっておく仕組みのことです。これにより、ページを移動してもずっと英語のままサイトを見続けることができます。
5. 自動で言語を適用する「フィルター」の設定
言語をセッションに保存しただけでは、まだ不十分です。ページを開くたびに「今は日本語かな?英語かな?」とチェックして、システム全体に教える必要があります。これを自動で行ってくれるのがフィルター(Filters)という機能です。
フィルターは、ページが表示される直前に「ちょっと待って!今の言語設定を確認するよ」と割り込んで処理をしてくれるガードマンのような存在です。app/Filters/LanguageFilter.phpというファイルを作って、以下のように記述します。
namespace App\Filters;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;
class LanguageFilter implements FilterInterface
{
public function before(RequestInterface $request, $arguments = null)
{
// セッションから保存された言語を取得
$lang = session()->get('user_lang') ?? 'ja';
// CodeIgniter全体に今の言語をセットする
service('language')->setLocale($lang);
}
public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
{
// 今回は特に何もしない
}
}
この「before」という場所の中に書いた命令は、どんなページにアクセスしても「ページが表示される前」に必ず実行されます。これで、ユーザーが選んだ言語が常に反映されるようになります。プログラミングでは、このように共通の処理を自動化することがミスを防ぐコツです。
6. 初心者がつまずきやすいポイントと解決策
多言語対応を実装していると、初心者のうちは「文字が化けてしまった」「表示が変わらない」というトラブルに遭遇することがあります。特によくあるのが、文字コードの問題です。
PHPのファイルを保存するときは、必ず「UTF-8」という形式で保存するようにしましょう。これは、世界中の文字を正しく表示するための共通ルールです。Windowsのメモ帳などを使うと違う形式になりやすいので、VS Codeなどのプログラミング用ソフト(エディタ)を使うのがおすすめです。
また、フォルダ名やファイル名を一文字でも間違えると、CodeIgniterは「辞書が見つかりません!」と怒ってしまいます。「ja」を「jp」にしていたり、大文字と小文字を間違えていないか、落ち着いて確認してみましょう。エラーメッセージが出たときは、それはプログラムが「ここが変だよ」と教えてくれているヒントですので、怖がらずに読み解くことが大切です。
7. サイト訪問者に優しい「言語切り替えスイッチ」のデザイン
最後に、ユーザーが実際にクリックする「スイッチ」を画面に配置しましょう。見た目が分かりやすいように、Bootstrapというデザインの枠組みを使って、おしゃれなリンクを作ります。
リンク先は、先ほどコントローラーで作ったswitchLanguageという機能に繋がるように設定します。アイコン(地球儀のマークなど)を添えると、直感的に「ここで言葉が変えられるんだな」と伝わります。
<nav class="navbar navbar-light bg-light p-3">
<span class="navbar-brand">My Global Site</span>
<div class="d-flex">
<a href="/language/ja" class="btn btn-outline-secondary btn-sm me-2">
<i class="bi bi-translate"></i> 日本語
</a>
<a href="/language/en" class="btn btn-outline-secondary btn-sm">
<i class="bi bi-globe"></i> English
</a>
</div>
</nav>
実行結果は以下のようになります。
画面上部に「日本語」と「English」のボタンが表示され、
「English」をクリックするとページ内の挨拶が「Welcome!」に変わる。
このように、多言語対応は「辞書ファイルの準備」「言語を呼び出す設定」「ユーザーが切り替える仕組み」の3つのステップで成り立っています。最初は難しく感じるかもしれませんが、一つひとつの部品を組み合わせていく楽しさを味わってみてください。これをマスターすれば、あなたの作ったWebサイトが世界中の人に届けられるようになりますよ!