概要

WordPressサイトをWOVNというSaasのサービスで他言語化してみたので、その感想を書きます。

WOVNの仕組み

サイトに翻訳文を表示する仕組み

公式ドキュメントに書かれていることを自分なりに解釈すると

WOVNの方式には
・スクリプト
・ライブラリ
・プロキシ
の３つがあるが、基本的には下図のように

自サイトにブラウザからアクセスが行く
翻訳文をWOVNサーバにリクエストする
翻訳文がWOVNサーバからレスポンスされる
HTML上の文字列を翻訳文に差し替える
翻訳したHTMLをブラウザに返す

といった流れになる

このうち2~4はWOVN側のスクリプトで自動的に実行される
この2~4の「翻訳文のリクエスト〜差し替え処理」がどの場所で実施されるかが各方式によって異なる

自分の理解だと下記

スクリプト：　ブラウザ上で実施
ライブラリ：　自サイトのサーバ側で実施
プロキシ：　WOVN側のサーバで実施

WOVNが翻訳文を取得する流れ（想定）

WOVNがサイトから翻訳対象のテキストを取得する流れは以下だと思う
※ 公式ドキュメントにこのあたりの仕組みが書いてなかったので想定で書いてます。

自サイトに埋め込んだWOVNのスクリプトがHTMLから翻訳対象のテキストを抽出・収集
抽出されたテキストをWOVNの管理画面から任意の言語に翻訳
翻訳結果はWOVNのサーバ・CDNに配置され以後のサイト翻訳に利用される

良いところ

以下はWOVNを導入して「良いな」と思ったところ

導入が簡単

WPサイトだと導入は簡単、公式が配布しているプラグインを入れるだけ

ドキュメントが日本語対応

WOVNのドキュメントは日本語で書かれているので、導入やシステム概要の理解にあたって躓くことが無かった
※ 英語の読めない自分にはありがたい

翻訳がUIが直感的

管理画面から翻訳文を流し込むにあたって
「ライブ編集」という機能が使いやすかった

イメージだと自サイト上のテキストをリアルタイムで翻訳していく感じ
自分が今”どこ”のテキストを翻訳しているのか分かりやすかった

注意すべきところ

当然といえば当然だがWOVNは動的要素が翻訳されない

なのでWOVNが翻訳対象として収集するのは基本的にHTMLタグに設定されている静的なテキストになる
たとえば下記は翻訳対象になる

<title>タイトル</title>
<p>本文</p>
<a href="hoge.jp">リンクテキスト<a>

逆に翻訳対象にならないのは動的要素全般
例えば下記は翻訳対象外になる

javascript等でページ表示後にHTMLに埋め込んだテキスト
<script>タグに囲まれたスクリプト内の文字列全般

参考

動的要素への対応方法

動的に変わるテキストを翻訳するための手法が、いくつか用意されている

ダイナミックバリュー

ダイナミックバリューという機能がある
これは、前述のライブ編集機能を使えば、静的テキストと同じ要領で動的テキストを編集できるというもの

ただ、自分で使った限りではあまり効果を実感できずで
翻訳したはずのテキストが元に戻っているなどの事象がよくあった

API

WOVNはいくつかのAPIを提供している

APIの中には「指定テキストの翻訳文をWOVNサーバから取得する」ものもあり
この機能を使えばJavascriptの中でも翻訳文を取得し表示に用いることができる様子

// 例
WOVN.io.translateTexts('en', 'ja', ['good afternoon', 'good night'])
{'good afternoon': 'こんにちは', 'good night': 'おやすみ'}

ただし一度翻訳文をWOVN管理画面から投入しないといけないようで、それが面倒かも

HTML内に非表示のテキストを埋める

WOVNは非表示のテキストも取得対象になっている
乱暴だがHTMLに非表示で要素を埋め込んで、それを後からscriptで参照する方法も可能

# 例

<style>
#b {
    display: none;
}
</style>

<p id="a" hidden>非表示テキストA</p>
<p id="b" >非表示テキストB</p>

<script>
var a = document.getElementById('a').textContent;
var b = document.getElementById('b').textContent;
</script>

感想

総じて良いサービスだと思う
特にWordpressサイトを簡単に多言語化できるのはすごい

ただやっぱり動的な機能が絡んでくると、途端に実装が面倒になったり、翻訳されないケースが発生する。

また、翻訳されないテキストが発生してもエラーが表示されないので
原因の調査が難しく、都度サポートに問い合わせる事になるのも、もどかしい所だった

WordPressサイトをWOVNというSaaSで他言語化してみた感想

概要