外部向けサービスにWOVN.io(多言語対応サービス)を導入してみた

こんにちは、サーバーサイドエンジニアの花田です。

業務では主に管理画面系の開発をしています。
今回は外部向けサービスを多言語化した話を書こうかと思います。

構成

Rails(5.2.2) + Vue.js(2.5.16)

外部向けサービスの概要

クライアントの取引開始から受発注完了まで行うサービス

なぜ多言語対応を行うの？

海外のクライアントが使用するため。最低限英語対応は行いたい。
あわよくば中国語対応ができれば嬉しいという状況でした。

多言語対応化までに何を行ったか

最初に

まずは調査！
とりあえず現状のコードを調べ、多言語対応が必要な箇所を洗い出しました。
調査結果から以下の項目に対応が必要だとわかりました。

多言語対応一覧

項目	詳細
タイトル・項目	各画面で表示している文言
メール	アカウント新規発行メール、パスワード発行メール等の文言
通貨	円、ドル等の文言
カレンダー	ライブラリ内の文言

また多言語対応が必要ではない箇所も洗い出しました。

多言語非対応一覧

項目	詳細
ユーザー入力	備考・詳細等のユーザーが入力した文言

そのほかに調査で分かったこと

日付の表記をどうするか
- 日本：2019/06/09 10:24:10
- 海外："Fri, 09 Jun 2019 10:24:10"
言語の切り替えはどうするか
- URLで判断
- headerで判断
金額の表記
- アメリカなどでは「10.00」と小数点がある
- イタリア語圏、ドイツ語圏などでは「1.234.567,89」とカンマとピリオドの使い方が日本と逆

ここで問題が

そもそも考えることも作業量も多い問題!!
(調査前はRailsの国際化(i18n)APIを用いればすくに終わるでしょ！と思っていたけどそんなことはなかった・・)

コード面でも考えることが多く、翻訳ロジックはview modelで対応する？ DBに翻訳結果を保持する？翻訳言語が増えたらif文が増えそうなどなど問題が浮き彫りになり、また多言語対応のリリースまで時間が無く、早く多言語対応しないといけない状態。コードも綺麗に書きたいから考える時間がほしい、、

そう、簡単にいうと悩んでました！

解決策

あるslackチャンネルでのやりとり

A：多言語対応している社内サービスありますか？教えて下さい！
B：WOVN.io「多言語化のすべての課題に答える翻訳ソリューション」
   簡単にいうと、JS入れとけば、ユーザーがプルダウンで言語選択するだけ
   テキストの翻訳対応可能です～！
A：なんとこのようなサービスが！自前で作ろうと思っているのですが仕組み等参考にさせて頂きます！
   ありがとうございます!

（※　ほぼ原文のまま）

この後、WOVN.ioを導入することに決定しました！

WOVN.ioとは？

多言語化のすべての課題に答える翻訳ソリューションシステム開発・サイト運用・翻訳管理にかかる不要なコストを削減し、あなたのビジネスを世界に広げるサポートを行います。

上記のやりとりでもあったように、「JS入れておけば、ユーザーがプルダウンで言語選択するだけ簡単に翻訳できるサービス」です。
（※ JS以外にサーバーサイドで対応することも可能）

公式URL; サイト多言語化・webページの翻訳対応はWOVN.io

さっそく導入してみた

以下のコードを追加

app/view/layouts/staff.html.slim

script { src='//j.wovn.io/1' data-wovnio='key=ユニーク値' async }

(※　ユニーク値はWOVN.io管理画面で分かります。)

これで導入完了です。もうほんとこれだけ？ってくらい簡単に導入できました。

とはいえ、導入までには準備が必要です。

WOVN.io管理画面について

公式に動画付きの導入方法ガイドがあるので、そちらを見てもらえれば概要はほぼつかめると思います
公式URL; さあ！WOVN.ioを始めましょう! – Wovn Technologies
簡単に操作方法を説明すると

プロジェクトを作成する
ページを作成する
ページはこちらで追加もできるが、設定で自動追加も可能
ページ画面から「機械翻訳」を押すと自動で対象文字を読み取って翻訳
「保存＆公開」ボタンを押すと公開される

あとは、対象ドメインの登録や自動翻訳の有無など細かな設定を行いました。

肝心な言語設定
当初は英語対応+中国語対応できたらいいなっと思っていたのですが、「英語」「簡体中国語」「繁体中国語」と苦労すること無く3言語も導入できました！しかもとても簡単に！

導入後発生した作業

導入まではびっくりするぐらい簡単に終わったのですが、多言語対応がすべて終わったわけではありません。

WOVN.ioの作業

ネイティブ翻訳
- 機械翻訳だと意味が伝わらない箇所があるので、社内の中国出身・アメリカ育ちのスーパー社員の方に翻訳依頼を投げ、その結果をWOVN.io管理画面に登録

WOVN.io以外の作業

メールの本文
- さすがにメール本文はWOVN.ioではできないのでRails側で対応
ユーザーが入力した文字等を翻訳除外にする
- 翻訳してほしくない箇所もあるのでコードを修正。(wovn-ignore)を追加するだけ

span(wovn-ignore) {{ Staff.name }}

カレンダーライブラリの翻訳
- ライブラリの翻訳方法が分からずリリースまで時間もなかったため、常に英語表示することで対応
iframeの翻訳（エラーページ）
- iframe元のhtmlにWOVN.ioを追加することで対応。ドメインも別途登録が必要
などなど

WOVN.ioの感想

簡単かつ迅速に多言語の導入ができるのため、とても魅力的だと思いました。
しかし「翻訳単語がうまく登録できない」「登録した単語が翻訳されない」など、原因を探るためWOVN.ioのドキュメントを読み返したり、担当者にメールで質問することもありました。また「ページャー付きの画面がうまく翻訳されない」など、WOVN.io側に修正をお願いした箇所もありました。
WOVN.io以外にも言えることですが、外部サービスを導入する際には、そのサービスの仕様を理解する必要があるのでそれなりに時間は必要だと感じました。

ですが、自前で多言語対応するよりもWOVN.ioを導入したほうが、早くリリースできたのでWOVN.ioを導入して正解でした！