Pages Navigation Menu

For Creative Communication

ちょっと詳しいwovn.ioの使い方(Webサイト多言語対応)

front_logo

1行のスクリプトでウェブサイトを多言語化できる「WOVN(wovn.io)」をこのブログにも導入してみました。「たった一行で」という枕詞にインパクトがあるwovnですが、実際のWeb制作現場ではどのように活用可能なのでしょうか?

仕事柄グローバルWebサイト・多言語展開を手がけることも多いWebディレクターの視点から、wovnを使ったサイト多言語化の可能性について考えてみます。

wovn8_top

導入してみました

まず、簡単に使用感と機能の紹介から。アカウント作成まわりは省略します。

wovn2

“Add page”と出ますが、WordPressなどCMS管理しているサイトでは、「ドメイン」を登録しておくと、ページが開かれるたびにページがリストに追加されます。Free版の制約は「Publishできるのが50枚まで」なので、気にしなくてOK。ページ数が多いサイトでは若干探しにくくなりますが、URLで検索をかければ表示は一瞬です。

wovn1

編集対象ページに存在するテキストに対して「対訳記入欄」が用意されています。

wovn4

機械翻訳(Bing Transalteを使用。2015年8月時点で精度はそこそこ?)を信用する場合、まずはページ全体を一括で機械翻訳にかけます。
※手入力してから一括機械翻訳すると上書きされるので注意。

wovn6_dictionary

“Jisho”を使うと固有名詞の対訳など、機械翻訳用の翻訳定義を作っておくことができます。頻出語句の精度Upに便利。

wovn7_pro

ProはGengoのAPIを使っていて、文字数を数え上げて見積を出し、そのまま発注をかけることができるようです。(Continueは押さなかったのでその後の遷移は不明w)

wovn5

もちろん中国語も!
タイ語も。

wovn3

2015年2月のアップデートで、画像の差し替えも可能になりました。昨今Webフォントの使用なので画像文字はかなり減っていると思いますが、図版などの多言語対応にも対応。

wovn.ioは、こんな感じに使っていくサービスです。

「たった一行で」ってどういうこと?

wovn.ioが何をやっているかというと。

(1) 対象となるページのソースコードを拾ってきて「文」単位でテキストを抽出し、対訳用の入力欄をwovn.io(外部サービス)上に作成。

(2) 対訳を作成しPublish。

(3) Publishされたページで、wovn.ioのウィジェットから対象言語を選択すると、ブラウザ上で翻訳元のテキストと対訳を動的に書き換えて見せてくれる

という感じ。挙動としてはGoogle翻訳のプラグインが同じことをやっていますね。wovn.ioのメリットは、手動でより質の高い訳を当てられる「精度」と、表示の速さ。Webサイトのアドオン機能としては、とてもスマートに本質的な価値を出しているサービスだと思います。

デメリットとしては、やはり「言語切り替えウィジェットの存在が地味」というところで、デフォルトで右下に表示されるウィジェットの位置やスタイルを変えることはできますが、例えば国旗付きの言語選択UIとかに統合したり、IPで判別して最適な言語に切り替えたりといったところは、おそらくまだできなさそうです。

wovn.ioを使ったWebサイト多言語化の段取り

このwovnを使うと、小規模なサイトでは確かに、ごく簡単に多言語バージョンのサイトを用意することができます。

(1) 翻訳を注力する「優先度の高いページ50点」を決める

Free版の上限ページ数は50ページなので、訳を作るページをまず絞りましょう。この数カウントは「ページ×言語数」なので、例えば英中中の3言語網羅すると上限は16ページ。とはいえ、主要なページはけっこう対応できるかもしれません。

  • 企業情報や組織概要、沿革などの固定ページ
  • イベント詳細ページ
  • アクセスや営業時間などの情報ページ
  • 小規模なECサイトの商品情報、カートプロセス
  • お問い合わせページ

なお、wovnは「既に存在するページを解析して、後から翻訳で差し替える」サービスなので、ブログの記事一覧など頻繁にコンテンツが追加される部分には向いていません。アクセス解析でランディングページの上位(うちのブログで言うと検索流入が継続的にあるページは少数)や、グローバルナビから行ける第2階層までを網羅、などと考えるとよさそうです。

(2) 対象ページまたはCMSテンプレートにwovnのコードを導入

Code snippet を <head> の直前(Google Analyticsコードと同じ位置)に挿入します。WordPressの場合は header.php を修正するのが早いです。

(3) 対訳を作成

1で選んだページを開いて、対訳を作成します。

wovnはあくまでも「ページ単位」の翻訳エンジンなので、テンプレートで共通化された部分も、都度対訳を入力しなければなりません。ドロップダウンメニューやフッターサイトマップなど、共通部分が多い場合は非常に面倒ですが、まあコンテンツエリアとグロナビ以外は置いておく(か機械翻訳任せ)というのも一つの判断だと思います。

蛇足:CMSの多言語対応機能との比較

ところで、CMSの多言語対応機能にはいくつかのパターンがありますが、

  • ページ作成時点で複数言語のページを用意できる
  • テンプレート管理の共通部分も翻訳できる
  • 管理画面も多言語化できる
  • パーマリンク(固有のURL)を別々にできる
  • 言語ごとにコンテンツやページを変えられる

といった辺りが、wovnだと実現できない要件になると思います。このあたりはConcrete5のInternationalizationアドオン(JTBGMTのプロジェクトでお世話になりました)がとてもよくできているし、オープンソースCMSの中ではDrupalが柔軟で使いやすいと評判です。CMSの場合は、テンプレート側の設計・実装も必要になるので、大規模グローバルサイト構築プロジェクトでは、気合い入れて設計が必要なところです。

また、2015年7月に発表された「WOVN++」(サーバサイドを書き換え?phpとruby?してNaverや中国の検索エンジンに対応する)のベータをさっき申し込んだので、挙動としくみを見て、続報を書きたいと思います。

wovnに関する関連記事:

コメントを残す