はじめに
みなさんはなんのブラウザを使っていますか。私は、Google Chromeをずっと使っているのですが、実験的な機能としてChromeには組み込みのAIが搭載されています。その中のドキュメントを眺めていると、オフラインでも動作する、組み込みの翻訳APIがあることを見つけました。
日本語でプログラミングできる「なでしこ」でも、こうしたAPIを利用することで多言語対応のWebサイトを作れると、より便利なのではないかと思ったので、今回は、なでしこから「Translator API」を使ってみることとしました。
この記事は2025年12月時点での内容です。「Translator API」は実験的な機能なので、予告なく、仕様が変更になる可能性があります（実際、ネット上のいくつかの記事のコードは既に使えませんでした）。試す際は、公式ドキュメントを確認してください。
使ってみる
まずは下記のURLにアクセスして「Translator API」を有効にしましょう。
chrome://flags/#translation-api
参考文献と同様に、今回はEnabled without language pack limitに変更しました。なお、変更時にはChromeの再起動が求められます。
さて、再起動し「Translator API」が有効になったら、以下のなでしこのコードを実行してみましょう。これは「Translator API」が使用できるかどうかを確認するコードで、trueとなれば成功です。
WINDOWに「Translator」がハッシュキー存在するかを表示
参考
JavaScriptで書くと？
console.log('Translator' in window);
次に、いよいよ「Translator API」を使っていきます。JavaScript内に用意されている関数を呼び出すにはJS関数実行またはJSメソッド実行を使用すればよいのですが、どちらでもOKという訳ではありません。
例えばJavaScriptで言うwindow.alert("Hello")は、
WINDOWの「alert」を「Hello」でJSメソッド実行
「window.alert」を「Hello」でJS関数実行
のようにどちらで記述しても、同様の実行結果となります。一方で、
「Translator.create」を《翻訳オプション》でJS関数実行
「Translator」の「create」を《翻訳オプション》でJSメソッド実行
は異なる結果となります。この原因はJSメソッド実行のソースコードを見ればわかるのですが、「JSメソッド実行」は、助詞「の」を取る引数（今回の場合は「Translator」）がObjectかどうかを判定して、エラーを発生させるようにしているのです。つまり、上記のコードの種明かしとしては、「window」はObjectに対し、「Translator」がFunctionだったため、「JS関数実行」と「JSメソッド実行」で異なる結果が表示されてしまったということになります。
加えて、Translator.createは非同期関数のため、完了を待つ(await)か、完了した際に実行させる(then)か、しないといけないのですが、なでしこにはawaitに当たるような命令がないため、thenで何とかしないといけません。
以下のコードは、実行時エラーになります。
「await Translator.create」を《翻訳オプション》でJS関数実行
もちろん、なでしこには、非同期関数を扱うための機能が用意されています。
使い方は簡単で、「Promiseを返すJS関数」を[引数]でJS関数実行に続けて、それの成功時には～と無名関数を記述します。
以上を踏まえて、次のようなコードを作成しました。
もし、WINDOWに「Translator」がハッシュキー存在するなら
《翻訳オプション》は空辞書
《翻訳オプション》@「sourceLanguage」に「ja」を代入
《翻訳オプション》@「targetLanguage」に「en」を代入
「Translator.create」を《翻訳オプション》でJS関数実行
それの成功時には
対象の「translate」を「吾輩は猫である」でJSメソッド実行
それの成功時には
対象を表示
ここまで
ここまで
ここまで
これを実行すると、I'm a catと表示されます。
JavaScriptで書くと？
if('Translator' in window){
Translator.create({
sourceLanguage: 'ja',
targetLanguage: 'en'
}).then(translator=>{
translator.translate('吾輩は猫である').then(text=>{
console.log(text);
});
});
}
では、これを改造し、翻訳アプリを作ってみましょう。例えば、以下はエディタ（入力欄）と、ボタンを組み合わせて、ボタンを押すことで、入力欄に書かれた日本語を翻訳してくれるアプリです。
《翻訳さん》は空
もし、WINDOWに「Translator」がハッシュキー存在するなら
《翻訳オプション》は空辞書
《翻訳オプション》@「sourceLanguage」に「ja」を代入
《翻訳オプション》@「targetLanguage」に「en」を代入
そ＝「Translator.create」を《翻訳オプション》でJS関数実行
その成功時には
《翻訳さん》に対象を代入
ここまで
ここまで
空のエディタ作成して《入力欄》に代入
「翻訳ボタン」のボタン作成して、それをクリックした時には
《日本語》=《入力欄》からテキスト取得
そ＝《翻訳さん》の「translate」を《日本語》でJSメソッド実行
その成功時には
対象を表示
ここまで
ここまで
また、表示したい内容をプログラム中に記述しておき、ボタンを押すことで翻訳された文章を表示することも可能となります。
《翻訳さん》は空
もし、WINDOWに「Translator」がハッシュキー存在するなら
《翻訳オプション》は空辞書
《翻訳オプション》@「sourceLanguage」に「ja」を代入
《翻訳オプション》@「targetLanguage」に「en」を代入
「Translator.create」を《翻訳オプション》でJS関数実行
それの成功時には
《翻訳さん》に対象を代入
ここまで
ここまで
《文章》＝「ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。広い門の下には、この男のほかに誰もいない。ただ、所々丹塗の剥げた、大きな円柱に、蟋蟀が一匹とまっている。羅生門が、朱雀大路にある以上は、この男のほかにも、雨やみをする市女笠や揉烏帽子が、もう二三人はありそうなものである。それが、この男のほかには誰もいない。何故かと云うと、この二三年、京都には、地震とか辻風とか火事とか饑饉とか云う災がつづいて起った。そこで洛中のさびれ方は一通りではない。旧記によると、仏像や仏具を打砕いて、その丹がついたり、金銀の箔がついたりした木を、路ばたにつみ重ねて、薪の料に売っていたと云う事である。洛中がその始末であるから、羅生門の修理などは、元より誰も捨てて顧る者がなかった。するとその荒れ果てたのをよい事にして、狐狸が棲む。盗人が棲む。とうとうしまいには、引取り手のない死人を、この門へ持って来て、棄てて行くと云う習慣さえ出来た。そこで、日の目が見えなくなると、誰でも気味を悪るがって、この門の近所へは足ぶみをしない事になってしまったのである。」
空のラベル作成して《入力欄》に代入
改行作成
「日本語」のボタン作成して、それをクリックした時には
《入力欄》に《文章》をテキスト設定
ここまで
「英語」のボタン作成して、それをクリックした時には
《翻訳さん》の「translate」を《文章》でJSメソッド実行
それの成功時には
《入力欄》に対象をテキスト設定
ここまで
ここまで
以前、私が投稿した記事のように、なでしこが、Google Sites等、WEBページに埋め込んで実行できることを踏まえると、多言語対応のWEBサイトなども簡単に出来るのではないでしょうか。
ぜひ、挑戦してみてください。
参考文献
以上