Webサイトフォームフィールド(テキストボックス、テキストエリア)で値を翻訳するためにGoogle翻訳を使用するにはどうすればよいですか?
-
28-10-2019 - |
質問
私のウェブサイトを使用して翻訳したいと思います グーグル翻訳. 。以下のコードを使用しました。
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Webサイトのテキストでは正常に動作していますが、テキスト領域のテキストであるテキストボックスを翻訳しません。解決策はありますか?
解決
ページの要素を反復し、個々のAJAXコールをGoogle翻訳APIに1つずつ翻訳することができ、テキストボックス/テキストアレア値を置き換えることができます。
使用 jquery, 、テキストボックス、Textareas、その他すべてのものを繰り返すことができます。コードは次のようなものでなければなりません:
$('input:text').each(function(index) {
var elementId = $(this).attr("id");
//Call the Google API
$.ajax({
type : "GET",
url : "https://ajax.googleapis.com/ajax/services/language/translate",
dataType : 'jsonp',
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data : "v=1.0&q="+$("#"+elementId).val()+"&langpair=en|es",
success : function(iData){
//update the value
$("#"+elementId).val(iData["responseData"]["translatedText"]);
},
error:function (xhr, ajaxOptions, thrownError){ }
});
});
ご覧のとおり、パラメーター &langpair=en|es
英語からスペイン語への翻訳を求めます。
それぞれに対して1つの呼び出しが行われることを忘れないでください <input type="text".../>
, 、そのため、役に立たない通話をフィルタリングするために、ある種の検証を追加することをお勧めします!また、Googleの回答を検証したい場合もあります。
Googleが送信する応答の種類を理解するためのリンクは次のとおりです。http://code.google.com/apis/language/translate/v1/using_rest_translate.html
編集: GoogleのAPIの無料使用は2011-12-01にシャットダウンされるため、Apertiumを使用できます。通話と応答はほとんど同じです: http://api.apertium.org/json/translate?q=hello%20world&langpair=en|es
他のヒント
別の解決策は、すべての呼び出しを @pgrattonの回答で1回の呼び出しでラップすることです。タグを使用してすべてを分離します。
たとえば、3つのテキストボックスのすべてのコンテンツをこのような1つの文字列に入れます。
<t1>Desk</t1><t2>Monitor</t2><t3>Keyboard</t3>
Google APIに送信します。その後、次のようなものが得られます。
<t1>Secretária</t1><t2>Ecrã</t2><t3>Teclado</t3>
これは、API呼び出しを保存する方法です。私はほぼ2年前に試してみましたが、当時は機能していました。フィールドを分離するために使用しているタグまたは何でも翻訳されておらず、翻訳で迷子にならないようにする必要があります。セパレーターを保持する必要があります。