✏️
Translator API による多言語対応
はじめに
プロダクト開発において、多言語対応の機会は少なくないのではないでしょうか。
自前で多言語対応の仕組みを作ったり、外部のサービスを用いることかと思います。
そのような状況の中 Chrome 131 から Origin trial で Translator API というものが出ました。
この記事では、Translator API をさわってみた内容を書かせていただきます。
Translator API
Chrome 131 から Origin trial で使用できる API です。
ローカル AI モデルを使用してブラウザでテキストを翻訳できます。
Translator API がサポートされているか確認
declare const self: any
if ('translation' in self && 'createTranslator' in self.translation) {
// The Translator API is supported.
}
言語ペアのサポートを確認
canTranslate() には、次の 2 つのフィールドを持つ options パラメータが必要です
- sourceLanguage: テキストの現在の言語
- targetLanguage: テキストを翻訳する言語
各値には BCP 47 言語のショートコードを文字列として使用できるようですが、オリジントライアルでは、サポートされている言語は以下のように制限されています。
- 英語（
en） - 標準中国語（
zh、簡体）または台湾語（zh-Hant、繁体） - 日本語（
ja） - ポルトガル語（
pt） - ロシア語（
ru） - スペイン語（
es） - トルコ語（
tr） - ヒンディー語（
hi） - ベトナム語（
vi） - ベンガル語（
bn）
const translate = await translation.canTranslate({
sourceLanguage: 'en',
targetLanguage: 'ja',
})
また戻り値は以下です
-
no: このブラウザでは、リクエストされた翻訳をすることできません -
readily: ブラウザはリクエストに応じて翻訳できます -
after-download: ブラウザは翻訳できますが、関連するモデルまたは言語パックをダウンロードした後にのみ実行できます
よって、上記の例では translate は、readily になります。例えは、サポートされていないフランス語（fr）を targetLanguage に設定すると translate は no になります。
翻訳する
翻訳するにはcreateTranslator()でトランスレータを作成して、translate() を実行します
const translator = await self.translation.createTranslator({
sourceLanguage: 'ja',
targetLanguage: 'en',
})
await translator.translate('明日の天気は雨です。') // Tomorrow's weather is raining.
デモ
Vite + React で架空の EC サイトを作成し、Translator API を使い日本語を英語に翻訳しました。
簡略化した例を記します。画面右上の「translate」というボタンをクリックしたときに Translator API を実行して翻訳する仕様です。
トークンを設定する
オリジントライアルに登録して、取得したトークンを設定します。（詳しくは以下を参照ください）
.env.development.local
VITE_TRANSLATOR_API_TOKEN="abc..."
main.tsx
const otMeta = document.createElement('meta')
otMeta.httpEquiv = 'origin-trial'
otMeta.content = import.meta.env.VITE_TRANSLATOR_API_TOKEN
document.head.append(otMeta)
ボタンクリックで Translator API を実行
App.tsx
import { useState } from 'react'
export default function App() {
const [callToAction, setCallToAction] = useState('カートに追加')
const translate = async () => {
const translator = await self.translation.createTranslator({
sourceLanguage: 'ja',
targetLanguage: 'en'
})
const translatedCallToAction = await translator.translate(callToAction)
setCallToAction(translatedCallToAction)
}
return (
<div>
<header className="bg-white">
<nav>
<button
type="button"
onClick={translate}
>
translate
</button>
</nav>
</header>
<button type="submit">{callToAction}</button>
</div>
)
}
スクショ
翻訳前
翻訳後
参考
Discussion