Dion Almaer 씨가 예전에 Google AJAX 언어 API를 이용한 번역 북마클릿에 대한 글을 쓴 적이 있습니다:
Ajax 언어 API를 개발자들이 알게 되었다는 것은 정말 운이 좋은 일이었다고 생각합니다. 덕분에 우리는 번역역 걱정을 하지 않을 수 있게 되었습니다. 이제 우리는 API를 사용하여 Goolge 백엔드를 통해 번역 작업을 할 수 있습니다.

저는 최근에 급하게 번역을 해야할 일이 몇 번 있었습니다. 프랑스어와 스페인어로 된 짧은 Twitter 메시지를 영어로 옮겨야 했습니다. 저는 외국 포럼에 나온 몇몇 기술적 이슈에 대한 답이 있었습니다.

그래서, 외국어를 선택하고 북마크를 클릭하면 작은 창이 떠서 영어로 번역해주는 번역 북마클릿을 만들어보기로 했습니다. 자동 번역이 완벽해지려면 한참 멀었지만, 대부분의 경우 요점 정도는 쉽게 알 수 있을 것입니다(책 한 권을 통째로 번역하려고 하진 않을테니까요).

아래는 이 북마클릿을 만든 방법입니다:

소스

우선, 북마클릿이 될 JavaScript 소스를 작성했습니다. 코드에는 몇가지 단계가 있습니다. 첫째로, 우리는 작업을 시작하고 Ajax 언어 API를 호출하고, 번역을 거쳐 우리가 원하는 언어를 얻을 수 있는 메소드를 작성합니다. 영어를 원하지 않는다면 언어 코드를 변경하면 됩니다.

[code:js]
if (!window['apiLoaded']) {
  window.apiLoaded = function() {
    var language = "en";
    var text = window.getSelection().toString();
    if (text) {
      google.load("language", "1", { "callback" : function() {
        google.language.detect(text, function(dresult) {
          if (!dresult.error && dresult.language) {
            google.language.translate(text, dresult.language, language, function(tresult) {
              if (tresult.translation) {
                translationWindow(tresult, dresult);
              } else {
                alert('No translation found for "' + text + '" guessing the language: ' + dresult.language);
              }
            });
          }
        });
      }});
    }
  };
}

그 뒤에는 결과를 window에 표시할 수 있는 메소드를 작성합니다. 저는 가능하면 Prototype UI Window 객체를 사용했고, 그렇지 않으면 익숙한 alert() 를 사용했습니다:

[code:js]
if (!window['translationWindow']) {
  window.translationWindow = function(tresult, dresult) {
    if (window['UI']) {
      new UI.Window({theme:  "black_hud",
                   shadow: true,
                   width:  350,
                   height: 100}).setContent("<div style='padding:6px'>" + tresult.translation + "</div>")
                   .setHeader("English Translation")
                   .setFooter("Language detected: " + dresult.language)
                   .center({top: 20}).show();
    } else {
      alert(tresult.translation + " [lang = " + dresult.language + "]");
    }
  }
}

다음에는, Prototype UI window 코드를 읽고 DOM에 리소스를 동적으로 추가하는 방식으로 함께 사용하는 CSS 리소스를 읽어들였습니다:

[code:js]
if (!window['UI']) {
  var pw = document.createElement('script');
  pw.src = 'http://almaer.com/downloads/protowindow/protowin.js';
  pw.type = "text/javascript";
  document.getElementsByTagName('body')[0].appendChild(pw);
  var pwdefault = document.createElement('link');
  pwdefault.setAttribute('rel', 'stylesheet');
  pwdefault.setAttribute('type', 'text/css');
  pwdefault.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/window.css');
  document.getElementsByTagName('body')[0].appendChild(pwdefault);
  var pwblack = document.createElement('link');
  pwblack.setAttribute('rel', 'stylesheet');
  pwblack.setAttribute('type', 'text/css');
  pwblack.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/black_hud.css');
  document.getElementsByTagName('body')[0].appendChild(pwblack);
}

마지막으로, Google API 로더를 읽어들여서 ?callback=apiLoaded을 통해 동적 로딩 옵션을 사용합니다. 이는 우리가 처음에 봤던 메인 드라이버를 시작하게 합니다. 이미 로드되었으면 직접 호출할 수 있습니다(같은 페이지에서 다중 번역을 하기 위함).

[code:js]
if (!window['google']) {
  var s = document.createElement('script');
  s.src = 'http://www.google.com/jsapi?callback=apiLoaded';
  s.type = "text/javascript";
  document.getElementsByTagName('body')[0].appendChild(s);
} else {
  apiLoaded();
};

"컴파일"

이것은 가공 전 형태인데, 우리가 필요한 것은 영어를 원하면 바로 사용할 수 있는 북마클릿 형태입니다. 이를 위해 저는 John Grubber 씨의 makebookmarklet Perl 스크립트를 사용해 변환을 했습니다.

서버

Prototype UI 코드는 서버에 있어야 하므로, Prototype + Window JavaScript의 조합된 파일을 포함한 가볍게 만든 버전과 한가지 테마의 CSS 세트를 서버에 넣었습니다.

작동

제가 얘기한 것에 대해 믿음이 안가세요? 실제 동작하는 것을 한번 보세요:


또 다른 번역 관련 응용프로그램입니다. 웹 기반 IRC 응용프로그램인 Mibbit 에는, 대화방에서 자동 번역을 해주는 "번역" 기능이 있습니다.
사용자 삽입 이미지

from Immediate Translation and Mibbit on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요