홈페이지>프로그래밍 관련>기타 소스코드
다운로드

google번역

googleTranslate는 웹페이지를 번역하기 위해 Google Cloud Translation API(v3beta1)와 함께 사용하는 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 "
    }
  ]
}

용법

  1. 스크립트 포함

스크립트 태그를 사용하여 웹사이트(이상적으로는 <HEAD> 섹션)에 googleTranslate를 포함합니다. 

 < script type =" text/javascript " src =" ./path/googleTranslate.js " > </ script >
  1. googleTranslate 초기화

init 메소드를 호출하고 필수 구성을 전달하십시오. 

 googleTranslate . init ( {
    apiProxy : "URL_to_authenticated_API_endpoint" ,
    sourceLanguage : "en" ,
} ) ;
  1. 번역하다

언어를 변경하려면 대상 언어 코드와 함께 googleTranslate.setTargetLanguage 메소드를 호출하세요. 예를 들어 프랑스어의 경우: 

 googleTranslate . setTargetLanguage ( 'fr' ) ;

googleTranslate.setTargetLanguage 메소드는 페이지 번역 작업 완료를 감지하는 데 사용할 수 있는 약속을 반환합니다. googleTranslate가 번역 프로세스를 완료하는 데 몇 초가 걸릴 수 있으므로 로딩 화면이나 그래픽을 표시하려는 경우 유용할 수 있습니다.

번역이 페이지 새로고침을 트리거한 후 번역을 다시 소스 언어로 설정합니다.

지속적인 언어 기본 설정

언어 기본 설정은 gTranslate_lang 키와 함께 localStorage 에 저장됩니다. 이는 사용자가 웹 사이트의 페이지에서 페이지로 이동할 때 사용자 기본 설정을 지속적으로 유지하는 데 유용합니다. 언어 기본 설정을 검색하려면 다음을 실행하세요. 

 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 >

자바스크립트 

 //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 >

기본 스크립트 파일의 자바스크립트(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
확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체