外部のAPIを利用して英語を日本語に翻訳する
外部のAPIを利用して、入力した英語を自動で日本語に翻訳します。
サンプルについて
本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。
利用するイベント・API
申請入力画面イベント（パーツ値変更イベント）
サンプルフォーム
パーツID | パーツタイプ | 補足 |
fidEnglishText | テキストエリアパーツ | |
fidJapaneseText | テキストエリアパーツ |
カスタマイズコード
カスタマイズコードCopied!
(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のサイトにてご確認ください。
翻訳可能な言語
翻訳可能な言語は以下の通りです。
動作の確認手順
1. サンプルのカスタマイズコードをjsファイルに保存します。
2. 保存したjsファイルを任意のエディターで表示します。
3. 事前準備にて取得したAPIキーを、「 ***********ここに取得したAPIキーを指定する*********** 」に指定して保存します。
4. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
5. サンプルフォームに、先で記載されている必要項目を配置します。
6. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
7. 保存したファイルをアップロードします。
8. アプリ設定＞経路設定から新規に経路を作成します。
9. 新規文書から作成した経路名をクリックします。
10. 申請画面が表示されます。
11. テキストエリアパーツに英語を入力します。
12. テキストエリアパーツに翻訳された日本語が表示されます。
動作イメージ
