12

各divにMicrosoftまたはGoogleの翻訳ボタンを作成する方法は?

各 div には異なる言語のコンテンツがあり、各 div に翻訳ボタンを追加して、次のリンクのボタンのようにその div のみに応答するようにしたいと考えています。

http://www.bing.com/widget/translator

しかし、上記のリンクに記載されているコードを使用すると、Web ページ全体が翻訳されます。それぞれの翻訳ボタンをクリックして、各 div を個別に翻訳したいと思います。

Google翻訳を使って同じことを簡単に行うことができますか?
どんな翻訳者でも構いません。親切に助けてください。ありがとう。

これは、ユーザーの投稿が私のウェブサイトにどのように表示されるかです。 ここに画像の説明を入力

ユーザーが各 div を任意の言語に翻訳できるように、各 div に翻訳ボタンを付けたいと思います。

私の各divにはIDがあります。

ここに画像の説明を入力

4

2 に答える 2

8

以下では、Microsoft Translator API の使用を開始する方法について説明します。まったく同じ機能を Google Translate API を介して実装できますが、Google はテストに最低 1 ドルを請求するのに対し、MS は毎月 200 万文字の翻訳を無料で提供するため、MS を使用する方がいくらか簡単でした。

前提条件:

  1. Microsoft Translatorの無料サブスクリプションにサインアップします。そのためには、新しい MS アカウントを作成するか、既存のアカウントでログインするよう求められます。

  2. アプリケーションをAzure Datamarketに登録します。

    登録例。注: ここには、アクセス トークン リクエストに必要なクライアント IDとクライアント シークレットの2 つの重要なフィールドがあります。

    ここに画像の説明を入力

実装：

まず最初に、API へのすべてのリクエストにアクセス トークンを含める必要があります。有効期限は 10 分なので、有効期限が切れる前に更新する必要があります。理想的には、プロセスはバックエンド側で実行して、クライアントの秘密を保護し、結果 (トークン + 有効期限) を Web アプリケーションに送り返す必要があります。

Node.js の例:

var request = require("request");

var options = { 
  method: 'POST',
  url: 'https://datamarket.accesscontrol.windows.net/v2/OAuth2-13/',
  form: { 
     // Client ID & Client secret values (see screenshot)
     client_id: 'translator_3000',      
     client_secret: 'ZP8LzjZkKuFAb2qa05+3nNq+uOcqzWK7e3J6qCN1mtg=', 
     scope: 'http://api.microsofttranslator.com',
     grant_type: 'client_credentials' 
  } 
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

応答には、 access_tokenを含むいくつかのフィールドが含まれています。以降の要求にはその値を使用します。

{
  "token_type": "http://schemas.xmlsoap.org/ws/2009/11/swt-token-profile-1.0",
  "access_token": "http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fnameidentifier=translator_3000&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&Audience=http%3a%2f%2fapi.microsofttranslator.com&ExpiresOn=1435405881&Issuer=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&HMACSHA256=st9LJ0F8CKSa6Ls59gQN0EqMWLFed5ftkJiOCVXE4ns%3d",
  "expires_in": "600",
  "scope": "http://api.microsofttranslator.com"
}

アクセス トークンを取得したら、翻訳リクエストを行います。注: これらは JSONP 要求であり、アクセス トークンはappId形式Bearer <token>(スペースで区切られた) のクエリ文字列パラメーターを使用して提供されます。クエリ文字列には、textパラメーター - 投稿のテキストとtoパラメーター - ユーザーが選択した言語コード、サポートされているすべてのコードのリスト、および API から取得できる言語のわかりやすい名前も含まれます。

次に例を示します。

var settings = {
  "url": "https://api.microsofttranslator.com/v2/Ajax.svc/Translate",
  "method": "GET",
  "dataType": "jsonp",
  "jsonp" : "oncomplete",
  "data" : {
    "text" : "Good Morning StackOverflow",
    "to" : "uk",
    "appId" : "Bearer http%3a%2f%2fschemas.xmlsoap.org%2fws%2f2005%2f05%2fidentity%2fclaims%2fnameidentifier=translator_3000&http%3a%2f%2fschemas.microsoft.com%2faccesscontrolservice%2f2010%2f07%2fclaims%2fidentityprovider=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&Audience=http%3a%2f%2fapi.microsofttranslator.com&ExpiresOn=1435405881&Issuer=https%3a%2f%2fdatamarket.accesscontrol.windows.net%2f&HMACSHA256=st9LJ0F8CKSa6Ls59gQN0EqMWLFed5ftkJiOCVXE4ns%3d"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

応答は、投稿の元のテキストに置き換えられる翻訳された文字列です。

"Доброго ранку StackOverflow"

最後に、すべての言語コード:

http://api.microsofttranslator.com/V2/Ajax.svc/GetLanguagesForTranslate

および選択したコードのフレンドリ名:

http://api.microsofttranslator.com/V2/Ajax.svc/GetLanguageNames?locale=en&languageCodes=["en", "de", "es", "uk"]

公式ドキュメントが含まれています。

于 2015-06-27T13:56:13.797 に答える
4

以下に示すClass 要素を使用し<div class="micropost293">ます。

<div class="micropost293"><p>Тестирование</p>
<div class="micropost293_control" lang="en"></div>
    <script>
function googleSectionalElementInit() {
  new google.translate.SectionalElement({
    sectionalNodeClassName: 'micropost293',
    controlNodeClassName: 'micropost293_control',
    background: '#f4fa58'
  }, 'google_sectional_element');
}
</script>
</div>

//Place this Script at bottom of page.
    <script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
于 2015-07-02T22:34:56.530 に答える