apice-technologymemorandum

Web多言語化! Webページを自動的に、英語に翻訳する

インバウンド対象のサイトを作るときに、しっかりした多言語サイトを構築する方向でサイトを作ることが多いのですが、
本格的な多言語ではなく、Google 翻訳でサクッと、Webページを多言語化することができるので、
インバウンドのお客様に向けて、自社のサイトをまずは簡単に、英語なり韓国語に置き換えるだけで、
結構使えるサイトになるようです。

下記は設定の仕方です。



自動翻訳の言語リストを管理する
Chrome で自動的に翻訳する言語を管理できます。

パソコンで Chrome を開きます。
右上のその他アイコン その他 次の操作 [設定] を選択します。
左側の [言語] を選択します。
[Google 翻訳] の [これらの言語を自動的に翻訳する] の横にある [言語を追加] を選択します。
追加する言語を選択します。
[追加] を選択します。
言語を削除するには、削除する言語の横にある削除 を選択します。

日本語で作ってあるサイトを、まずは表示するときに特定の言語で表示するような設定が、google で利用できます。
まずは、Google Chrome を開いて右上に ... が縦になっている部分をクリックします。
そうするとMENUが出てくるので、設定をクリックしますね。

設定に入ると、右側に出てくるMENUで言語 があるので、言語を設定します。
通常は一番上に

1.日本語
この言語がGoogle Chrome UI の表示に使用されます。

2.英語
この言語がページを翻訳する場合に使用されます。

個のメニュの右に ... が縦になったマークがあるので、これをクリックして
英語が Google Chrome UI の表示時に使用されます。 となるようにクリックすると、
そのサイトが表示されるとき! というかデフォルト表示言語が 英語に代わるので、
インバウンド対応にすぐ利用可能です。

サイトそのものを、インバウンド用にしてしまうだけなら、この設定で問題なくインバウンド対応の
Webページが完成します。

また、ログインしたChrome ごとにデフォルトの言語が変更できるようです。
ただサイトに来てくれた時に、英語で表示されるやり方ではないので、インバウンド対応という意味では、
ひとひねりが必要です。

各人がこのサイトを見るときは、英語で見たいな! となった時に設定をする。

このやり方がGoogle 翻訳 API で実現できるなら、 WebサイトのTOPページを出すときに、デフォルトUI 言語設定を変えてやればよいのでが、 ...
そこまでは調べていませんので、時間があるときに調べましょう。


超簡便方法です。


上記の方法でやると、各ページに Google翻訳でどの言語で見るかを聞いてくるようになりますが、
最初にひと手間必要です。
プログラムがWebページを出すときに、Google 翻訳をかける方法も書いておきます。

プログラムからHTMLを出力するときに翻訳して出力 



ステップ1: Google Cloud プロジェクトの作成とAPIの有効化
Google Cloud Consoleにアクセスし、Googleアカウントでログインします。
新しいプロジェクトを作成します。
サイドメニューの「APIとサービス」から「ライブラリ」に移動し、「Cloud Translation API」を検索して有効にします。
「認証情報」タブに移動し、APIキーを作成します。このキーは後でPHPコード内で使用します。
ステップ2: Google Translate API を利用する PHP コードを作成
次に、PHPからGoogle翻訳APIを呼び出すコードを作成します。

php
コードをコピーする
// APIキーを設定
$apiKey = 'YOUR_API_KEY';

// 翻訳対象のテキスト
$text = "こんにちは、世界!";

// 翻訳元言語と翻訳先言語を設定
$source = 'ja'; // 日本語
$target = 'en'; // 英語

// Google翻訳APIのエンドポイント
$url = "https://translation.googleapis.com/language/translate/v2?key=$apiKey";

// リクエスト用データ
$data = [
'q' => $text,
'source' => $source,
'target' => $target,
'format' => 'text'
];

// cURLを使ってAPIにリクエストを送信
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));

$response = curl_exec($ch);
curl_close($ch);

// APIからのレスポンスをデコード
$responseData = json_decode($response, true);

// 翻訳されたテキストを取得
$translatedText = $responseData['data']['translations'][0]['translatedText'];

// 結果を表示
echo "翻訳結果: " . $translatedText;
?>
ステップ3: サーバーに配置しテスト
上記のPHPコードをファイル(例: translate.php)として保存します。
ローカルサーバーまたはWebサーバーにアップロードします。
ブラウザで該当のPHPファイルにアクセスし、正常に翻訳が行われているか確認します。
ステップ4: 動的なHTMLページへの適用
上記コードをもとに、HTMLページ生成の際にGoogle翻訳APIを呼び出して、ページ内のテキストを動的に翻訳して表示することができます。
これで、PHPからGoogle翻訳APIを使用して動的にHTMLコンテンツを翻訳する機能を実装できます。

テキスト出力に関して、サブルーチン化しておくと、便利でメッセージやタイトル出力時に翻訳を実施すればいいですね!
ただこの方法だと 翻訳する側、された側でメッセージ長さが違ってくるので、UIの画面バランスは崩れます。
多言語の場合このあたりの調整が厄介ですね。

Web制作カテゴリーに戻る

1