外部のAPIを利用して英語を日本語に翻訳する

外部のAPIを利用して、入力した英語を自動で日本語に翻訳します。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

利用するイベント・API

• 外部のAPIを実行する
• 申請入力画面イベント - パーツ値変更イベント

サンプルフォーム

パーツID	パーツタイプ	補足
fidEnglishText	テキストエリアパーツ
fidJapaneseText	テキストエリアパーツ

カスタマイズコード

(function () {
    'use strict';

    // 英語を入力した場合、日本語に翻訳して表示するイベント
    collaboflow.events.on('request.input.fidEnglishText.change', function (data) {

        const parts = data.parts;

        // 入力した英語文をUTF-8に変換
        const englishText = encodeURIComponent(parts['fidEnglishText'].value); 

        if (englishText === '') {
            parts['fidJapaneseText'].value = '';
            return;
        }

        const authKey = '***********ここに取得したAPIキーを指定する***********';
        const sourceLang = 'EN'; // 翻訳前の言語（英語）
        const targetLang = 'JA'; // 翻訳後の言語（日本語）

        const url = 'https://api-free.deepl.com/v2/translate';
        const headers = {"Content-Type": "application/x-www-form-urlencoded"};
        const body = 'auth_key=' + authKey +'&source_lang=' + sourceLang + '&target_lang=' + targetLang + '&text=' + englishText;
        const parseType = 'json';

        // 翻訳のリクエストを送信
        collaboflow.proxy.post(url, headers, body, parseType).then(function (response) {

            // 翻訳した日本語を取得する
            const japaneseText = response.body.translations[0].text;

            // 翻訳した日本語をfidJapaneseTextに設定する
            parts['fidJapaneseText'].value = japaneseText;

        }).catch(function (error) {
            // 失敗時の処理
            console.error(error);

            alert('翻訳に失敗しました。');
            return false;
        });
    });
})();

事前準備

• DeepL API（無料版） にてアカウント登録し、APIキーを取得します。

翻訳APIについて

本サンプルの翻訳は、DeepL API を利用しています。
詳細については、DeepL APIのサイトにてご確認ください。

翻訳可能な言語

翻訳可能な言語は以下の通りです。

• DeepL API -Request Parameters

動作の確認手順

1. サンプルのカスタマイズコードをjsファイルに保存します。
2. 保存したjsファイルを任意のエディターで表示します。
3. 事前準備にて取得したAPIキーを、「***********ここに取得したAPIキーを指定する***********」に指定して保存します。
4. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
5. サンプルフォームに、先で記載されている必要項目を配置します。
6. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
7. 保存したファイルをアップロードします。
8. アプリ設定＞経路設定から新規に経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 申請画面が表示されます。
11. テキストエリアパーツに英語を入力します。
12. テキストエリアパーツに翻訳された日本語が表示されます。

動作イメージ