GCP 入門 (17) - Translation API をJavaScriptから使う

npaka

2021年4月22日 20:35

「GCP」（Google Cloud Platform）の「Translation API」をJavaScriptから使う方法をまとめました。

・Chrome 89.0.4389.128

前回

1. Translation API

「Translation API」は、テキストを翻訳するAPIです。

料金は、次のとおりです。

2. プロジェクトの作成とAPIの有効化

(1) GCPの「Cloud Console」を開く。
(2) 画面上端の「プロジェクト名」から新規プロジェクトを作成。
(3) 画面上端の「検索ボックス」で「Translation API」を検索し、「有効にする」ボタンを押す。

3. APIキーの作成

(1) 「APIとサービス →認証情報」を選択。
(2) 「認証情報を作成 → API キー」を選択。

4. GCPの Translation API をJavaScriptから使う

「GCP」の「Translation API」をJavaScriptから使う手順は、次のとおりです。

(1) 以下のHTMLを作成。

・index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <script src="./api_key.js"></script>  
    <script src="./main.js"></script>  
  </body>
</html>

(2) 以下のスクリプトを作成。

・main.js

let text = '吾輩は猫である'
let fromLang = 'ja'
let toLang = 'en'

// 翻訳
const URL = "https://translation.googleapis.com/language/translate/v2?key="+apiKey+
    "&q="+encodeURI(text)+"&source="+fromLang+"&target="+toLang
let xhr = new XMLHttpRequest()
xhr.open('POST', [URL], false)
xhr.send();
if (xhr.status === 200) {
    const res = JSON.parse(xhr.responseText); 
    alert(res["data"]["translations"][0]["translatedText"])
}

(3) 以下のスクリプトを作成。
「<APIキー>」には「GCPの準備」で取得したAPIキーを記述します。

・api_key.js

let apiKey = '<APIキー>'

【注意】 公開する場合は、APIキーに制限をかけるのを忘れずに。

5. 動作確認

翻訳結果が表示されます。

次回

この記事が気に入ったらサポートをしてみませんか？