googleTranslateダウンロード - googleTranslateソースコードダウンロード

グーグル翻訳

googleTranslate は、Google Cloud Translation API (v3beta1) を使用して Web ページを翻訳する JavaScript "ライブラリ" です。これは、現在非推奨となっているウェブサイト向けの Google 翻訳の代替/代替手段を提供することを目的としています: https://translate.google.com/intl/en/about/website。

googleTranslate は API 認証を処理しません。設定の一部として googleTranslate にプロキシ URL ( apiProxyを指定する必要があります。この URL は、Google Cloud Translation API で必須に設定されている場合、有効な OAuth 2.0 ヘッダーおよび API キーパラメータとともに、 googleTranslateから受信した POST ペイロードを転送する必要があります。

googleTranslate によってproxyApiエンドポイントに送信されるPOSTペイロードの例:

{
    "sourceLanguageCode" : " en " ,
    "targetLanguageCode" : " fr " ,
    "mimeType" : " text/plain " ,
    "contents" :[
        " Hello " ,
        " World "
    ]
}

proxyApiからの予期される応答:

{
  "translations" : [
    {
      "translatedText" : " Bonjour "
    },
    {
      "translatedText" : " Monde "
    }
  ]
}

使用法

スクリプトを含める

script タグを使用して、ウェブサイト (理想的には<HEAD>セクション) に googleTranslate を含めます。

 < script type =" text/javascript " src =" ./path/googleTranslate.js " > </ script >

googleTranslateを初期化する

initメソッドを呼び出して、必要な設定を渡します。

 googleTranslate . init ( {
    apiProxy : "URL_to_authenticated_API_endpoint" ,
    sourceLanguage : "en" ,
} ) ;

翻訳する

言語を変更するには、ターゲット言語コードを使用してgoogleTranslate.setTargetLanguageメソッドを呼び出します。たとえばフランス語の場合:

 googleTranslate . setTargetLanguage ( 'fr' ) ;

googleTranslate.setTargetLanguageメソッドは、ページ翻訳アクションの完了を検出するために使用できる Promise を返します。 googleTranslate では翻訳プロセスが完了するまでに数秒かかる場合があるため、読み込み画面やグラフィックを表示したい場合に便利です。

翻訳によってページのリロードがトリガーされた後、翻訳をソース言語に戻すように設定します。

言語設定の永続化

言語設定は、 gTranslate_langのキーを使用してlocalStorageに保存されます。これは、Web サイト上のページからページに移動するときにユーザー設定を永続的に保つのに役立ちます。言語設定を取得するには、次のコマンドを実行します。

 var langPreference = localStorage . getItem ( 'gTranslate_lang' ) ;

言語変更の処理

次の例は、ユーザーが<select>フィールドに基づいて言語を切り替える方法を示しています。

HTML

 < select id =" select-lang " >
    < option value =" en " > English </ option >
    < option value =" fr " > French </ option >
    < option value =" ru " > Russian </ option >
</ select >

JavaScript

 //get <select id="select-lang"> element
var langSelectField = document . getElementById ( 'select-lang' ) ;

//get language preference and set it as default value for language `<select>` field
langSelectField . value = localStorage . getItem ( 'gTranslate_lang' ) ;

//listen for `<select>` change event
langSelectField . addEventListener ( 'change' , function ( e ) {

    //translate page
    var translatePromise = googleTranslate . setTargetLanguage ( e . target . value ) ;
    console . log ( "translating..." ) ;

    //promise returns a boolean
    //indicating success/failure of translation
    translatePromise . then ( function ( response ) {

      if ( response ) {
          console . log ( 'translation completed' )
      } else {
          console . log ( 'translation failed' ) ;
      }

    } ) ;
} ) ;

より完全な JavaScript の例

マークアップに含めます (googleTranslate スクリプトの前)

 < script >
    window . googleTranslateApiProxy = "https://authenticated_api_endpoint" ;
</ script >

メインスクリプトファイル内の Javascript (googleTranslate スクリプトの後)

 window . addEventListener ( "load" , event => {
    
    //append translation in progress popup to body
    document . body . innerHTML +=
        '<div id="google_translate_popup">Translating...</div>' ;

    if ( document . getElementById ( "select-lang" ) !== null ) {
        //init google translate library
        var gtranslateInit = googleTranslate . init ( {
            apiProxy : window . googleTranslateApiProxy ,
            excludeElements : [ document . getElementById ( "select-lang" ) ] ,
            sourceLanguage : "en"
        } ) ;

        //when translation completes
        gtranslateInit . then ( function ( response ) {
            document . getElementById ( "google_translate_popup" ) . style . display =
                "none" ;
            if ( ! response ) {
                alert (
                    "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                ) ;
            }
        } ) ;

        var langSelectField = document . getElementById ( "select-lang" ) ;

        //check language preference in localStorage
        if (
            localStorage . getItem ( "gTranslate_lang" ) !== null &&
            localStorage . getItem ( "gTranslate_lang" ) !== ""
        ) {
            langSelectField . value = localStorage . getItem ( "gTranslate_lang" ) ;
        }

        //on language preference change
        langSelectField . addEventListener ( "change" , function ( e ) {
            if ( e . target . value !== "" && e . target . value !== "Select language" ) {
                var translatePromise = googleTranslate . setTargetLanguage (
                    e . target . value
                ) ;
                document . getElementById (
                    "google_translate_popup"
                ) . style . display = "block" ;
                translatePromise . then ( function ( response ) {
                    document . getElementById (
                        "google_translate_popup"
                    ) . style . display = "none" ;

                    if ( ! response ) {
                        alert (
                            "There was a problem with translating this page. Please refresh the page and try again. If the problem persists, please contact the website administrator."
                        ) ;
                    }
                } ) ;
            }
        } ) ;
    }
} ) ;

「翻訳中...」ポップアップのスタイルを設定する CSS

 # google_translate_popup {
    position : fixed;
    z-index : 999 ;
    background : white;
    top : 0 ;
    right : 50 % ;
    padding : 1 rem ;
    border : 1 px solid # fafafa ;
    display : none;
}

構成オプション

パラメータ	タイプ	デフォルト	説明	例
`apiProxy`	弦	`empty`	`required`認証済みエンドポイント URL: この URL は、Google Cloud Translation API で必須に設定されている場合、有効な OAuth 2.0 ヘッダーおよび API キーパラメータとともに、googleTranslate から受信した POST ペイロードを転送する必要があります。	`https://www.domain.com/google-translate-api`
`translationNode`	物体	`document.body`	翻訳が必要な HTML 要素。	`document.getElementById("#banner")`
`observeMutationsOn`	オブジェクト配列	`[]`	変更された場合に翻訳される必要がある HTML 要素の配列。	`[document.getElementById("#banner"), document.getElementById("#main-content") ]`
`excludeElements`	オブジェクト配列	`[]`	翻訳すべきではない要素の配列。	`[document.getElementById("#user-profile"), document.getElementById("#hidden-element") ]`
`sourceLanguage`	弦	`empty`	`optional but recommended` 。入力テキストの BCP-47 言語コード (既知の場合) (たとえば、「en-US」または「sr-Latn」)。サポートされている言語コードは、Google Cloud Translate の言語サポートに記載されています。ソース言語が指定されていない場合、API はソース言語を自動的に識別しようとし、応答内でソース言語を返します。	`en`
`targetLanguage`	弦	`empty`	`required`入力テキストの翻訳に使用する BCP-47 言語コード。Google Cloud Translate の言語サポートにリストされている言語コードのいずれかに設定されます。	`fr`

翻訳選択フィールド

以下は、サポートされているすべての言語とそのコードを含む選択フィールドの例です (2019 年 10 月 8 日現在)。

 < select name =" translate " id =" select-lang " >
    < option selected =" selected " > Select language </ option >
    < option value =" af " > Afrikaans </ option >
    < option value =" sq " > Albanian </ option >
    < option value =" am " > Amharic </ option >
    < option value =" ar " > Arabic </ option >
    < option value =" hy " > Armenian </ option >
    < option value =" az " > Azerbaijani </ option >
    < option value =" eu " > Basque </ option >
    < option value =" be " > Belarusian </ option >
    < option value =" bn " > Bengali </ option >
    < option value =" bs " > Bosnian </ option >
    < option value =" bg " > Bulgarian </ option >
    < option value =" ca " > Catalan </ option >
    < option value =" ceb " > Cebuano </ option >
    < option value =" zh-CN " > Chinese (Simplified) </ option >
    < option value =" zh-TW " > Chinese (Traditional) </ option >
    < option value =" co " > Corsican </ option >
    < option value =" hr " > Croatian </ option >
    < option value =" cs " > Czech </ option >
    < option value =" da " > Danish </ option >
    < option value =" nl " > Dutch </ option >
    < option value =" en " > English </ option >
    < option value =" eo " > Esperanto </ option >
    < option value =" et " > Estonian </ option >
    < option value =" fi " > Finnish </ option >
    < option value =" fr " > French </ option >
    < option value =" fy " > Frisian </ option >
    < option value =" gl " > Galician </ option >
    < option value =" ka " > Georgian </ option >
    < option value =" de " > German </ option >
    < option value =" el " > Greek </ option >
    < option value =" gu " > Gujarati </ option >
    < option value =" ht " > Haitian Creole </ option >
    < option value =" ha " > Hausa </ option >
    < option value =" haw " > Hawaiian </ option >
    < option value =" he " > Hebrew </ option >
    < option value =" hi " > Hindi </ option >
    < option value =" hmn " > Hmong </ option >
    < option value =" hu " > Hungarian </ option >
    < option value =" is " > Icelandic </ option >
    < option value =" ig " > Igbo </ option >
    < option value =" id " > Indonesian </ option >
    < option value =" ga " > Irish </ option >
    < option value =" it " > Italian </ option >
    < option value =" ja " > Japanese </ option >
    < option value =" jw " > Javanese </ option >
    < option value =" kn " > Kannada </ option >
    < option value =" kk " > Kazakh </ option >
    < option value =" km " > Khmer </ option >
    < option value =" ko " > Korean </ option >
    < option value =" ku " > Kurdish </ option >
    < option value =" ky " > Kyrgyz </ option >
    < option value =" lo " > Lao </ option >
    < option value =" la " > Latin </ option >
    < option value =" lv " > Latvian </ option >
    < option value =" lt " > Lithuanian </ option >
    < option value =" lb " > Luxembourgish </ option >
    < option value =" mk " > Macedonian </ option >
    < option value =" mg " > Malagasy </ option >
    < option value =" ms " > Malay </ option >
    < option value =" ml " > Malayalam </ option >
    < option value =" mt " > Maltese </ option >
    < option value =" mi " > Maori </ option >
    < option value =" mr " > Marathi </ option >
    < option value =" mn " > Mongolian </ option >
    < option value =" my " > Myanmar (Burmese) </ option >
    < option value =" ne " > Nepali </ option >
    < option value =" no " > Norwegian </ option >
    < option value =" ny " > Nyanja (Chichewa) </ option >
    < option value =" ps " > Pashto </ option >
    < option value =" fa " > Persian </ option >
    < option value =" pl " > Polish </ option >
    < option value =" pt " > Portuguese (Portugal, Brazil) </ option >
    < option value =" pa " > Punjabi </ option >
    < option value =" ro " > Romanian </ option >
    < option value =" ru " > Russian </ option >
    < option value =" sm " > Samoan </ option >
    < option value =" gd " > Scots Gaelic </ option >
    < option value =" sr " > Serbian </ option >
    < option value =" st " > Sesotho </ option >
    < option value =" sn " > Shona </ option >
    < option value =" sd " > Sindhi </ option >
    < option value =" si " > Sinhala (Sinhalese) </ option >
    < option value =" sk " > Slovak </ option >
    < option value =" sl " > Slovenian </ option >
    < option value =" so " > Somali </ option >
    < option value =" es " > Spanish </ option >
    < option value =" su " > Sundanese </ option >
    < option value =" sw " > Swahili </ option >
    < option value =" sv " > Swedish </ option >
    < option value =" tl " > Tagalog (Filipino) </ option >
    < option value =" tg " > Tajik </ option >
    < option value =" ta " > Tamil </ option >
    < option value =" te " > Telugu </ option >
    < option value =" th " > Thai </ option >
    < option value =" tr " > Turkish </ option >
    < option value =" uk " > Ukrainian </ option >
    < option value =" ur " > Urdu </ option >
    < option value =" uz " > Uzbek </ option >
    < option value =" vi " > Vietnamese </ option >
    < option value =" cy " > Welsh </ option >
    < option value =" xh " > Xhosa </ option >
    < option value =" yi " > Yiddish </ option >
    < option value =" yo " > Yoruba </ option >
    < option value =" zu " > Zulu </ option >
</ select