文字を入力すると翻訳する

2024年3月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「文字を入力すると英語に翻訳してくれる」機能に挑戦してみようと思います。まあ直接Google翻訳やDeepLを使えばいいんですが

Google Translate APIとDeepL API

翻訳するプログラム？にはGoogle Translate APIというのとDeepL APIというのがあるようです。

1ヵ月あたり50万文字までは無料なのですが、意外とすぐ上限に達してしまいます。

Google Translate APIは50万文字を超えると100万文字ごとに20ドルかかるそうです。

DeepL APIの方は上限に達するとその月は使えなくなるんでしょうかね。

実装

参考：Qiita｜DeepL API Freeを使用して翻訳してみる

というわけでDeepL APIの方を使ってみることにします。

まずは文字入力欄と「翻訳」ボタンと結果出力欄を設置します。文字入力欄のIDをjatext、結果出力欄のIDをentext、ボタンのonclick="output()"としておきます。

<input type="text" id="jatext" placeholder="日本語を入力してください">

<input type="button" value="翻訳" onclick="output()">

<input type="text" id="entext" placeholder="ここに翻訳結果が出ます">

DeepL API Freeに登録して、APIキーをゲットしておきます。

スクリプトを記述します。

const API_KEY = 'ここにAPIキーを入れます';
const API_URL = 'https://api-free.deepl.com/v2/translate';
function output() {
  const jatext = document.getElementById("jatext").value;
  let content = encodeURI('auth_key=' + API_KEY + '&text=' + jatext + '&source_lang=JA&target_lang=EN');
  let url = API_URL + '?' + content;
  fetch(url)
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("Could not reach the API: " + response.statusText);
    }
  }).then(function(data) {
    document.getElementById("entext").value = data["translations"][0]["text"];
  }).catch(function(error) {
    document.getElementById("entext").value = error.message;
  });
};

長文を入力するとすぐ上限いっちゃうので、使えなくなっていたらその時はすみません。

まとめ

日本語を入力したら英語に、英語を入力したら日本語に翻訳してくれるように、←こういうボタンで切り替えたりできないかなあ。