GCP 入門 (17) - Translation API をJavaScriptから使う
「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. 動作確認
翻訳結果が表示されます。
次回
この記事が気に入ったらサポートをしてみませんか?