🔤

DeepL APIを使って翻訳機能を実装する

2023/03/16に公開

HTML

翻訳機能を実装したい

AI翻訳といえばDeepLが有名ですが、ここが提供しているAPIを使えば自分のサービス内にDeepLによる翻訳機能を実装することができます。

今回、私が作っているレポート作成支援アプリにDeepL翻訳を実装してみたので、このアプリを例にとってAPIの使い方をサクッと解説します。

HTML5ハイブリッドアプリのため、JavaScriptによる実装になります。

DeepL翻訳を使ったレポート作成支援アプリはこちら👇

事前準備-アカウント登録(無料)

DeepL API Freeを使うにあたり、DeepLへのアカウント登録が必要になります。

https://www.deepl.com/pro#developer

必要な情報を入力し、アカウント登録を行います。

クレカ情報の入力が求められますが、無料プランであれば課金は発生しないので安心してください。

※無料プランの場合1ヶ月あたり50万文字まで翻訳可能

APIを使う（JS）

deepl.js

const API_KEY = 'your deepl API KEY' ;
const API_URL = 'https://api-free.deepl.com/v2/translate';

function deeplTranslate() {
    let deeplInput=document.getElementById("deepl-input").value;
    let isJapanese=false;
    let sourceLang="";

    for(var i=0; i < deeplInput.length; i++){//言語判別
        if(deeplInput.charCodeAt(i) >= 256) {
        isJapanese = true;
        break;
        }
    }
    switch (isJapanese){
        case true:
         sourceLang='&source_lang=JA&target_lang=EN';
        break;
        case false:
         sourceLang='&source_lang=EN&target_lang=JA';
        break;
        default:
         alert("言語の判別に失敗しました");
    }
  let content = encodeURI('auth_key=' + API_KEY + '&text=' + deeplInput + sourceLang);
  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("deepl-output").value = data["translations"][0]["text"];
    }).catch(function(error) {
        alert("翻訳失敗");
    });
};

これが、こう👇

APIキー

API_KEYにはDeepLアカウント→アカウント情報から取得できるAPI認証キーを代入します。

const API_KEY = 'your deepl API KEY' ;

言語判別

    for(var i=0; i < deeplInput.length; i++){//言語判別
        if(deeplInput.charCodeAt(i) >= 256) {
        isJapanese = true;
        break;
        }
    }

今回は日→英と英→日の翻訳に対応したいので、入力欄に入力された言語が英語か否かで場合わけしています。

だいぶ強引ですが、charCodeAt(i) の戻り値が 256 以上→英語ではない→日本語　と判定しています。

まとめ

実際のところ、Webサービスやアプリで翻訳機能が欲しいシーンってあまり無いとは思いますが、こういう機能が無料で提供されているのはありがたいことですね。