PLAY DEVELOPERS BLOG

HuluやTVerなどの日本最大級の動画配信を支える株式会社PLAYが運営するテックブログです。

HuluやTVerなどの日本最大級の動画配信を支える株式会社PLAYが運営するテックブログです。

多言語翻訳サービスの WOVN について調べてみた

こんにちは、SaaSプロダクト開発部第1開発グループの平原です。 最近テイルズオブヴェスペリアをプレイしましたが、なんと開始時に日本語/英語が選べるんです。そんな15年以上前のゲームに思いを馳せつつ、今回は多言語翻訳について話します。 今回は開発の一環で調査した多言語翻訳サービス、中でも個人的に一番公式ドキュメントが丁寧で良かったWOVNについて紹介します。

多言語翻訳サービスとは

サイト上のテキストやコンテンツを複数の言語に翻訳するサービス。多くは以下の方法で実現しています。

  • ページにスクリプトを追加し、ページ読み込み時やユーザーの言語選択時に翻訳サービスを呼び出し(Google Translate、DeepLなど)動的に翻訳する
  • サーバーサイドでテキストの翻訳を行い、ページ読み込み時に翻訳済みのページを返す

WOVNの基本情報

サポートサイトはこちら。契約すると管理画面が発行され、以下のようなことができます。

  • 翻訳結果の修正
  • 用語集(固有名詞等の翻訳を保存する図鑑)の登録
  • 言語切り替えウィジェット(後述)の設定
  • レイアウト調整(翻訳によってレイアウト崩れが起きるため)

対応言語

公式サイトのこちらに掲載。 79言語と全て紹介するには量が多いので割愛しますが、要件として多そうな「英語」や「中国語(簡体/繁体)」「韓国語」はサポートしていました。

対応ブラウザ

主要なブラウザはサポートしていました。

ブラウザ サポート
Google Chrome
Firefox
Safari
Edge(Chromium)
Edge(IE モード)

利用上限について

サービス利用量として以下のような値が計測されています。それぞれに上限値が設定されており、これを超過するとサービスの利用が一部制限されます。

  • 翻訳文字数
  • 翻訳ページ数
  • PV数

言語の切り替え方法

公式サイトには以下のように複数種類の切替ウィジェットがありました。

左:デフォルトの言語切替ウィジェット

右:独自言語切替ウィジェット (wovn-languages クラスを付与した任意のHTMLタグにウィジェットを表示する)

これらのウィジェットは色や表示位置、縦横向き等を管理画面から指定できます。

WOVNでの翻訳導入形式

WOVNには3つの翻訳導入形式があります。いずれも翻訳エンジンを使った機械翻訳で、2023年9月時点で以下の翻訳エンジンをサポートしています。

  • Google Translate
  • Microsoft Translator
  • Mirai Translator
  • DeepL

それぞれの方法を動作フローを含めて紹介します。

スクリプト方式

HTMLに1行のスクリプトを追加するだけで翻訳ができるので、導入が最も簡単です。

メリット
  • タグの挿入だけなので導入コストが他の方式よりも低い。
デメリット
  • 翻訳が動的に実施なので、検索エンジンによっては正しくページの内容がインデックスされない(SEOに弱い)。
  • ページ読み込み後に翻訳なので一瞬元言語が表示されてしまう。

動作フローですが、公式のフロー図での説明がありました。サポートが手厚い...。

ライブラリ方式

スクリプト方式のデメリット2点をカバーしていますが、導入できないサーバー環境があったり、導入コストがかかります。ライブラリには PHP / Java / Ruby / C# / WordPressプラグイン があります。

メリット
  • 翻訳後ページが検索サイトにインデックスされる(SEO対策)。
  • 翻訳したHTMLを読み込むので、一瞬だけ元言語が表示されるといったことがなくなる。
デメリット
  • ライブラリの動作要件に合わない場合、導入ができない。
  • スクリプト方式よりも導入コストがかかる。

動作フローですが、公式のフロー図での説明がありました。

もう少し掘ると、以下のような処理をしています。

1. 翻訳後URLに関する処理を追加

翻訳したページのルーティングを追加します。以下のいずれかをライブラリのオプションで指定できます。

ベースURL: https://example.com/content

① パス形式: https://example.com/en/content

② サブドメイン形式: https://en.example.com/content

③ クエリ形式: https://example.com/content?wovn=en

2. HTMLの翻訳処理

3. 言語情報の追加

<link>タグにhreflang属性を、<html>タグにlang属性を追加します。これらは検索時に適切な言語のページが、検索エンジンに識別されやすくなるためSEO対策になります。

プロキシ方式

ページへ遷移した際のHTMLリクエストの通信経路にWOVN Proxyを導入することで、WEBサーバーにライブラリ導入を行わずに多言語翻訳をします。

メリット
  • ライブラリ方式のように環境へ影響されることがほぼない。
  • プロキシへの経路設定で導入できるので、元の環境への復旧作業がすぐにできる。
デメリット
  • WOVN側のプラットフォームの障害に影響を受けてしまう。

動作フローですが、公式のフロー図での説明がありました。

終わりに

今回はWOVNを取り上げましたが、世の中には数多の多言語翻訳サービスがあり、利用者の用途や予算などでサービス / 実現方式の選択肢は変わります。

もし検討することがありましたら今回紹介したWOVN以外にも掘ってみてください。びっくりする数がありますので。