【Azure Translator】リソース作成方法やエンドポイントurlをチェックして、英語→日本語の翻訳機能を作る

今回は、管理人が案件じゃなくて個人的に作っているアプリケーションで、翻訳のAPIを使う場面があったので、その一部始終を紹介します。Azure Translatorを使用し、メソッドpostでテキスト投げてレスポンスに翻訳済みが返ってくるところまでは確認しました(javascriptのfetchを使ってます)。早速、設定やコードを見ていきましょう。

AzureポータルでのTranslator初期設定

AzureポータルでTranslatorのリソース作成

とりあえず、この手のアプリケーションはAPIキーとかが必要なことが多いので、使えるように設定しますか。 今回はAzure Translatorを使うので、まずはAzureポータルに入り、リソースの作成に進みました。

探すのがめんどくさいので・・・ 検索キーワードに『Translator』といれて検索します。出てきましたね。これをクリックしてTranslatorのリソース作成開始。

Translatorリソース設定しました。 『サブスクリプション・リソースグループ』は、管理人が以前作ったものがあったのでそれを流用（ない場合は新しく作る）。リージョンは、スクリプト作成時に使います。あとは分かりやすい名前を付けてプラン決定。価格プランについては、テストなので無料F0プランにしました(月200万文字まで)。

次の画面で作成ボタンを押すとリソース作成されます。 とりあえず今回は管理人しか使わないし、公開もしないので設定しませんでしたが、リソースアクセス範囲は、プロダクトの状況に応じて設定します。

デプロイが完了しました。これでTranslatorのAPIキーやエンドポイントが使えます。

APIキーやエンドポイントを確認

作ったTranslatorのリソース画面に入りました。 横のメニューに『リソース管理→キーとエンドポイント』という項目があります。ここをクリック。

APIキーやエンドポイントなどが記載されていました。これをメモしておいて、スクリプトの中で使用します。 また、テキスト翻訳エンドポイントには『https://api.cognitive.microsofttranslator.com/』とありますが、これを試しにスクリプトで使ってみたところ結果が戻ってこなかったので、以下のリンクにあるように『ベースURL・サービス エンドポイントをアジア太平洋に（リージョンがjapaneastなので）』というような処置をおこないました。

実際に使ったエンドポイントは、アジア太平洋:api-apc.cognitive.microsofttranslator.comでした。

Translator v3.0
https://learn.microsoft.com/ja-jp/azure/ai-services/translator/text-translation/reference/v3/reference

Azure Translator翻訳・コード例(javascript&html)

コードはこんな感じに(htmlファイル)。id=originalに入れた英文が、id=resultの部分に翻訳されて表示されます。APIで取る処理はjavascriptのfetchで。エンドポイントの後ろについているパラメータ『api-version=3.0&from=en&to=ja』は、APIバージョンと英語から日本語にという内容です。

実際のアプリのときはサーバーサイドにしてAPIキーを見えないようにしますが、テスト用でスクリプト内に書いています。ヘッダーのOcp-Apim-Subscription-Keyの部分に発行したAPIキーを入れます。あとは、ヘッダーに各種情報セット、ボディに翻訳したい文章をセットして、メソッドPOSTで投げて、レスポンスから結果を取り出して表示します。

Azure Translator翻訳 動作確認

ではブラウザで実行してみましょう。 適当に『Hello, world!』ってかいたんですけど、そのまま『ハローワールド』って日本語表記になってました。翻訳自体は動作しています。

ちょっと長めの文章もテストしてみます。海外のパブリックドメイン文章サイトにあった、ジュール・ヴェルヌ小説(THE CENTRE OF THE EARTH)の冒頭部分。こちらも翻訳OKですね～。

あとがき・まとめ

まとめると、こんなところでしょうか。とりあえず翻訳できることは確認できたので、今作っている他のアプリケーションに組み込んでみます。