Topics

ニュースでも出したように、リベロジックのWEBサイトを多言語対応いたしました！

現在は6言語のみの対応ですが、1言語やってしまえばぶっちゃけ一緒で、Googleにある全言語対応も別にできると言えば、できちゃいます。

「まずは翻訳してみよう」から始まった実験

きっかけは単純です。
「Webアクセシビリティ云々で、海外からのアクセスも増えてきたし、とりあえず翻訳してみる？」
という軽いノリ。
でも、ちゃんとやると意外と大変。翻訳API、キャッシュ、ビルド、コスト、キャッシュ更新……などなど、想像以上に“ややこしい裏側”がありました。
というわけで、今回の多言語化はGoogle Cloud Translation APIを使って、ビルド時に自動で翻訳する仕組みを採用しています。

仕組みはこんな感じ

ビルド時に scripts/translate-html-cache.mjs が走ります。
キャッシュ（translate-cache.json）にすでに翻訳済みの文言があればそれを使い、なければGoogleの翻訳APIを叩いて翻訳。
新しい翻訳はキャッシュに追記されて、次回からは再利用されます。ただし、自動デプロイ環境ではキャッシュが反映されないため、ローカルで一度ビルド＆プッシュするのがポイント。

そうすることで、無駄なAPI課金を防げます。（最初のうちはけっこうGoogle課金の画面を見る羽目になります…笑）

翻訳のクセと戦う

やってみると、いろんな味のある翻訳が出てきます。
「リベロジック株式会社」が「Liberlogic Inc.」になったり、ときには「Libelogic」になったり……。

もはや誰！？って感じです。GoogleのGlossary（用語集）機能も試してみましたが、文単位でしか効かないため、「リベロジック株式会社」単体では制御しづらい。
なので最終的には、自前で置換ロジックを実装しました。

en: [
  { from: /Liberlogic/g, to: 'Liberogic' },
  { from: /Libelogic/g, to: 'Liberogic' },
],
de: [
  { from: /Liberlogic/g, to: 'Liberogic' },
  { from: /Libelogic/g, to: 'Liberogic' },
],

さらにGoogleスプレッドシートと連携し、そこに登録したルールを自動で反映できるようにしました。これで「リベロジック」も「リベロ爺」も守れます。

対応言語の選び方

最初は英語・中国語（繁・簡）・フランス語・スペイン語・日本語は元々あるので6言語。
Slack上ではこんな会話もありました。

「ロシア語はどうしようか？韓国語とタイ語とかどう？」

「アラビア語はCSSが面倒だからあとで」

「いや、ヒンディー語はアクセス爆増しそうだからやめとこう」

……と、ゆるいノリで言語を選定。
とはいえ、この6言語で世界の75%以上の利用者をカバーできる計算らしいですね、どこかに書いてありました。

実はけっこうグローバル化進行中？

現時点でのURL例はこちら：

• 🇯🇵 日本語
• 🇬🇧 英語
• 🇩🇪 ドイツ語
• 🇪🇸 スペイン語
• 🇨🇳 簡体中文
• 🇹🇼 繁体中文

今後は30言語くらいまで増やしていく予定（？）です。
そのうち右から左に読むアラビア語（rtl対応）にも挑戦予定。
乞うご期待ください！

まとめ：お手軽多言語化のすすめ

今回の仕組みは、「まずは翻訳してみたい！」というお客様にぴったり。
Google Cloud Translation API とキャッシュ運用で、比較的ローコストに多言語対応サイトを作ることができます。
本格的なローカライズを目指す前の実験フェーズとしても最適です。

✳️ ちなみに

多言語化でちょっと変な文言やレイアウトがあっても、順次修正中なのでどうかあたたかい目で見守ってください。（リリース優先のため、細部は後日CSSで直します！）

🌏 最後にひとこと

「翻訳は完璧じゃなくても、世界には伝わる」
そんな気持ちで、今日もLiberogicはWebを作っています。完璧じゃなくても、伝わることがある。だからこそ、お客様の前にまず自分たちでやってみる。失敗上等、実験上等。Liberogicは今日もWebの最前線で検証を重ねています。
と言っている間にGoogle翻訳は日々進化しているのでした！ちゃんちゃん